JavaScript Array Methods Explained in Simple Words

When learning JavaScript, arrays are something we use almost everywhere. At first I used for loops to work with arrays, but later I discovered that JavaScript already provides some built-in methods that make things easier and cleaner.

In this blog, I will explain some basic array methods in a simple way with examples you can try in the browser console.

The methods we will cover are:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic idea)

• forEach()

Try all examples in your browser console or Node.js to understand better.

---

1. push() and pop()

These methods work with the end of an array.

push()

push() adds a new element at the end of the array.

Example:

let numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

Before:

[1, 2, 3]

After:

[1, 2, 3, 4]

---

pop()

pop() removes the last element from the array.

let numbers = [1, 2, 3];

numbers.pop();

console.log(numbers);

Before:

[1, 2, 3]

After:

[1, 2]

---

2. shift() and unshift()

These methods work with the beginning of the array.

shift()

shift() removes the first element.

let numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);

Before:

[10, 20, 30]

After:

[20, 30]

---

unshift()

unshift() adds an element to the start of the array.

let numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);

Before:

[20, 30]

After:

[10, 20, 30]

---

3. forEach()

forEach() is used to run a function for every element in the array.

Example:

let numbers = [1, 2, 3];

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

Output:

1
2
3

It does not return a new array. It is mainly used for printing, logging, or side effects.

---

4. Traditional for Loop vs forEach()

Using for loop

let numbers = [1,2,3];

for(let i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
}

Using forEach()

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

The forEach() version is shorter and easier to read.

---

5. map()

map() creates a new array by transforming every element.

Example: Double each number.

let numbers = [1, 2, 3];

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

console.log(doubled);

Original array:

[1, 2, 3]

New array after map:

[2, 4, 6]

Important: map() does not change the original array.

---

6. Traditional Loop vs map()

Using for loop

let numbers = [1,2,3];
let result = [];

for(let i = 0; i < numbers.length; i++){
  result.push(numbers[i] * 2);
}

console.log(result);

Using map()

let result = numbers.map(num => num * 2);

map() makes the code shorter and cleaner.

---

7. filter()

filter() creates a new array with elements that match a condition.

Example: Get numbers greater than 10.

let numbers = [5, 12, 8, 20];

let result = numbers.filter(function(num){
  return num > 10;
});

console.log(result);

Original array:

[5, 12, 8, 20]

Filtered array:

[12, 20]

---

8. reduce() (Basic Idea)

reduce() is used to combine all values into a single result.

A common example is calculating the total sum.

Example:

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

let sum = numbers.reduce(function(total, num){
  return total + num;
}, 0);

console.log(sum);

Output:

10

Explanation in simple words:

• total keeps track of the running sum

• num is the current number

• It keeps adding until the array ends

---

Conclusion

The best way to learn these methods is to open the browser console and try them yourself.

At first it may feel confusing, but after practicing a few times you will notice that methods like map(), filter(), and reduce() make JavaScript code much cleaner than traditional loops.