5 Must-Know JavaScript Array Methods

JavaScript Array methods are a must know for every JS developer out there. They will make your life easier, make you a faster developer and save you from writing unnecessary bloat code.

These are my favorite ones

1. map()

The map() method creates a new array based on callback function provided. callback function receives 3 arguments currentValue, index, array.

let newArray = arr.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
}[, thisArg]);

Keep in mind that map() will always create new array, so if you just need to loop over something you can use forEach()

let numbers = [10,20,30,40,50];
let double = numbers.map(number => number * 2);

console.log(double)
//output
[20,40,60,80,100]

2. filter()

Very similar to map() , this method creates a new array with all elements that pass filter condition provided by the callback function

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
  // return element for newArray, if true
}[, thisArg]);

So lets do some filtering

let words = ['car', 'cat', 'mouse', 'keyboard', 'blog', 'authentication', 'hashnode']
let longWords = words.filter(word => word.length > 5)

console.log(longWords)
//output
['keyboard', 'authentication', 'hashnode']

3. reduce()

reduce() is quite a powerful method that can be "molded" to do various tasks, here we will do really simple example, sum of all numbers in array. reduce() executes a callback function once for every value present in the array. It takes four arguments: accumulator, currentValue, currentIndex, array

On first iteration accumulator and currentValue can be one of two things:

• initialValue (if provided)
• first value of the array if initialvalue is not provided.

arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])

If all goes well we should get single value that is result from the reduction

let numbers = [10,20,30,40,50];
let reduced = numbers.reduce(accumulator, currentValue) => accumulator + currentValue)

console.log(reduced)
//output
150

//with initial value
let reducedAgain = numbers.reduce(accumulator, currentValue) => accumulator + currentValue, 100)

console.log(reducedAgain )
//output
250

4. forEach()

The forEach() method executes a provided function once for each array element One of the simplest ways to loop over arrays Keep note, when using forEach(),

• you can't stop or break forEach() loop, only way to interrupt it is by throwing an exception
• forEach() will always expect synchronous callback, meaning it won't wait for promises to resolve, remember this it could save you from a headache down the road.

arr.forEach(callback(currentValue[, index[, array]]) {
  // execute something
}[, thisArg]);

Simple loop that logs items to console

let numbers = [10,20,30,40,50];
numbers.forEach(number => console.log(number))

//output
10
20
30
40
50

5. includes()

The includes() method determines whether an array includes a certain value, it will return true or false, method is case-sensitive so keep that in mind

arr.includes(valueToFind[, fromIndex])

Let's see if our array includes specific string

let words = ['car', 'cat', 'mouse', 'keyboard', 'blog', 'authentication', 'hashnode']

console.log(words.includes('mouse'))
//output 
true

console.log(words.includes('hashNode')
//output
false
//remember it's case-sensitive

Would love to know which ones you use the most, drop a comment say hi.