Javascript Array Methods Part Three

Finally! The last part of the blogs on Javascript array methods. Similarly to our last blog we’re going to be using methods that do a little bit more intersting things than just popping and shifting. We’ll work with the exact same array as last time just to keep things familiar.

let exampleArray = [144, 26, 1001, 204, 18, 29, 13, 1]

But let’s not waste any time on preamble, you know how this goes, I’ll explain a method and then we’ll see an example. Lets jump right in!

forEach

First up is forEach, which is actually really simple. For each element in the array we will do something. In this case we will log each element to the console.

exampleArray.forEach (element => console.log(element))

So we give each element the variable name element then after the arrow function we use console.log to log to the console (duh) and pass in element as the argument. As forEach loops over each element it will then pass it in through console.log and in the end we should get each number of the array displayed to the console.

144
26
1001
204
18
29
13
1

Just like that!

Reduce

Reduce is pretty cool. Say you have an array that’s full of number, like ours, and you want to add them all up together (imagine each number is the price of a grocery item and you want the price of all the groceries together). Reduce can do that for you!

exampleArray.reduce((accumulator, value) => accumulator + value, 0)

What is happening up above? There’s quite a few arguments there. Well lets see what they’re doing.

First we have something called accumulator . Think of this as the running total. As the reduce runs and iterates through each value it adds it to the overall total. Which brings us to the next argument.

The value that you see is literally the current value that is about to be added to the total or the accumulator .

After the arrow => we actually do the adding up by saying accumulator + value then finally we set the initial value at 0, saying, “Start at this number.”

Now when this runs we will get a grand total of everything in our array. OBSERVE:

// 1436

All the numbers in our array add up to 1436. Cool!

Every

These next two methods are very similar to each other and you’ll see why. First is the Every method. Basically all it wants to do is look through the array and see if every element meets a condition or not.

If every element does meet the condition this method will return true. If even a single element does not meet the condition, we will get falsereturned. Lets see it in action.

exampleArray.every(element => element >= 1)
// true

So, in the above example after the arrow => we are creating a condition in which we’re checking to see if every element is greater than or equal to one. Since one is the lowest number in our array (and one is obviously equal to one) that means every element in our array meets this condition. So in the end we get a return value of true .

But what happens if a single element (or more) does not meet the condition:

exampleArray.every (element => element >= 2)
// false

We get false returned because the number 1 is not greater than or equal to 2 and therefore does not meet the condition. In fact it’s the only element that doesn’t meet the condition, but that doesn’t matter because all the elements need to meet it to return true .

Some

As I said before, Every and Some are a kind of pair. They both do the same thing, really. There’s a condition and meeting that condition returns a true value and a false value if the condition is not met. But whereas with Every needing every element meet the condition, Some only needs one element to meet the condition in order to return true .

Lets check it out with the last example we saw, but using Some.

exampleArray.some (element => element >= 2)
//true

Before, when using Every we got false returned, because 1 did not meet the condition of being greater than or equal to 2 . Well with the Some method, that’s alright, because the other elements in the array are greater than 2 and because of that we get true returned.

In fact, the only way to get false with some is if every single element in the array does not meet the condition. Let’s see that:

exampleArray.some (element => element > 3000)
// false

Not a single element in the array is greater than 3000 . So in that case we get a false return value.

Reverse

This method is exceptionally simple so I’ll keep it short and sweet, no need to fight to find extra words like I’m doing a High School assignment. Reverse reverses the order of your array. First becomes last, last becomes first sorta thing. Check it:

exampleArray.reverse()
// [1, 13, 29, 18, 204, 1001, 26, 144]

Neat! What was once [144], 26, 1001, 204, 18, 29, 13, 1 became [1, 13, 29, 18, 204, 1001, 26, 144] . Reversed!

Sort

Sort is used to, well, sort elements in the array. I think it might be fun for our final method to bring back our old array from Part One. This array here where the elements are actually strings instead of numbers:

let exampleArray2 = ["X-Ray", "Foxtrot", "Bravo", "Whiskey", "Sierra", "Tango", "Alfa", "November"]

But, wait a second! This isn’t our old array! Our old array was in alphabetical order, this one is all over the place. Well, let’s just sort this out:

exampleArray.sort()
// ["Alfa", "Bravo", "Foxtrot", "November", "Sierra", "Tango", "Whiskey", "X-Ray"]

Whew! There we go. Sort rearranged our strings alphabetically for us (this can also work to sort numbers in an array either ascending or descending, but its a little extra work). Thank you, Sort!

And that’s it for our series on Javascript array methods! I hope its been insightful and you’ve learned something, but it was a lot of fun making it. Hopefully you’ll check out some of my other blogs in the future (or past)!