What are Arrays? - Part II

Array.filter()

The.filter() method is a frequently used array method. In response to the condition you give, this method returns another array with some of the elements from the original array.

let ages = [15, 20, 22, 25, 49]

let agesAboveTwentyOne = ages.filter(function(age) {
    return age > 21;
});
console.log(agesAboveTwentyOne); // [22, 25, 49]

Notice how we received a new array containing the items that met the condition. The condition is that the age be greater than 21.

Array.filter(callback)

The first argument to the .filter() method is a callback.

Example:

function(age) {
  return age > 21;
}

Javascript will call your callback for each single item in the array. Because our numbers array contains 5 items, it will be called 5 times. It will assign a value to the number parameter that you specified inside the callback every time it calls this function.

If the callback function returns true, the item is added to the final array returned by .filter(). If the callback function returns false, the item will be removed from the final array.

Array.find()

Calling the .find(callback) method on an array retrieves the first element that matches the specified criteria. Returns undefined if the item is not found.

For example:

let myFurBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];

let babies = myFurBabies.find(function(myFurBaby) {
    return myFurBaby === 'Monty';
});
console.log(babies); // 'Monty'

Therefore, until one of the callbacks returns true, the .fine(callback) method will invoke the callback that you specified for each item in the array. It will then stop calling the other callbacks and give you the item for which the callback returned true.

function(myFurBaby) {
  return myFurBaby === 'Monty';
}

'Dutches' is the command that myFurBaby calls (first item of the array). myFurBaby === 'Dutches', thus the callback will return false. Therefore, the callback will be repeated with the following name value.  The callback will be called again with the next value of name. The name this time = 'Monty'. The callback returns true because myFurBaby === 'Monty' (the condition in the callback) returns true. So the .find() method stops and returns 'Monty'.

.filter() vs. .fine()

What is the difference between .filter() and .find()?

The difference has to do with the return type of these 2 methods.

These two approaches provide different return type.

1. The filter() method ALWAYS returns an array.
2. The find() method returns the first element that matches the condition or undefined.

Examples:

let ages = [15, 20, 22, 25, 49];

// .filter() ALWAYS returns an array 
ages.filter(function(age) {
   return age >= 40;
}); // [49]

// .filter() ALWAYS return an array (even if it's empty)
ages.filter(function(age) {
    return age =< 12;
}); // []

// .find() returns the first match or undefined(even if there are 3 numbers that satisfy the condition)
ages.find(function(age) {
   return age >= 21;
}); // 22

ages.find(function(age) {
   return age <= 14;
}); // undefined

The filter() method will return an array, even if it is an empty array or 1 item that matches the condition. On the other hand, the find() method returns the first element that matches the condition.