Originally posted on my blog
In JavaScript, an array is a special variable that is used to store different elements. It has some built-in properties and methods we can use to add, remove, iterate, or manipulate data following our needs. And knowing JavaScript array methods can lift your skills as a developer.
In this post, we're going to see 15 array methods that can help you manipulate your data properly.
- 1. some()
- 2. reduce()
- 3. every()
- 4. map()
- 5. flat()
- 6. filter()
- 7. forEach()
- 8. findIndex()
- 9. find()
- 10. sort()
- 11. concat()
- 12. fill()
- 13. includes()
- 14. reverse()
- 15. flatMap()
Notice that mostly in this post, we'll simplify the function passed as parameter.
// Instead of using this way
myAwesomeArray.some(test => {
if (test === "d") {
return test
}
})
// We'll use the shorter one
myAwesomeArray.some(test => test === "d")
1. some()
This method tests the array with a function passed as a parameter. It will return true if at least one element matches the test and false for the opposite.
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
//-------> Output : true
2. reduce()
This method receives a function which has an accumulator and a value as an argument. It applies the function to the accumulator and each value in the array to return at the end just a single value.
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120
3. every()
This method tests the array with a function passed as a parameter. It will return true if each element of the array match the test and false for the opposite.
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d")
//-------> Output : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a")
//-------> Output : true
4. map()
This method receives a function as a parameter. And return a new array that contains an image of each element of the array. It will always return the same amount of items.
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
//-------> Output : 25
// 16
// 9
// 4
// 1
5. flat()
This method creates a new array that contains the elements holden on the sub-array and flat it into the new array. Notice that, this method will go only one level depth.
const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat()
//-------> Output : [1, 2, 3, 4, 5]
6. filter()
This method receives a function as a parameter. And return a new array that contains all the elements of the array for which the filtering function passed as argument returns true.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
{ id: 4, name: "Mass" },
]
myAwesomeArray.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
// 1:{id: 4, name: "Mass"}
7. forEach()
This method applies a function to each element of the array.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.forEach(element => console.log(element.name))
//-------> Output : john
// Ali
// Mass
8. findIndex()
This method receives a function as a parameter and will apply it to the array. It returns the index of an element found and which satisfies the test function passed as an argument or -1 if none satisfies it.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.findIndex(element => element.id === 3)
//-------> Output : 2
myAwesomeArray.findIndex(element => element.id === 7)
//-------> Output : -1
9. find()
This method receives a function as an argument and will apply it to the array. It returns the value of an element found in the array and which satisfies the test function. Otherwise, it returns undefined.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.find(element => element.id === 3)
//-------> Output : {id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7)
//-------> Output : undefined
10. sort()
This method receives a function as a parameter. It sorts the elements of an array and returns it.
const myAwesomeArray = [5, 4, 3, 2, 1]
// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//-------> Output : [1, 2, 3, 4, 5]
// Sort from largest to smallest
myAwesomeArray.sort((a, b) => b - a)
//-------> Output : [5, 4, 3, 2, 1]
11. concat()
This method will merge two or more arrays/values by concatenating it. It returns a new array with the elements.
const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
12. fill()
This method fills all the elements of a given array with the same value, from a start index (default 0) to an end index (default array.length).
const myAwesomeArray = [1, 2, 3, 4, 5]
// The first argument (0) is the value
// The second argument (1) is the starting index
// The third argument (3) is the ending index
myAwesomeArray.fill(0, 1, 3)
//-------> Output : [1, 0, 0, 4, 5]
13. includes()
This method will return true if the array contains a certain element, and false if not.
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
//-------> Output : true
myAwesomeArray.includes(8)
//-------> Output : false
14. reverse()
This method reverses an array. The first element becomes the last, and the last element will be the first.
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']
15. flatMap()
The method applies a function to each element of the array and then flatten the result into an array. It combines flat() and map() in one function.
const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]
// With .flat() and .map()
myAwesomeArray.flat().map(arr => arr * 10)
//-------> Output : [10, 20, 30, 40, 50]
Latest comments (71)
Why about "flat()" -> "Notice that, this method will go only one level depth."?
On MDN - "The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.".
Thanks a lot, this is one most important post for me, I don't shame it.
Awesome, namesake. I was discussing with a Senior today about HOF and I just see this.
However I'm confused, what's the difference between filter() and find()
I enjoyed every bit of this, simple clear examples. Now depends on how we implement them
Some note towards C# people who look at this and think it's the same as LINQ. It is not, as most of these methods create a new array as a result. Usually it doesn't matter as much, but consider what happens if the array is very large and you first map it to some complex and heavy calculation and only then you filter it. It may seem obvious, but only if you actually think about it, which to my shame I only did recently.
Also, shameless plus for my own library that uses ES6 iterators/generators to emulate LINQ in Javascript: siderite.dev/blog/linq-in-javascri... ;)
Thanks, your post is awesome.
Greatly appreciate your effort for creating this list. It allowed me to get a stronger grasp on the language.
I would like to mention that during my research of these methods you've brought to all of our attention, I found that the
flat()method takes an argument for the depth, so while you are correct thatmyArr.flat()will default to a depth of one, it's also possible to specify larger values, and even include an infinite option.For example (stolen directly from the MDN web docs):
Good article, thank you!
Thanks you too for reading it.
Hi Ibrahim, thanks for the article. One thing to note is that the implementation for sort is correct but the comments are wrong.
Thanks for reading it. Now it's correct
great! thank you.