My Favorite JavaScript Array Methods

.filter

The filter() method returns an array that contains elements of a parent array that match the set test. The function containing the test is passed as the arguments to the filter method. The filter method returns true or false. If its true its in the new array and if it is false it is not in the new array. The great thing is that it doesn’t change the underlying object that you are filtering over.

An array of 3 items will be returned with less than or equal to 13.

[{“name”:”Stephanie”,”age”:10},

{“name”:”Andrew”,”age”:13},

{“name”:”Garry”,”age”:10}]

console.log(students) returns all the students

[{“name”:”Stephanie”,”age”:10},{“name”:”Lilly”,”age”:14},{“name”:”Andrew”,”age”:13},{“name”:”Garry”,”age”:10}]

It’s super convenient because we don’t have to worry about changing the old array when we use these new array methods to create new arrays.

.map

Map allows you to take one array and convert it into a new array. All of the students in the array will look slightly different.

Let’s say we want to get an array of all the students names. We’ll be able to get an array of the students names by using .map. It looks very similar. All we’ll do is change .filter to .map. It takes a single parameter which is a function with the student and will return a new array. In this case we just want student.name.

This will give us a new array with all the students names in the array.

[“Stephanie”,”Lilly”,”Andrew”,”Garry”]

This is super convenient when you want to take an object for example, and just get the names or a single key or take one array and convert it into another array. There are hundreds of uses.

.find

Find returns the first object in an array that passes the test. Again, it takes the exact same single function with the student as the parameter and all we do is create a true/false statement which will return the student for the first one that is true. In this case let’s say we want to get the name of Lily.

This will return the student with the name Lilly.

{“name”:”Lilly”,”age”:14}

This will return the first item that it finds in the array that returns true for the statement that was passed inside of the find function.