My Top 3 JavaScript Array Methods

JavaScript is a super versatile language. I love it and it really has come a long way over recent years. With JavaScript, we can now build powerful single page applications and when building these applications you will at some point or another use arrays.

I love arrays, here are my top three JavaScript methods that I use on a regular basis.

1. Array Filter

This is actually a method that was added back in ES5, but it is still a method that I use on a regular basis. Array filter allows us to basically do what it says on the tin. Filter an array to a subset based on rules that we provide.

To do this, you simply call the filter method on the array and pass it a callback. For example in this array, I am filtering the results to only return objects where the age is less than 18.

const people = [
  { name: 'Jon', age: 23 },
  { name: 'Daenerys', age: 23 },
  { name: 'Arya', age: 17 }
]

const children = people.filter(person => person.age < 18)
// Returns [ { name: 'Arya', age: 17} ]

2. Array Find

This is something that was added to the ES6 specification. It is similar to the array filter method, but it instead returns us the first result from the filtered array.

For this method again we pass it a callback, containing the rules for our filter. It will then filter the results and return us the first item in the subset. In this case, I want to find the first adult in the array of people.

const people = [
  { name: 'Jon', age: 23 },
  { name: 'Daenerys', age: 23 },
  { name: 'Arya', age: 17 }
]

const adult = people.find(person => person.age >= 18)
// Returns { name: 'Jon', age: 23 }

You'll notice that this time it returns the object, as opposed to an array containing the object.

3. Array ForEach

The forEach method is one that was introduced back in ES5 and therefore has ample browser support. However, I do still see code where people are not using this and are instead using a for loop.

The forEach method does exactly what you think, it loops over each item in the array for you to run a callback on. This is similar to the map method, but there is one key difference. When you use array map, it returns a new array based on the callback you have passed it. Whereas with the forEach method it returns nothing.

Both the map and forEach methods have their use cases. But if I am not intending on manipulating the array I will generally reach for the forEach method.

In the example below I am simply calling the forEach method on the array and passing the object to a custom function.

const people = [
  { name: 'Jon', age: 23 },
  { name: 'Daenerys', age: 23 },
  { name: 'Arya', age: 17 }
]

people.forEach(person => sendNotification(person))

Conclusion

There you go, there are my three favourite array methods. Don't get me wrong there are plenty of other array methods that are really useful and I implore you to look them up. But these are three of my favourites and the three I most commonly use.

Do you have any different array methods that you frequently use? Be sure to let me know.