Top 10 JavaScript Array Methods You Should Know

Abdur Rahman
3 min readMay 7, 2021

--

In this post, I will share 10 JavaScript array methods you should know. If you know nothing about array, you can click here for array. Here are 10 javascript array methods you should at least know.

1. forEach()

This method can help you to loop over an array’s items.

const arr = [1, 2, 3, 4, 5, 6];  arr.forEach(item => {
console.log(item); // output: 1 2 3 4 5 6
});

2. includes()

This method checks if the array includes the item passed in the method.

const arr = [1, 2, 3, 4, 5, 6];

arr.includes(2); // output: true
arr.includes(7); // output: false

3. filter()

This method creates a new array with only elements passed condition inside the provided function.

const arr = [1, 2, 3, 4, 5, 6];  // item(s) greater than 3
const filtered = arr.filter(num => num > 3);
console.log(filtered); // output: [4, 5, 6]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]

4. map()

This method creates a new array by calling the provided function in every element.

const arr = [1, 2, 3, 4, 5, 6];  // add one to every element
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]

5. reduce()

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value — MDN

const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21

6. some()

This method checks if at least one of the array’s items passed the condition. If passed, it returns ‘true’ otherwise ‘false’.

const arr = [1, 2, 3, 4, 5, 6];  // at least one element is greater than 4?
const largeNum = arr.some(num => num > 4);
console.log(largeNum); // output: true
// at least one element is less than or equal to 0?
const smallNum = arr.some(num => num <= 0);
console.log(smallNum); // output: false

7. every()

This method checks if all array items passed the condition. If passed, it returns ‘true’ otherwise ‘false’.

const arr = [1, 2, 3, 4, 5, 6];  // all elements are greater than 4
const greaterFour = arr.every(num => num > 4);
console.log(greaterFour); // output: false
// all elements are less than 10
const lessTen = arr.every(num => num < 10);
console.log(lessTen); // output: true

8. sort()

This method is used to arrange/sort the array’s item in either ascending or descending order.

const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];
// sort in descending order
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]
// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

9. Array.from()

This change all thing that is array-like or iterable into true array especially when working with DOM, so that you can use other array methods like reduce, map, filter and so on.

const name = 'frugence';
const nameArray = Array.from(name);
console.log(name); // output: frugence
console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']

10. Array.of()

This creates an array from every argument passed into it.

const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

--

--

Abdur Rahman

I'm a student I always like to learn new things and have experience with new stuff. I'm trying to be more creative and will come back soon with something unique