10 must-know JavaScript array methods

In Javascript, arrays are list-like objects and they are special variable that is used to store different elements. It contains some built-in properties and methods. Using built-in properties and methods we can manipulate the data inside an array. For example, we can add, remove, slice, iterate data following our needs.

In this post, we are going to discuss some important JavaScript array methods that can help you to enrich your knowledge.

1. reduce()

This method receives a function that 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 foo= [1, 2, 3, 4, 5]

foo.reduce((total, value) => total + value)
// 1 + 2 + 3 + 4 + 5
// Output = 15

2. 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 foo = [5, 4, 3, 2, 1]
foo.map(x => x + x)
// Output: 10, 8, 6, 4, 2

3. 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 foo= [
  { id: 1, name: "Shah" },
  { id: 2, name: "Newaz" },
  { id: 3, name: "Tameem" },
  { id: 4, name: "Tameem" },
]

foo.filter(element => element.name === "Tameem")
// Output : 0:{id: 3, name: "Tameem"},
//          1:{id: 4, name: "Tameem"}

4. forEach()

This method applies a function to each element of the array.

const foo= [
  { id: 1, name: "Gazi" },
  { id: 2, name: "Shahnewaz" },
  { id: 3, name: "Tameem" },
]

foo.forEach(element => console.log(element.name))
//Output : Gazi
//         Shahnewaz
//         Tameem

5. sort()

This method receives a function as a parameter. It sorts the elements of an array and returns them.

const foo= [5, 4, 3, 2, 1]

// Sort from smallest to largest
foo.sort((a, b) => a - b)
// Output : [1, 2, 3, 4, 5]

// Sort from largest to smallest
foo.sort((a, b) => b - a)
// Output : [5, 4, 3, 2, 1]

6. concat()

This method will merge two or more arrays/values by concatenating it. It returns a new array with the elements.

const foo= [1, 2, 3, 4, 5]
const bar= [10, 20, 30, 40, 50]
foo.concat(bar)
// Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

7. includes()

This method will return true if the array contains a certain element, and false if not.

const foo= [1, 2, 3, 4, 5]

foo.includes(3)
// Output : true

foo.includes(8)
// Output : false

8. 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 foo = ["a", "b", "c", "d", "e"]

foo.some(test => test === "d")
// Output : true

9. 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 foo = ["a", "b", "c", "d", "e"]

foo.every(test => test === "d")
// Output : false

const bar= ["a", "a", "a", "a", "a"]

bar.every(test => test === "a")
// Output : true

10. 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 foo = [[1, 2], [3, 4], 5]
foo.flat()
// Output : [1, 2, 3, 4, 5]