15 JavaScript methods to work with arrays you need to know in 2020

Here is a translation of an article published on the site dev.to. Author: Ibrahima ndaw.
Original published in copyright blog post.

An array in JavaScript is a special data structure that is used to store various elements. Using the built-in properties and methods in it, you can add, delete, iterate or process data in accordance with your needs. Knowing how to work with arrays in JavaScript will take your professional development skills to the next level.

In this article, we will cover 15 methods that will help you work more efficiently with arrays in JavaScript.

Please note that basically we will simplify the function that is passed as a 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 checks if any element of the array satisfies the condition specified in the passed function. He will return the value trueif at least one element matches the function being checked, and the value false – if not.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

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

2. reduce ()

This method takes a function that takes an accumulator and a value as an argument. It applies the function to the accumulator and each value of the array, so that only one value is returned.

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

myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Output = 120

3. every ()

This method checks if all elements of the array satisfy the condition specified in the function being passed. He will return the value trueif each element matches the function being checked, and the value false – if not.

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 takes a function as a parameter and creates a new array with the result of calling the specified function for each element of the array. It will always return the same number of items.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> Output : 25
//                  16
//                  9
//                  4
//                  1

5.flat ()

This method takes an array of arrays as an argument and smoothes the nested arrays into a top-level array. Please note that this method only works for one level.

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

myAwesomeArray.flat()
//-------> Output : [1, 2, 3, 4, 5]

6. filter ()

This method takes a function as a parameter and returns a new array containing all the elements of the array for which the filter function was passed as an argument, and returns it with a value 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 takes a function as a parameter and then applies it to the array. It returns the index of the found element if the element satisfies the condition of the checking function passed as an argument. If not satisfied, returns –1.

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 takes a function as an argument and then applies it to the array. It returns the value of the element found in the array if the element satisfies the condition of the checking function. Otherwise, it returns with a value 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 takes a function as a parameter. It sorts the elements of the array and returns them.

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 combines two or more arrays / values ​​and returns a new array.

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 elements of the array with the same value, from the starting index (default 0) to the ending 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 returns a value trueif the array contains a specific element, and the value 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 the order of the elements in the array. The first element becomes the last, and the last becomes the first.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//-------> Output : ['a', 'b', 'c', 'd', 'e']

15. flatMap ()

This method applies a function to each element of the array, and then smooths the result into a new array. It combines the method flat() and method 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]

Similar Posts

Leave a Reply