JavaScript Array Methods Explained in Simple Words (With Examples)

Arrays are used to store multiple values in one variable.

Example:

const fruits = ["Apple", "Banana", "Mango"];

But how do we add, remove, or change items inside an array?

JavaScript gives us array methods to do that easily.

Let’s learn the most important ones step by step.

1.Adding & Removing Elements

push() – Add at the End
The push() method adds a new element to the end of an array.

const fruits = ["Apple", "Banana"];
fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

It changes the original array.

pop() – Remove from the End
The pop() method removes the last element from an array.

const fruits = ["Apple", "Banana", "Mango"];
fruits.pop();

console.log(fruits);
// ["Apple", "Banana"]

It changes the original array.

unshift() – Add at the Beginning
The unshift() method adds a new element at the beginning.

const fruits = ["Banana", "Mango"];
fruits.unshift("Apple");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

It changes the original array.

shift() – Remove from the Beginning
The shift() method removes the first element.

const fruits = ["Apple", "Banana", "Mango"];
fruits.shift();

console.log(fruits);
// ["Banana", "Mango"]

It changes the original array.

2.Copying & Modifying Arrays

slice() – Copy Part of an Array
The slice() method returns a new array containing selected elements from the original array without modifying it.

Syntax

array.slice(startIndex, endIndex)

• startIndex → Where to start (included)
• endIndex → Where to stop (NOT included)

Important: endIndex is NOT included.

Example 1

const numbers = [10, 20, 30, 40];

const result = numbers.slice(1, 3);

console.log(result);
// [20, 30]

Why?
Start at index 1 → 20
Stop before index 3 → 40 not included
So output = [20, 30]

Example 2 – Copy Full Array

const numbers = [1, 2, 3];
const copy = numbers.slice();

console.log(copy);
// [1, 2, 3]

This is called a shallow copy.

splice() – Add or Remove Anywhere
The splice() method is used to add, remove, or replace elements in an array.

• It can change the array at any position.
• It modifies the original array.

Syntax

array.splice(startIndex, deleteCount, item1, item2, ...)

• startIndex → Where to start
• deleteCount → How many elements to remove
• item1, item2... → (Optional) Items to add

Example
Remove Elements

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

numbers.splice(1, 2);

console.log(numbers);
// [1, 4]

Why?

Start at index 1 → value 2
Remove 2 elements → 2 and 3
Result: [1, 4]

Add Elements

const numbers = [1, 4];

numbers.splice(1, 0, 2, 3);

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

• Start at index 1
• Remove 0 elements
• Add 2 and 3

Important rule:

• splice() inserts items at the startIndex position, and the existing element at that index shifts to the right.
• It does NOT insert after it.
• It inserts before the element at that index.

3.Searching Methods
includes() – Check if Value Exists

const fruits = ["Apple", "Banana"];

console.log(fruits.includes("Apple"));
// true

Returns true or false.

indexOf() – Find Position

const fruits = ["Apple", "Banana"];

console.log(fruits.indexOf("Banana"));
// 1

• Returns the index of the element.
• If not found, it returns -1.

find() – Find First Matching Element
The find() method is used to:

• Find the first element that matches a condition
• It returns the element itself
• If nothing matches, it returns undefined

Syntax

array.find(function(element) {
  return condition;
});

Example

const numbers = [5, 10, 15, 20];

const result = numbers.find(function(num) {
  return num > 10;
});

console.log(result);
// 15

It stops immediately and returns 15.

Important Rule

• find() returns the first matching element only
• It stops searching after that

4.Looping Methods

forEach() – Loop Through Array
The forEach() method is used to:

• Run a function for each element in the array
• It does NOT return a new array
• It does NOT change the original array (unless you modify it manually)

Syntax

array.forEach(function(element, index, array) {
  // code to run
});

Parameters:
element → current value
index → position (optional)
array → full array (optional)

Example 1

const numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

Output

1
2
3

Important Rule
forEach():

• Loops through entire array
• Does NOT return anything
• Always returns undefined

Example 2 – With Index

const fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

Output

0 Apple
1 Banana
2 Mango

map() – Create a New Array
The map() method is used to:

• Transform each element in an array
• Return a new array
• It does NOT change the original array

Syntax

array.map(function(element, index, array) {
  return newValue;
});

element → current value
index → position (optional)
array → full array (optional)

Example 1

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);
// [2, 4, 6]

What happened?
1 → 1 × 2 = 2
2 → 2 × 2 = 4
3 → 3 × 2 = 6

map() collects all returned values into a new array.

Important Rule

• map() ALWAYS returns a new array
• It must have a return statement
• It does NOT modify the original array

Example 2 – With Arrow Function (Modern Way)

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [2, 4, 6]

filter() – Filter Based on Condition
The filter() method is used to:

• Select elements that match a condition
• Return a new array
• It does NOT change the original array

Syntax

array.filter(function(element, index, array) {
  return condition;
});

If the condition is:
true → element is kept
false → element is removed

Example 1 – Basic Example

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

const even = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(even);
// [2, 4]

Only even numbers are kept.

Important Rule

• filter() always returns a new array
• It may return fewer elements
• It can even return an empty array

Example 2 – Using Arrow Function

const numbers = [5, 10, 15, 20];
const greaterThan10 = numbers.filter(n => n > 10);

console.log(greaterThan10);
// [15, 20]

reduce() – Combine All Values into One
The reduce() method is used to:

• Take all array elements
• Combine them into a single value

It can return:

• A number
• A string
• An object
• Even another array

Syntax

array.reduce(function(accumulator, currentValue) {
  return updatedValue;
}, initialValue);

accumulator → Stores the result step by step
currentValue → Current element in loop
initialValue → Starting value

Example 1 – Add All Numbers

const numbers = [1, 2, 3, 4];
const total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

console.log(total);
// 10

Example 2 – Multiply Numbers

const numbers = [2, 3, 4];
const result = numbers.reduce(function(total, num) {
  return total * num;
}, 1);

console.log(result);
// 24

JavaScript Array Methods – Quick Comparison

This table helps you quickly understand which methods modify the array and which return a new one.

Conclusion

JavaScript array methods may look overwhelming at first, but once you understand how they are grouped, everything becomes much clearer.

Some methods modify the original array (like push(), pop(), and splice()), while others return a new array or value without changing the original (like slice(), map(), filter(), and find()).

The key is to remember:

🔹 Use mutating methods when you want to change the existing array.
🔹 Use non-mutating methods when you want to keep your original data safe.
🔹 Use iteration methods like map(), filter(), and reduce() for cleaner and more readable code.
🔹 Use search methods like includes(), find(), and indexOf() to quickly locate data.

Start practicing them in small examples, and soon you’ll use them naturally in real-world projects.