When learning JavaScript, arrays are something you will use almost every day. Whether you are handling user data, storing products from an API, or processing numbers, arrays are everywhere.

JavaScript provides many built-in methods to work with arrays, and knowing the most important ones can make your code cleaner, shorter, and easier to understand.

In this article, we will go through some essential array methods every beginner should know:

• push() and pop()

• shift() and unshift()

• forEach()

• map()

• filter()

• reduce() (basic explanation)

I recommend trying all the examples directly in your browser console or Node.js as you read along.

---

1. push() and pop()

These methods are used to add or remove elements from the end of an array.

push()

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

let fruits = ["apple", "banana"];

console.log("Before:", fruits);

fruits.push("mango");

console.log("After:", fruits);

Output:

Before: ["apple", "banana"]
After: ["apple", "banana", "mango"]

So push() simply adds an item at the end.

---

pop()

pop() removes the last element from the array.

let fruits = ["apple", "banana", "mango"];

console.log("Before:", fruits);

fruits.pop();

console.log("After:", fruits);

Output:

Before: ["apple", "banana", "mango"]
After: ["apple", "banana"]

So pop() simply removes the last item.

---

2. shift() and unshift()

These methods work on the beginning of the array instead of the end.

shift()

shift() removes the first element of the array.

let numbers = [10, 20, 30];

console.log("Before:", numbers);

numbers.shift();

console.log("After:", numbers);

Output:

Before: [10, 20, 30]
After: [20, 30]

---

unshift()

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

let numbers = [20, 30];

console.log("Before:", numbers);

numbers.unshift(10);

console.log("After:", numbers);

Output:

Before: [20, 30]
After: [10, 20, 30]

---

3. forEach()

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

It does not create a new array. It is mainly used for performing actions like printing values or updating something.

Example:

let numbers = [1, 2, 3];

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

Output:

1
2
3

Think of forEach() as a cleaner way to loop through arrays.

---

4. map()

map() is used when you want to transform each element of an array and create a new array.

Traditional for loop approach

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

---

Using map()

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Before and After

Before:

[1, 2, 3, 4]

After using map():

[2, 4, 6, 8]

So map() transforms every element and returns a new array.

---

5. filter()

filter() is used when you want to select only certain elements from an array based on a condition.

Traditional for loop approach

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

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    result.push(numbers[i]);
  }
}

console.log(result);

Output:

[12, 20]

---

Using filter()

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

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

console.log(result);

Output:

[12, 20]

Before and After

Before:

[5, 12, 8, 20]

After using filter():

[12, 20]

So filter() returns only the elements that satisfy a condition.

---

6. reduce() (Beginner Explanation)

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

Common use cases include:

• Calculating sum

• Finding totals

• Aggregating data

Example: Calculate total sum.

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

let total = numbers.reduce((acc, current) => {
  return acc + current;
}, 0);

console.log(total);

Output:

10

Explanation:

• acc = accumulator (stores the running result)

• current = current element of the array

• 0 = starting value

Step-by-step process:

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

Final result:

10

So reduce() reduces the array to a single value.

---

Learning these array methods will make your JavaScript code much cleaner and easier to read.

Instead of writing long loops, you can express your intent clearly using built-in methods like:

• map() → transform data

• filter() → select data

• reduce() → combine data

• forEach() → perform actions on elements