Arrays in JavaScript — Arrays[3]

Here’s the next installment of array methods. I know I mentioned this previously, but for me, I find it help to mentally organize these in groups. That’s just me though, so whatever works for you is great! Even if you only take away one thing here, whatever it might be, that’s a step forward and progress!

Let’s get our test arrays back in the game:

.forEach()

The forEach() method executes a provided function once for each array element. So for each element (or item) in the array, you can do something to those items once. The nice thing is, it almost reads like English.

So we take testArray1 and for each item in the array, we’re going to push it into testArray3 after adding 3 to each item in the array. Then when we see what’s in testArray3 we have now filled it with some elements.

Also worth noting, we had to make a new array as this doesn’t mutate the original array

.map()The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

In the above, we’re mapping through our array and returning each item in the array + 10, and then setting our testArray3 to those values. I didn’t take a picture of it, but I cleared out testArray3 to an empty array.

This will also return the same results because the inline ES6 arrow function has the implicit return. Keeps things a little tidier.

.filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It might be better to help think about this as being “filtered out” or removed. So if you want to filter out numbers that are divisible by 3, we can check each item in the array and see if it has a remainder of 0. If it does, filter it from the array, and let all the other items pass through.

.sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

A super important thing to note is when you call this method on an array without any parameters or a comparing function, the results might not be what you’d expect:

Naturally, if this were in the ascending order we were anticipating, 21 would come after 9 amongst many other problems here. So to fix this, we pass in some comparing parameters and how to compare them.

In the above, we’re using variables “a” and “b” as place holders for elements from the array and then comparing them. This works, but let’s just say it’s not as clear as it could be. How can we make this better? Let’s implement a simple ternary statement!

It will also work with strings, sorting in alphabetical order.

The example above is sorting by descending order since we changed the “a” and “b” comparison to “a” being greater than “b”.