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
initialvalueis 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 synchronouscallback, 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.