36 Important JavaScript Array Methods With Examples

Hey! Coders. In this post, we are going to see 5+ Array Methods With Examples That You Should Know In JavaScript. Arrays are most often used while creating projects with Js, they are most useful when we have to handle the collection of data.

These array methods are useful to start development with react, making CURD API & designing algorithms in JavaScript. Understanding Array methods can help you to write better & efficient programs.

Also Read: 24 JavaScript Object Methods That You Should Know

This tutorial focuses on vital array methods like Map, Filter, Reduce, Sort, etc. We will walk through each concept with examples and try to understand how to use them effectively.

36 Array Methods That You Should Know In JavaScript

Use Case	Method Names
Creating Array :	Array()
	Array.of()
	Array.from()
Add Or Remove Elements Of Array :	Push()
	pop()
	shift()
	unshift()
	concat()
	splice()
Accessing the Elements Of The Array:	at()
Searching & Filtering Array Methods:	IndexOf()
	lastIndexOf()
	includes()
	find()
	findIndex()
	filter()
Iterating:	forEach()
	map()
	reduce()
	reduceRight()
Sorting & Reording JavaScript Array Methods:	sort()
	reverse()
	copyWithin()
	fill()
Other Javascript Array Methods Methods :	slice()
	join()
	toString()
	toLocaleString()
	isArray()
Operations On Subarrays :	flat()
	flatMap()
Advanced Javascript Array Methods For Manipulations :	every()
	some()
	keys()
	values () & entries()

Also Read: How To Make CRUD APIs With MongoDB In Express

Array Methods For Creating & Initializing Arrays

• Array(): This method helps us to create a new array. An example of this method is shown in the following code box. In the below code, we have created an array with 10 empty slots.

let arr = new Array(10);

• Array.of(): This method helps us to create a new array with a number of arguments. An example of this method is shown as follows & the output of this code is [1,2,3]

let arr = Array.of(1,2,3,4); 

• Array.from: This method helps to create a new array from an array-like or iterable object. We can use this method when we have selected all elements with ‘document.getElementsByClassName(“”)” and create an array of selected elements. Another example of this method is shown in the following code:

let arr = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

Methods To Add Or Remove Elements

• Push(): These methods help us to add one or more elements to the end of the present array & return the newly formed array. An example of this method is as follows:

let arr = [1, 2];
arr.push(3); // [1, 2, 3]

• Pop(): Helps to remove the last element of the array and returns the new array with removed elements. The example of this code is as follows:

let arr = [1, 2, 3];
arr.pop(); // [1, 2]

• unshift(): This helps us to add one or more elements to the starting of the array & returns the new array. The example of this code is as follows:

let arr = [2, 3];
arr.unshift(1); // [1, 2, 3]

• shift(): This method helps to remove the first element from the array & returns the new array:

let arr = [1, 2, 3];
arr.shift(); // [2, 3]

• splice(): This method helps us to add, remove, or replace elements in an array. The example of this code is as follows:

let arr = [1, 2, 3];
arr.splice(1, 1, 'a'); // [1, 'a', 3]

In the above code, we have started from index 1 as the first parameter of splice wants where to start. Now Splice wants how many elements to remove from the start point & third parameter adds an element to that array from the start index.

• Concat(): This method helps use to merge two or more arrays into a new array. The example of this code is as follows:

let arr1 = [1,2];
let arr2 = [3,4];
let newarr = arr1.concat(arr2);
//[1,2,3,4]

Methods To Accessing The Elements Of Array

• at(): This method helps to return the element at the specified Index as shown in the following code:

let arr = [1,2,3]
arr.at(1)
//2

Methods For Searching & Filtering Of Array

• indexOf() : These methods help us to get the index number of the element within the array. For example:

let arr = [1, 2, 3];
arr.indexOf(2); // 1

• lastIndexOf() : This array method help us to find the last index at which the given element is found within the array:

let arr = [1, 2, 2, 3];
arr.lastIndexOf(2); // 2

• Includes() : This array method help us to check whether the provided element as argument is present in the array or not. Here is the example of includes() method:

let arr = [1, 2, 3];
arr.includes(2); // true

• find() : The find() method of the array accepts one callback function to find the element within the array as mentioned in the callback function and returns the first element that satisties the provided condition as shown in following code:

let arr = [1, 2, 3];
arr.find(el => el > 1); // 2

• findIndex() : This is similar to the find() method but help us to find the index of the first element that satisfy the condition provided with the help of callback functions:

let arr = [1, 2, 3];
arr.findIndex(el => el > 1); // 1

• filter(): The filter() method of the javascript array helps us to filter the elements within the array according to the condition mentioned in the callback function:

let arr = [1, 2, 3, 4];
arr.filter(el => el > 2); // [3, 4]

Methods To Iterate Through An Array:

• forEach() : For each Loop helps us to access each element of the array one by one as shown in the following code:

let arr = [1, 2, 3];
arr.forEach(el => console.log(el)); // Logs 1, 2, 3

• map(): The map creates a new array with the new elements of calling a provided function on every element. The example of the map() function is shown in the following code:

let arr = [1, 2, 3];
let newArr = arr.map(el => el * 2); // [2, 4, 6]

• Reduce() :

let arr = [1, 2, 3];
let sum = arr.reduce((acc, el) => acc + el, 0); // 6

• reduceRight():

let arr = [1, 2, 3];
let sum = arr.reduceRight((acc, el) => acc + el, 0); // 6

Methods For Sorting & Reordering An Array:

• sort() : The sort() methods help us to sort the elements by ascending order. We can use sort() methods as shown in the following code:

let arr = [3, 1, 2];
arr.sort(); // [1, 2, 3]

• reverse(): The reverse method helps us to reverse the elements of the array. We can use the reverse() method as shown in the following code:

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

• copyWithin(): The copy within method helps us to copy the elements within the array with precision. In the below code, the copy within the function accepts three parameters. The first parameter, ‘0’ helps use to define the index where the copied sequence will start.
• The second parameter, ‘2’ helps us define the beginning of the sequence to copy. And third parameter is ‘4’ helps us to define the end of the sequence to copy.

let arr = [1, 2, 3, 4, 5, 6];
arr.copyWithin(0, 2, 4); // [3, 4, 3, 4, 5, 6]

• fill() : The fill() methods fill the all array with the given argument. We can use fill() method as shown in the following code:

let arr = [1, 2, 3];
arr.fill(0); // [0, 0, 0]

Other Useful Methods Of An Array:

• slice(): Returns the shallow copy of a portion of an array as shown in the following code:

let arr = [1, 2, 3];
let newArr = arr.slice(1); // [2, 3]

• join(): The join method joins all elements in the array into a string with the value provided in the parameter as shown in the following code:

let arr = ['a', 'b', 'c'];
arr.join('-'); // 'a-b-c'

• toString(): Returns a string representing the array & its elements. In simple words converts the array into a string as shown in the following code:

let arr = [1, 2, 3];
arr.toString(); // '1,2,3'

• toLocaleString: Converts the array into a localized string & represents the array and its elements as shown in the following code:

let arr = [1, 'test', new Date()];
arr.toLocaleString(); // '1,test,6/14/2024'

• isArray(): Checks, if the value passed as a parameter, is an array or not & returns true or false as shown in the following code:

Array.isArray([1, 2, 3]); // true

Array Methods That Help To Working With Subarrays:

• flat(): The flat() method in JavaScript helps us to flatten an array of arrays into a single array as shown in the following code:

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

• flatMap(): This method maps each element using a map function and then flattens the result into a new array as shown in the following code:

let arr = [1, 2, 3];
arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

Advanced Array Methods For Array Manipulations:

• every(): The every method tests whether all elements pass the condition provided in the callback function as shown in the following code:

let arr = [1, 2, 3];
arr.every(el => el > 0); // true

• some(): This method checks whether at least one element in the array passes the condition provided in the callback function & returns the true or false value as shown in the following code:

let arr = [1, 2, 3];
arr.some(el => el > 2); // true

• keys(): The keys() method returns a new array that contains the keys for each Element as shown in the following code:

let arr = [1, 2, 3];
for (let key of arr.keys()) {
  console.log(key); // Logs 0, 1, 2
}

• values(): The values function in Javascript returns a new array that contains the values of each index. The example of values is shown in the following code:

let arr = [1, 2, 3];
for (let value of arr.values()) {
  console.log(value); // Logs 1, 2, 3
}

• entries(): The entries method is used when we want a new array that contains both the key & values of each element in the array. The example of the entries() method is shown in the following code:

let arr = [1, 2, 3];
for (let entry of arr.entries()) {
  console.log(entry); // Logs [0, 1], [1, 2], [2, 3]
}

Conclusion On 36 JavaScript Array Methods That You Should Know

I Hope That You Liked these important methods of JavaScript Array Functions. All the above methods can be combined with each other to create complex manipulations and transformations on the arrays. This combination can help to write better algorithms making absolutely powerful & versatile for handling data in our code.

About Author