JavaScript Array Methods
Push, Pop, Map, Filter, Reduce & More

JavaScript Array Methods

Arrays in JavaScript aren't just collections of elements — they're dynamic tools that come with powerful built-in methods. These methods can transform, search, add, remove, and iterate over data efficiently. In this guide, we'll walk through both the basics and advanced JavaScript array methods, using plenty of real-world examples to solidify your understanding.

1. push() – Add Elements at the End

The push() method adds one or more elements to the end of an array and returns the new length.

let fruits = ["apple", "banana"];
let newLength = fruits.push("orange");
console.log(fruits);
console.log(newLength);

["apple", "banana", "orange"]
3

2. pop() – Remove the Last Element

Use pop() when you want to remove the last item from an array. It returns the removed element.

let items = ["pen", "pencil", "eraser"];
let removed = items.pop();
console.log(items);
console.log(removed);

["pen", "pencil"]
"eraser"

3. unshift() – Add Elements at the Beginning

This method prepends items to the start of the array.

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

[1, 2, 3]

4. shift() – Remove First Element

Just like pop() but for the start of the array.

let nums = [10, 20, 30];
let first = nums.shift();
console.log(nums);
console.log(first);

[20, 30]
10

5. forEach() – Loop Through Each Element

forEach() executes a given function for each array element. It does not return anything.

let colors = ["red", "green", "blue"];
colors.forEach(function(color, index) {
  console.log(index + ": " + color);
});

0: red
1: green
2: blue

6. map() – Create a New Array by Transforming Elements

The map() method creates a new array with results of a function applied to every element.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled);

[2, 4, 6]

7. filter() – Select Elements That Match a Condition

Returns a new array with only the items that pass the provided test.

let scores = [85, 42, 77, 95];
let passed = scores.filter(score => score > 50);
console.log(passed);

[85, 77, 95]

8. reduce() – Reduce Array to a Single Value

reduce() applies a function against an accumulator and each element to reduce it to a single value.

let values = [10, 20, 30];
let total = values.reduce((sum, current) => sum + current, 0);
console.log(total);

60

9. find() – Find the First Match

Returns the first element that satisfies the condition.

let users = [{id: 1}, {id: 2}, {id: 3}];
let user = users.find(u => u.id === 2);
console.log(user);

{id: 2}

10. includes() – Check if Value Exists

Returns true if the array contains the specified element.

let tags = ["js", "html", "css"];
console.log(tags.includes("html"));
console.log(tags.includes("php"));

true
false

11. indexOf() – Find the Position

Returns the first index at which a given element can be found, or -1 if not present.

let cities = ["Delhi", "Mumbai", "Chennai"];
console.log(cities.indexOf("Mumbai"));
console.log(cities.indexOf("Kolkata"));

1
-1

12. slice() – Copy a Portion

Returns a shallow copy of a portion of an array.

let letters = ["a", "b", "c", "d", "e"];
console.log(letters.slice(1, 4));

["b", "c", "d"]

13. splice() – Add or Remove Elements

Modifies an array by removing or replacing elements in place.

let nums = [1, 2, 3, 4, 5];
nums.splice(2, 1, 99);
console.log(nums);

[1, 2, 99, 4, 5]

14. sort() – Sort Elements

Sorts the array elements. By default, sorts alphabetically as strings.

let data = [20, 5, 100, 1];
data.sort(); // Incorrect numeric sort
console.log(data);
data.sort((a, b) => a - b); // Correct numeric sort
console.log(data);

[1, 100, 20, 5]
[1, 5, 20, 100]

15. concat() – Merge Arrays

Combines two or more arrays and returns a new one.

let a = [1, 2];
let b = [3, 4];
let combined = a.concat(b);
console.log(combined);

[1, 2, 3, 4]