5 array methods all JavaScript beginners should know

Per Harald Borgen
Learning New Stuff
Published in
3 min readJun 10, 2017

--

This article will give you a quick intro to five of the most important array methods in JavaScript, which you’ll need to know in order to be an effective developer.

Each of the examples has got a quick and simple explanation in addition to an interactive Scrimba screencast, which enables you to both watch and edit the code. The screencasts are gathered in a playlist here.

Let’s get started!

Array.forEach()

.forEach() simply loops through the elements of your array and leaves it up to you to do something with each of the elements. There is no point in returning anything in the callback, as .forEach() doesn’t return a new array.

Use .forEach() as a quicker way of writing a traditional for loop.

Check out the interactive Scrimba explanation here.

Click the image to get to the interactive Scrimba screencast.

Array.map()

.map() will loop through your array and return a new array based upon the returns statements you specify in the callback function.

Use .map() if you want to change each of the elements in the array, and store the result in a new array.

Check out the interactive Scrimba explanation here.

Click the image to get to the interactive Scrimba screencast.

Array.filter()

The .filter() method will remove the elements that don’t pass the condition you specify in the callback function, while keep the ones that pass.

Use .filter() when you want to filter away some of the elements of the array, while keeping others.

Check out the interactive Scrimba explanation here.

Click the image to get to the interactive Scrimba screencast.

Array.indexOf()

indexOf() tells you where your element is located in the array by returning its index. If your element is duplicated, it’ll return the index for the first one.

Use .indexOf() when you want to find out where a certain element is positioned.

Check out the interactive Scrimba explanation here.

Click the image to get to the interactive Scrimba screencast.

Array.every()

.every() will return true if the callback returns true on all of the elements. Otherwise .every() will return false.

Use .every() if you want to know if every single element in the array pass a certain condition.

Check out the interactive Scrimba explanation here.

Click the image to get to the interactive Scrimba screencast.

These five are just the beginning, there are many other methods you can use to manipulate arrays in JavaScript, and libraries like lodash and underscore give you even greater powers.

However, as a beginner I’d focus on learning the native methods first, before moving on the libraries.

Thanks for reading. I’m Per, co-founder of Scrimba. If you like this article, be sure to subscribe for our publication and also check out Scrimba.com, where you’ll find many more screencasts on web development.

If you’re confused on how Scrimba works, this one minute intro should make it clearer :)

--

--

Per Harald Borgen
Learning New Stuff

Co-founder of Scrimba, the next-generation coding school.