The Ultimate Guide to JavaScript Array Methods

Arrays are one of the most fundamental data structures in JavaScript. They provide powerful built-in methods to manipulate, search, and iterate over data. In this guide, we’ll explore all the array methods available in JavaScript, categorized based on their functionality.

1. Mutator Methods (Modify the Original Array)

These methods directly alter the array.

push() - Add Elements to the End

let arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]

pop() - Remove the Last Element

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

shift() - Remove the First Element

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

unshift() - Add Elements to the Beginning

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

splice() - Add or Remove Elements at Any Position

let arr = [1, 2, 3, 4];
arr.splice(2, 1, 'new');
console.log(arr); // [1, 2, 'new', 4]

sort() - Sort the Array

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

reverse() - Reverse the Array

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

2. Accessor Methods (Do Not Modify the Original Array)

concat() - Merge Arrays

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

slice() - Extract a Portion of an Array

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

includes() - Check if Element Exists

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

indexOf() - Find Index of an Element

let arr = [10, 20, 30];
console.log(arr.indexOf(20)); // 1

join() - Convert Array to String

let arr = ['Hello', 'World'];
console.log(arr.join(' ')); // "Hello World"

3. Iteration Methods (Loop Over Elements)

forEach() - Execute a Function for Each Element

let arr = [1, 2, 3];
arr.forEach(num => console.log(num * 2));
// 2
// 4
// 6

map() - Transform Elements

let arr = [1, 2, 3];
let doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

filter() - Return Elements that Match a Condition

let arr = [10, 20, 30, 40];
let filtered = arr.filter(num => num > 20);
console.log(filtered); // [30, 40]

reduce() - Accumulate Values

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

find() - Find the First Matching Element

let arr = [10, 20, 30];
let found = arr.find(num => num > 15);
console.log(found); // 20

4. Utility Methods

isArray() - Check if a Value is an Array

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('Hello')); // false

from() - Create an Array from an Iterable

let str = 'Hello';
let arr = Array.from(str);
console.log(arr); // ['H', 'e', 'l', 'l', 'o']

of() - Create an Array from Arguments

let arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

Conclusion

JavaScript provides a rich set of array methods that help with adding, removing, searching, and transforming elements efficiently. Whether you’re mutating an array or creating a new one from transformations, understanding these methods will make you a more effective JavaScript developer!

Get Niraj Dasari’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Do you have a favorite array method? Let me know in the comments! 🚀