Difference between JavaScript array methods
By: Elen Tseller
Tags: Front End Development, Javascript Tips, JavaScript

Completion values

Before we actually talk about the arrays and their methods I have one question for you. Have you ever wondered why when you used the browser’s console for assigning variables, for example, it would return ‘undefined’?

That is because all statements (and let myCatsName = ‘Snowball’) is a declaration statement) have their completion values. I have always thought why it is not just whatever I assigned to the variable and turns out that this is just the process of the assignment itself that returns ‘undefined’. You can as well write just let foo; without assigning anything and you will get the same result — undefined.

Array methods comparison: .forEach() vs .map()

Each array method has a ‘completion value’ aka something that it returns even if you do not really expect it. Let’s compare two methods that can look similar at first but are very different if you look carefully:

Array.map(); Array.forEach();

They both iterate over an array and use a piece of data at each index to create something new. For example, you might call a function for every index of the array using .forEach(); that creates some other data based on the input:

Here we create some new cat descriptions based on what we had in our ‘houseCats’ array and also call a function that ‘feeds’ each cat. However, if we would try to assign the result of .forEach(); to some variable, it would always stay ‘undefined’ because this is the .forEach(); method’s completion value. It does not return a new array or mutates the original one without us explicitly saying so, so we had to push the new model into an external array of the ‘catsWithAvatars’.

Array.map(); is different. It is specifically created to help you make new models based on what you already had. If you ever worked with React you might have noticed that whenever you want to create a list of some nodes and store it in a variable you always use the ‘map’ method. That is because .map(); actually returns a new array of something. Let’s modify our cats example:

Here we assign the result of .map(); directly to ‘houseCatsToPictures’ and the variable actually has the data without a need to assign it to any external array.

Array methods comparison: .push() vs .concat()

There are plenty of situations in programming when you need to add something to an already existing array. The .push(); method might look like as a perfect way to do so, but you have to be aware of a few nuances. Let’s take a look at the example:

Pay attention to what the ‘pushMethodTest’ returns. It does not return the array because this method does not copy the array it is used on, so its retun value is different, and it will be the current length of the array. It can be easy to forget when you use it in a chain like:

someArray.sort().push(‘something’).map();

Ooops! .map(); is not a function because we no longer work with ‘someArray’ but with the number returned from .push(). So, make sure to use the initial array and not the result of .push(); or use .concat(); if you need the array straight away and do not mind to work with a copied array instead of the initial one.

Conclusion

Whenever you work with arrays’ or any other builtin methods check your understanding of these things:

Does it mutate the original data? What does it return, what happens if I assign it to a variable?

Hopefully, this article will save you some time now or in the future. Happy coding!