JavaScript Array Methods Every Beginner Must Know

Arrays are one of the most important data structures in JavaScript. When working with lists of data (numbers, names, products, etc.), JavaScript provides powerful built-in methods that make your code shorter and cleaner.

In this blog, we will learn these important array methods:

• push() and pop()

• shift() and unshift()

• forEach()

• map()

• filter()

• reduce()

You should open the browser console and try each example yourself.

Right click → Inspect → Console

---

1. push() and pop()

These methods work with the end of an array.

Method	What it does
push()	Adds element to the end
pop()	Removes the last element

---

push()

Adds a new element at the end of the array.

Example

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

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

fruits.push("mango");

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

Array State

Before

["apple","banana"]

After push("mango")

["apple","banana","mango"]

---

pop()

Removes the last element.

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

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

fruits.pop();

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

Array State

Before

["apple","banana","mango"]

After pop()

["apple","banana"]

---

2. shift() and unshift()

These methods work with the start of the array.

Method	What it does
shift()	Removes first element
unshift()	Adds element at beginning

---

shift()

let numbers = [10,20,30];

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

numbers.shift();

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

Array State

Before

[10,20,30]

After shift()

[20,30]

---

unshift()

let numbers = [20,30];

numbers.unshift(10);

console.log(numbers);

Result

[10,20,30]

---

3. forEach()

forEach() runs a function for every element in the array.

It is mostly used when you want to print or perform actions.

Example

let numbers = [1,2,3];

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

Output

1
2
3

Important:

forEach() does NOT create a new array.

---

4. map()

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

---

Traditional For Loop

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

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

console.log(doubled);

Result

[2,4,6,8]

---

Using map()

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

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

console.log(doubled);

Result

[2,4,6,8]

---

Map Flow Diagram

Original Array

[1,2,3,4]

Transformation

1 → 2
2 → 4
3 → 6
4 → 8

New Array

[2,4,6,8]

Important rule:

map() always returns a new array.

---

5. filter()

filter() returns elements that match a condition.

---

Traditional For Loop

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);

Result

[12,20]

---

Using filter()

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

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

console.log(result);

Result

[12,20]

---

Filter Flow Diagram

Original Array

[5,12,8,20]

Condition → number > 10

5  ❌
12 ✅
8  ❌
20 ✅

New Array

[12,20]

---

6. reduce() (Beginner Friendly Explanation)

reduce() converts an array into a single value.

Example uses:

• total price

• sum of numbers

• counting items

---

Example: Sum of numbers

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

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

console.log(sum);

Result

10

---

Reduce Visual

Start value = 0

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

Final Result

10

Think of reduce() as continuously adding results together.