My Top 5 JavaScript Array Methods

Helpful? Yes. Needed? Sometimes. Should you know them? Absolutely.

What are JavaScript methods?

JavaScript is one of the most flexible and widely used programming languages around, so it comes as no surprise that there are an array (haha) of methods which you can use on Strings, Arrays, and Objects!

JS methods are built-in and thus can be used on any array instance, as long as you’ve created them with some useful elements! The following syntax is how you call a method on an array:

someArray.nameOfMethod() // pseudocode

Most of the time, array methods have a callback function inside which are what makes them truly powerful, as we will see below.

Methods

This list is by no means definitive, and is simply my humble opinion based on my experience so far learning JS. These methods have helped make my life so much easier, and cut down on the amount of code I’ve written! (for loops I’m looking at you! 👀)

.includes()
.includes() is one of the more straightforward methods, but don’t let that fool you. It can come in really handy when you are doing some sort of check or comparison in your code. This method searches the array for a certain value, and then returns true or false. Return: Boolean

const numbers = [1, 2, 3];
const strings = ["hello", "world"];
numbers.includes(1) // returns true
numbers.includes(4) // returns false
numbers.includes(2, 1) // search for 2 from index 1. returns true
numbers.includes(1, 2) // search for 1 from index 2. returns false
strings.includes("hello") // returns true
strings.includes("javascript") // returns false

.forEach()
.forEach() makes life so much simpler by looping through an entire array and giving you access to each individual element. This is achieved through a callback function. However, and I discovered this the hard way, the .forEach() method returns undefined. This is important because assigning the output of the method and trying to do anything with it might result in tears. Note that .forEach() does not mutate the array it is called on, and is also not chainable. Return: undefined

const someArray = [1, 2, 3];
someArray.forEach(element => console.log(element + 5));
// output -> 6
// output -> 7
// output -> 8
someArray.forEach((element, idx) => console.log(element + 5, idx));
// output -> 6 0
// output -> 7 1
// output -> 8 2

.map()
This is one of my favourites and probably most used method. React amirite? Similarly to .forEach(), .map() loops through the entire array and gives you access to each element. The key difference is that .map() creates a new array with the results of some custom logic in a callback function. This is super useful because you can assign the output to a new variable and call other methods on it. This is also why map is chainable. Note that map does not mutate the array it is called on. Return: Array

const someArray = [3, 6, 9];
const newArray = someArray.map(element => element * 5);
console.log(newArray);
// output -> [15, 30, 45]
const anotherArray = newArray.map((element, idx) => {
  console.log(idx);
  return element + 1
}
// output -> 0
// output -> 1
// output -> 2
console.log(anotherArray)
// output -> [16, 31, 46]

.filter()
If you haven’t used .filter() before, try it immediately. It’s another super useful method that you eventually won’t be able to live without. Like .map(), it creates a new array with all the elements that have passed a condition provided through a callback function. Even a basic understanding (like I have) of this method can help you solve a lot of problems. Return: Array

const numbers = [20, 10, 30];
const words = ["hello", "world", "learn", "javascript"];
const filteredNum = numbers.filter(number => number >= 20);
console.log(filteredNum);
// output -> [20, 30]
const filteredWords = words.filter(word => word.length > 5);
console.log(filteredWords);
// output -> ["javascript"];

.reduce()
.reduce() is one of the array methods which is more difficult to understand, but once you know how it works it has some use cases where there really isn’t any other option. As the name of the method suggests, it reduces an array and returns a single value every single time, usually an integer or a JS object. This is achieved through a reducer function which is executed by the reduce() method. Return: object/integer

Some key terms are accumulator, currentValue, initialValue. The accumulator is the intermediate sum as the current array is being looped over. currentValue is the value of the element where the loop is temporarily at. initialValue is given to the method as a starting point for the accumulator. Let’s see it in action:

const numbersAgain = [1, 2, 3, 4, 5];
const initialValue = 0;
const reducer = (accumulator, currentValue) => {
    console.log("acc is " + accumulator + " current value is " +    currentValue);
    return accumulator + currentValue
}
const sum = numbersAgain.reduce(reducer, initialValue);
// output -> acc is 0 current value is 1
// output -> acc is 1 current value is 2
// output -> acc is 3 current value is 3
// output -> acc is 6 current value is 4
// output -> acc is 10 current value is 5
console.log(sum);
// output -> 15

Conclusion

As you can see, just 5 methods alone can help you to solve so many problems. There are a whole lot of other methods which I haven’t mentioned, but if you’re interested, head on over to MDN. You’ll find it is an indispensable resource for learning more about what the methods mentioned in this article are capable of, and seeing just how powerful in-built methods are.

Did you find this helpful? Leave a comment mentioning even just one small thing you learnt, or to let me know anything important that I may have missed out. Keep on learning!