Javascript Array Methods

JavaScript offers a plethra of array methods at your disposal. We'll begin by exploring the most frequently used methods, particularly those I find most useful, before moving on to discuss the remainder. If you are wondering whiche one is my favorite, it's of course reduce. It's so powerful and can be used for so many things.

• map Array.prototype.map
• reduce Array.prototype.reduce

map

Loops through an array and returns a new array with the same length as the original array, but with transformed values. Commonly used to transform values in an array.

1const myArray = [1, 2, 3, 4, 5].map((value) => value * 2);
2// returns [2, 4, 6, 8, 10]

Note: Map is an immutable method, meaning it does not mutate the original array.

filter

Loops through an array and returns a new array with some values filtred out. Commonly used to only include certain entries in an array.

1const myArray = [1, 2, 3, 4, 5].filter((value) => value > 3);
2// returns [4, 5]

Note: Filter is an immutable method, meaning it does not mutate the original array.

reduce

Loops through an array and returns a single value of any type. Commonly used to combine all values in an array into a single value.

1const myArray = [1, 2, 3, 4, 5].reduce(
2  (accumulator, value) => accumulator + value,
3  0,
4);
5// returns 15

Note: Reduce is an immutable method, meaning it does not mutate the original array.

Other array methods

• forEach Array.prototype.forEach
• find Array.prototype.find
• findIndex Array.prototype.findIndex
• indexOf Array.prototype.indexOf
• includes Array.prototype.includes
• push Array.prototype.push
• splice Array.prototype.splice
• slice Array.prototype.slice
• concat Array.prototype.concat
• join Array.prototype.join
• sort Array.prototype.sort

forEach

The forEach method loops through an array and executes a callback function for each entry in the array. It is similar to the map method but does not return any value.

1const myArray = [1, 2, 3, 4, 5].forEach((value) => console.log(value));
2// logs 1, 2, 3, 4, 5

find

The find method loops through an array and returns the first value that matches the condition in the callback function. If no value matches the condition, undefined is returned.

1const myArray = [1, 2, 3, 4, 5].find((value) => value > 3);
2// returns 4

findIndex

The findIndex method loops through an array and returns the index of the first value that matches the condition in the callback function. If no value matches the condition, -1 is returned.

1const myArray = [1, 2, 3, 4, 5].findIndex((value) => value > 3);
2// returns 3
3
4const mySecondArray = [1, 2, 3, 4, 5].findIndex((value) => value > 5);
5// returns -1

indexOf

The indexOf method loops through an array and returns the index of the first value that matches the value passed in as an argument. If no value matches the value passed in as an argument, -1 is returned.

1const myArray = ["a", "b", "c", "d"].indexOf(3);
2// returns 2
3
4const mySecondArray = ["a", "b", "c", "d"].indexOf("e");
5// returns -1

includes

The includes method loops through an array and returns true if the value passed in as an argument is found in the array. If no value matches the value passed in as an argument, false is returned.

1const myArray = ["a", "b", "c", "d"].includes("c");
2// returns true
3
4const mySecondArray = ["a", "b", "c", "d"].includes("e");
5// returns false

push

The push method adds one or more values to the end of an array and returns the new length of the array.

1const myArray = ["a", "b", "c", "d"];
2myArray.push("e");
3// myArray is now ['a', 'b', 'c', 'd', 'e']

Note: Push is a mutable method, meaning it mutates the original array.