30 important JavaScript array methods in 2024

In programming language Array is one of the most important topic. Array in JavaScript is an ordered list of values. Each value is called an element specified by an index, start from 0 index in increasing order 0, 1, 2, ….

An array can hold values of different types. For example, you can have an array that stores the number and string, and boolean values. Second, the length of an array is dynamically sized and auto-growing. We can access each value in the array individually, and do super useful and efficient things with the list of benefits, like looping and doing the same for each value.

As a developer you must know all important javascript methods, so that you can use the exact method according to the code requirement.

You can run these method on chrome console or any javascript runner of your choice. Lets read each java script array method one by one and code example for daily use in your coding life. 25 must-know JavaScript array methods in 2021 with Example. source: https://developer.mozilla.org/

some()
reduce()
every()
map()
flat()
filter()
forEach()
findIndex()
lastIndexOf()
indexOf()
find()
sort()
concat()
fill()
includes()
reverse()
flatMap()
shift()
Unshift()
join()
slice()
splice()
toString()
pop()
push()

some()

Array.prototype.some() method test if at least one element in the array passed the criteria. If atleast one element pass the criteria, it return true, else return false. Web development company noida

const arr = [10, 22, 35, 42, 56];

// checks whether an element is even
const even = (elem) => elem % 7 === 0;

console.log(arr.some(even));
// expected output: true

reduce()

Array.prototype.reduce() receives a function which 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 arr = [10, 20, 30, 40];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 10 + 20 + 30 + 40
console.log(arr.reduce(reducer));
// expected output: 100

every()

Array.prototype.every() function tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. Either true or false

const ageBelow32 = (currentValue) => currentValue < 32;

const ages = [10, 30, 31, 12, 13, 24];

console.log(ages.every(ageBelow32));
// expected output: true

map()

Array.prototype.map() creates a new array that is populated with results of functions on each element. It always create same number of element.

const arr = [9, 14, 9, 6];
const arr2 = arr.map(x => x * 2);

console.log(arr2);
// output: Array [18, 28, 18, 12]

flat()

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

const arr = [1, 2, [3, 4, 5]];
const flat = arr.flat();

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

filter()

Array.prototype.filter() method recieves the function and filter the element as per the criteria. It skipped the element and create a new array having other elements.

const arr = ['java', 'react', 'angular', 'mysql', 'mongo', 'c'];

const result = arr.filter(language => language.length > 5);

console.log(result);
// output: Array ["angular"]

forEach()

Array.prototype.forEach() the user uses the function on every element of the array.

const arr = [{ id: 1, name: "seo" }, { id: 2, name: "java" }, { id: 3, name: "angular" }];

arr.forEach(language => console.log(language.name));


//Expected Output : seo, java, angular

findIndex()

Array.prototype.findIndex() basically returns index of first found element in the provided array, that pass the provided testing function. Otherwise, it returns -1, means that no element found in the array.

const arr = [{ id: 1, name: "seo" }, { id: 2, name: "java" }, { id: 3, name: "angular" }];

arr.findIndex(language => language.id===2);


//Expected Output : 1

Array.prototype.lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.

lastIndexOf()

const arr = ['java', 'angular', 'react', 'java'];

console.log(arr.lastIndexOf('java'));
// expected output: 3

console.log(arr.lastIndexOf('angular'));
// expected output: 1

indexOf()

Array.prototype.indexOf() finds an element in the array and returns its position. It scan from the beginning and from the first position.

const arr = ['java', 'react', 'angular', 'mysql', 'mongo', 'c'];

console.log(arr.indexOf('react'));
// expected output: 1

// start from index 2
console.log(arr.indexOf('c', 2));
// expected output: 3

console.log(arr.indexOf('python'));
// expected output: -1

find()

Array.prototype.find() It find and return the single element object. If no element found it return the undefined.

const arr = [{ id: 1, name: "seo" }, { id: 2, name: "java" }, { id: 3, name: "angular" }];

console.log(arr.find(language => language.name==="java"))
// expected output:  { id: 2, name: "java" }

console.log(arr.find(language => language.name==="python"))
// expected output:  undefined

sort()

Array.prototype.sort() method used to sort elements in array. Default soring order is ascending. Actually element is first converted in the string then compared.

const arr = ['java', 'react', 'angular', 'mysql', 'mongo', 'c'];
arr.sort();
console.log(arr);
// expected output:  ["angular", "c", "java", "mongo", "mysql", "react"]

const arr1 = [10, 12, 4, 21, 678];
arr1.sort();
console.log(arr1);
// expected output:  [10, 12, 21, 4, 678]

concat()

Array.prototype.concat() return new array by merging two or more array.

const arr1 = ['java', 'react', 'angular'];
const arr2 = ['mysql', 'mongo', 'c'];
const arr3 = arr1.concat(arr2);

console.log(arr3);
// expected output : ["java", "react", "angular", "mysql", "mongo", "c"]

fill()

Array.prototype.fill() The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

const arr1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(arr1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(arr1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(arr1.fill(6));
// expected output: [6, 6, 6, 6]

includes()

Array.prototype.includes() method check whether an array includes a value or not, return true or false.

const arr1 = ['java', 'react', 'angular'];

console.log(arr1.includes("java"));
// expected output: true

console.log(arr1.includes('python'));
// expected output: false

reverse()

Array.prototype.reverse() method reverse an array. In this last element becomes the first and the first element become the last element.

const arr1 = ['java', 'react', 'angular', 'mysql', 'mongo', 'c'];

const reversedArr = arr1.reverse();

console.log('reversedArr:', reversedArr);

// expected output: ["c", "mongo", "mysql", "angular", "react", "java"]

flatMap()

The method applies a function to each element of the array and then flatten the result into an array. It combines flat() and map() in one function.

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

arr1.flatMap(arr => arr * 10)
// Expected Output : [10, 20, 30, 40, 50]

// With .flat() and .map()
arr1.flat().map(arr => arr * 10)
// Expected Output : [10, 20, 30, 40, 50]

shift()

Array.prototype.shift() removes the first element from an array and returns that removed element. This method changes the length of the array.

const arr1 = [1, 2, 3];

const firstElement = arr1.shift();
console.log(arr1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

Unshift()

Array.prototype.unshift() adds one or more elements to the beginning of an array and returns the new length of the array.

const arr1 = [1, 2, 3];
console.log(arr1.unshift(4, 5));
// expected output: 5

console.log(arr1);
// expected output: Array [4, 5, 1, 2, 3]

join()

Array.prototype.join() creates and returns a new string by concatenating all of the elements in an array.

const arr1 = ['java', 'react', 'sql'];

console.log(arr1.join());
// expected output: "java,react,sql"

console.log(arr1.join(''));
// expected output: "javareactsql"

console.log(arr1.join('-'));
// expected output: "java-react-sql"

slice()

Array.prototype.slice() Select part of an array and return its content. it does not select end.

const arr1 = ['java', 'react', 'sql', 'mongo','c'];

console.log(arr1.slice(2));
// expected output: Array ["sql", "mongo","c"]

console.log(arr1.slice(2, 4));
// expected output: Array ["sql", "mongo"]

console.log(arr1.slice(1, 5));
// expected output: Array ['react', 'sql', 'mongo','c']

splice()

Array.prototype.splice() changes the contents of an array by removing or replacing existing elements and/or adding new elements.

const arr1 = ["java", "react", "sql", "mongo", "c", "go"]
arr1.splice(1, 0, 'python');

// inserts at index 1
console.log(arr1);
// expected output:  ["java", "python", "react", "sql", "mongo", "c", "go"]

arr1.splice(4, 1, 'Python');
// replaces 1 element at index 4
console.log(arr1);
// expected output:  ["java", "react", "sql", "mongo", "Python", "go"]

toString()

Array.prototype.toString() convert array to string representation.

const arr1 = ['java', 'react', 'sql', 'mongo','c'];

console.log(arr1.toString());
// expected output: java,react,sql,mongo,c

pop()

Array.prototype.pop() used to delete the last element and return the deleted element.

const arr1 = ['java', 'react', 'sql', 'mongo','c'];
console.log(arr1.pop());

//expected output :   c

push()

Array.prototype.pop() used to insert the new element in last.

const arr1 = ['java', 'react', 'sql', 'mongo','c'];

arr1.push("go");
console.log(arr1);

//expected output : ["java", "react", "sql", "mongo", "c", "go"]

Thanks for reading the article 25 must-know JavaScript array methods

Please suggest or comment any suggession related to the any new method so that we can improve and update the post.

FAQ

Q1. What are the top 10 JavaScript array methods?

Ans: Top 10 javascripts method are : slice() method, splice() method, filter() method, reduce() Method, find() method, some() method, every() method.

Q2. How many array methods are there in JavaScript?

Ans: Check above questions and answers.

Q3. Which array method is faster in JavaScript?

Ans: The performance of array methods in JavaScript can depend on various factors, including the specific use case, the size of the array, and the complexity of the operations being performed. forEach, filter, map