15 JS Array Methods

js-array-methods.md

JS Array Methods

Must-know JavaScript array methods

some() & every()

some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

It returns a Boolean value.

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

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

every()

The every() method tests whether all elements in the array pass the test implemented by the provided function.

It returns a Boolean value.

const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d") //false

const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a") // true

forEach(), map(), filter(), reduce(), and reduceRight()

forEach()

The forEach() method executes a provided function once for each array element.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name)) 
// john
// Ali
// Mass

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const myAwesomeArray = [5, 4, 3, 2, 1];
myAwesomeArray.map(x => x * x) // [25, 16, 9, 4, 1];

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass") 
// [{ id: 3, name: "Mass" }, { id: 4, name: "Mass" }];

reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array from left to right, resulting in a single output value.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value) // 120

reduceRight()

The reduceRight() method applies a function against an accumulator and each value of the array from right-to-left to reduce it to a single value.

const myAwesomeArray = [[0, 1], [2, 3], [4, 5]].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));
console.log(myAwesomeArray); // [4, 5, 2, 3, 0, 1]

find(), findIndex(), and includes()

find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing 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); //{id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7); // undefined

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
];

myAwesomeArray.findIndex(element => element.id === 3); // 2
myAwesomeArray.findIndex(element => element.id === 7); // -1

includes()

The includes() method determines whether an array includes a certain value among its entries.

It returns a Boolean value.

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

myAwesomeArray.includes(3); // true
myAwesomeArray.includes(8); // false

flat() & flatMap()

flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Defaults to 1.

let myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat(); // [1, 2, 3, 4, 5]

let myAwesomeArray = [1, 2, [3, 4, [5, 6]]];
myAwesomeArray.flat(2); // [1, 2, 3, 4, 5, 6]

let myAwesomeArray = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
myAwesomeArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.

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

myAwesomeArray.flatMap(arr => arr * 10); // [10, 20, 30, 40, 50]

sort(), concat(), fill(), and reverse()

sort()

The sort() method sorts the elements of an array in place and returns the sorted array.

The default sort order is ascending.

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

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

concat()

fill()

reverse()