Arrays are one of the most commonly used data structures in JavaScript. They store multiple values in a single variable and allow us to manipulate data easily.

JavaScript provides many built-in array methods that help developers perform operations like adding elements, removing elements, transforming data, and processing arrays efficiently.

In this article, we will explore some essential array methods:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic idea)

• forEach()

All examples are simple so beginners can easily try them in the browser console.

---

1. push() and pop()

These methods work with the end of an array.

push()

push() adds a new element to 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 an array.

Example:

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

numbers.pop();

console.log(numbers);

Before:

[1, 2, 3, 4]

After:

[1, 2, 3]

---

2. shift() and unshift()

These methods work with the start of the array.

shift()

shift() removes the first element of an array.

Example:

let numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);

Before:

[10, 20, 30]

After:

[20, 30]

---

unshift()

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

Example:

let numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);

Before:

[20, 30]

After:

[10, 20, 30]

---

3. map()

map() creates a new array by transforming each element of the original array.

Example: double every number.

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Original array:

[1, 2, 3, 4]

New array:

[2, 4, 6, 8]

The original array does not change.

---

Traditional for Loop vs map()

Using a loop:

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

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

Using map():

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

map() is shorter and cleaner.

---

4. filter()

filter() creates a new array containing only elements that satisfy a condition.

Example: get numbers greater than 10.

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

let result = numbers.filter(num => num > 10);

console.log(result);

Output:

[12, 20]

Original array:

[5, 12, 8, 20, 3]

Filtered array:

[12, 20]

---

5. reduce() (Basic Idea)

reduce() is used to combine all elements of an array into a single value.

Example: calculate the total sum.

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

let sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum);

Output:

10

How it works step by step:

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

The value keeps accumulating, which is why it's called reduce.

---

6. forEach()

forEach() executes a function for each element in the array.

Example:

let numbers = [1, 2, 3];

numbers.forEach(num => {
  console.log(num);
});

Output:

1
2
3

Unlike map(), forEach() does not return a new array.
It is mainly used when we just want to perform an action.

---

Assignment Practice

Try the following in your browser console.

Step 1: Create an array

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

---

Step 2: Use map() to double numbers

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

console.log(doubled);

Output:

[10, 20, 30, 40]

---

Step 3: Use filter() to get numbers greater than 10

let filtered = numbers.filter(num => num > 10);

console.log(filtered);

Output:

[15, 20]

---

Step 4: Use reduce() to get total sum

let total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total);

Output:

50

---

Conclusion

JavaScript array methods make working with data much easier and more efficient. Instead of writing long loops, developers can use built-in methods like:

• push() and pop() for adding or removing elements

• shift() and unshift() for modifying the start of an array

• map() for transforming data

• filter() for selecting specific values

• reduce() for combining values

• forEach() for performing actions on each element

Practicing these methods will help you write cleaner and more modern JavaScript code.