Understanding Basic Array Methods

Erin Fox
3 min readMar 6, 2018

--

It’s time for a quick refresher on a few array methods to speed up your coding!

Array Method: A method that performs an operation on an array 😂

Why Use an Array Method? Less logic. It’s not only fast, it allows us to write simple code with less bugs in less time. Below are definitions and examples in ES6. It’s *way* more simple than the old school ‘for loops’ (big surprise).

Lets get started. This is the array we will be using for .map, .filter and .find.

.map 🗺

This method iterates over an array and returns a transformed version of a new array. It takes a callback function, and returns a subset property of the array.

In other words: it loops over every item in the array and allows you to transform/convert it.

.filter 👯

It iterates over an array and returns a filtered array. This method takes a callback function, and returns a filtered array where the function returns true.

In other words: it loops over every item in the array and returns only the items that match the filter. It only returns what you are matching. BOO(lean)!

But they’re so similar!! What’s the difference?

.map is used to convert each item of the array, while .filter is used to select certain items of the array.

.find 🕵🏻‍

This method iterates over an array and finds the first item that matches. It returns a single item. It takes a callback function and returns one thing and stops looping through.

In other words: it finds and returns the single exact thing you’re looking for in an array

.reduce ✂️

Loops over an array of values and reduces it to one value. Reduce takes an argument that is a function with 2 values. The function is called repeatedly over the array. (This one is are tricky one, I’m always seeing new or different definitions).

Conclusion 🔚

These array methods save a lot of time when constructing your code! There’s also many other methods you can find here like .slice, .join, or .push.

Happy coding!

--

--