Must-Know JavaScript Array Methods

Arrays are a very powerful data structure in JavaScript. There are many methods used to modify arrays. Array methods are actions we can apply to an array. Array methods make it easy to manage access and organize data in a convenient way.

some() method

The some() method tests whether at least one element in the array passes the test provided by the callback function. It returns a boolean value.

The some() method executes each element once for each element present in the array:

• If it returns an array element where the function returns a true value, the method returns true and does not check the remaining values.

• Otherwise, it returns false.

Example

let ages = [2, 3, 18, 24];
const checkAdult = ages.some(age => age >= 18);
console.log(checkAdult);        // true

every() method

The every() method checks whether all elements pass the test provided by the callback function. The only difference between every() and some() is that some() checks for at least one element while every() checks for all elements. It also returns a boolean value.

every () method executes the function once for each element present in the array.

• If it finds an array element where the function returns a false value, every() returns false and does not check the remaining elements.

• If no false occurs, every() returns true.

Example

let ages = [32, 33, 16, 40];
const checkAdult = ages.every(age => age >= 18);
console.log(checkAdult);       // false

map() method

The map() method creates an array by calling a specific function on each element present in the parent array. The map() method iterates over an array and calls the function on every element of the array. Remember, the map() method will create an array when iterating over elements. If it's a simple iteration, use forEach() or for-of instead.

Example

let numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(value => value * 2);
console.log(doubled);

output is:

[2, 4, 6, 8, 10]

reduce() method

The reduce() method reduces the array to a single value and executes a provided function for each value of the array (from left to right). The return value of the function is stored in an accumulator. The reduce() method takes a callback function with at least two arguments: an accumulator and the current element.

Example

let numbers = [1, 2, 3, 4, 5, 6];
const sum = numbers.reduce((acc, n) => acc + n);
console.log(sum);
// 21

forEach() method

The forEach() method calls the provided function once for each element of the array. The callback function does not expect a return value and the method itself also returns undefined. The provided function may perform any kind of operation on the elements of a given array.

Example

let numbers = [2, 3, 4, 5];
const square = numbers.forEach(n => console.log(n*n));

// 4, 9, 16, 25

filter() method

The filter() method creates an array filled with all the elements that pass a test provided by the callback function. If no elements pass the test, it returns an empty array.

Example

let numbers = [1, 2, 3, 4, 5, 6];
const odd = numbers.filter(n => n % 2 !== 0);
console.log(odd);

// 1, 3, 5

find() method

The find() method returns the value of the first element of the array that passes the test implemented by the callback function. If it finds an array element where the function returns a true value, find() returns the value of that array element and does not check the remaining values. Otherwise, it returns undefined.

Example

let numbers = [2, 5, 8, 1, 4];
const isGreaterThanFive = numbers.find(n => n > 5);

console.log(isGreaterThanFive);
// 8

findIndex() method

The findIndex() method is similar to the find() method, however, it returns an index instead of an element. The method will stop at the first element that passes the test provided by the function. Otherwise, -1 is returned indicating that no element passed the test.

Example

let numbers = [2, 5, 8, 1, 4];
const indexOfFive = numbers.findIndex(n => n === 5);

console.log(indexOfFive);
// 1

fill() method

The fill() fills or replaces specified elements in an array with a given static value. You can specify the position of where to start and end the filling. If not specified, all elements will be filled in. This method overwrites the original array.

Example

let numbers = [1, 2, 3, 4];
const populateWithFour = numbers.fill(4);

console.log(populateWithFour);
// [4, 4, 4, 4]

includes() method

The includes() method determines whether an array contains a specified element. This method returns true if the array contains the element, and false if not. The includes() method is case sensitive.

Example

let numbers = [1, 2, 3, 4, 5];
const hasTheNumberTwo = numbers.includes(2);

console.log(hasTheNumberTwo);
// true

concat() method

The concat() method is used to merge two or more arrays. This method does not change the original array but returns a new array containing the values of the original array.

Example

let num1 = [11, 12, 13];
let num2 = [14, 15, 16];
let num3 = [17, 18, 19];
const result = num1.concat(num2, num3);

console.log(result);
[11, 12, 13, 14, 15, 16, 17, 18, 19]

flat() method

This method creates a new array with all sub-array elements concatenated into it. You can specify a depth. The default is 1.

Example

let numbers = [[1, 2], [[3], [4]], [5, 6]];
const flattened = numbers.flat(2);

console.log(flattened);
// [1, 2, 3, 4, 5, 6]

flatMap() method

The flatMap() method applies a callback to each element of the array and then flatten the result into an array. It combines flat() and map() in one function The method will first of all map every element with the help of the mapping function, then flattens the input array element into a new array.

Example

let numbers = [[1], [2], [3], [4], [5]];
const flattenedDoubles = numbers.flatMap(n => n *2);

console.log(flattenedDoubles);
// [2, 4, 6, 8, 10]

sort() method

The sort() method sorts the items of an array. Elements can be sorted either alphabetically or numerically and either in ascending or descending order. This method works very well for strings but for numbers, it sorts them as strings which can produce incorrect results, and therefore a compare function is used to fix this issue.

Example

let numbers = [88, 50, 25, 10];
numbers.sort((a, b) => a - b);

console.log(numbers);
// [10, 25, 50, 88]

reverse() method

The reverse() method reverses the order of the elements in an array. This method will change the original array. The function will transpose the elements of the array, the first element will become the last, and vice versa.

Example

let numbers = [1, 2, 3, 4, 5];
const reversed = numbers.reverse();

console.log(reversed);
// [5, 4, 3, 2, 1]

Conclusion

The above are some of the array methods that can be used to manipulate arrays.

Until next time, thanks for reading!!