JavaScript Array Methods

JavaScript Array Methods – Complete Beginner Guide

Arrays are one of the most frequently used data structures in JavaScript. When working with lists of data such as numbers, users, products, or messages, we often store them inside arrays.

JavaScript provides several built-in array methods that make it easier to add, remove, transform, and process elements.

In this guide we will learn these important methods:

• push()

• pop()

• shift()

• unshift()

• forEach()

• map()

• filter()

• reduce()

Each method will be explained with examples and output inside the code.

Chapter 1: Understanding Arrays

Before learning array methods, it is important to understand what an array is.

An array is a data structure used to store multiple values in a single variable.

Example:

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

console.log(numbers);

// Output
// [5, 10, 15, 20]

In this array:

• 5 is stored at index 0

• 10 at index 1

• 15 at index 2

• 20 at index 3

Arrays help us manage collections of data easily.

Chapter 2: push() – Adding Elements to the End

The push() method adds one or more elements to the end of an array.

Syntax

array.push(value)

Example

const numbers = [10, 20, 30];

numbers.push(40);

console.log(numbers);

// Output
// [10, 20, 30, 40]

What Happened?

Before push:

[10, 20, 30]

After push:

[10, 20, 30, 40]

The new element 40 is added to the last position of the array.

Interview Tip

push() modifies the original array.

Chapter 3: pop() – Removing the Last Element

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

Syntax

array.pop()

Example

const numbers = [10, 20, 30];

numbers.pop();

console.log(numbers);

// Output
// [10, 20]

What Happened?

Before pop:

[10, 20, 30]

After pop:

[10, 20]

The last element 30 was removed.

Important

pop() also returns the removed value.

Example:

const numbers = [10, 20, 30];

const removed = numbers.pop();

console.log(removed);
// Output
// 30

Chapter 4: shift() – Removing the First Element

The shift() method removes the first element from the array.

Example

const numbers = [10, 20, 30];

numbers.shift();

console.log(numbers);

// Output
// [20, 30]

Before

[10, 20, 30]

After

[20, 30]

The element 10 was removed.

Chapter 5: unshift() – Adding Elements to the Beginning

The unshift() method adds one or more elements to the start of the array.

Example

const numbers = [20, 30];

numbers.unshift(10);

console.log(numbers);

// Output
// [10, 20, 30]

Before

[20, 30]

After

[10, 20, 30]

Chapter 6: Iterating Arrays (Traditional Loop vs forEach)

Before modern methods like map and filter, developers used for loops.

Traditional for loop

const numbers = [1, 2, 3];

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

// Output
// 1
// 2
// 3

This works but can become verbose.

Chapter 7: forEach() – Looping Through Arrays

The forEach() method executes a function for every element in the array.

Example

const numbers = [1, 2, 3];

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

// Output
// 1
// 2
// 3

Important Point

forEach() does not return a new array.

It is mainly used for:

• logging data

• running functions

• side effects

Chapter 8: map() – Transforming Arrays

The map() method creates a new array by transforming each element.

It does not change the original array.

Example

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

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

console.log(doubled);

// Output
// [2, 4, 6, 8]

Before

[1,2,3,4]

After (new array)

[2,4,6,8]

Why map is useful

Instead of writing loops manually, map simplifies transformation.

Chapter 9: filter() – Selecting Elements

The filter() method creates a new array containing elements that match a condition.

Example

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

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

console.log(result);

// Output
// [12, 20]

Process

5  → false
12 → true
8  → false
20 → true

Final array:

[12, 20]

Chapter 10: reduce() – Converting Array into One Value

The reduce() method converts an array into a single value.

It is often used to calculate totals.

Example: Sum of numbers

const numbers = [5, 10, 15];

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

console.log(total);

// Output
// 30

Step-by-step process

0 + 5  = 5
5 + 10 = 15
15 + 15 = 30

Final result = 30

Chapter 11: Comparison of Array Methods

Method	Purpose
push	Add element to end
pop	Remove last element
shift	Remove first element
unshift	Add element to beginning
forEach	Iterate array
map	Transform array
filter	Select elements
reduce	Convert array to single value

Chapter 12: Practice Assignment

Try this example in your console.

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

// map → double numbers
const doubled = numbers.map(num => num * 2);
console.log(doubled);
// Output: [10, 20, 30, 40]

// filter → numbers greater than 10
const greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen);
// Output: [15, 20]

// reduce → sum of numbers
const totalSum = numbers.reduce((sum, num) => sum + num, 0);
console.log(totalSum);
// Output: 50

Chapter 13: Common Interview Questions

What is the difference between map() and forEach()?

map()	forEach()
Returns new array	Does not return array
Used for transformation	Used for iteration

---

What does filter() return?

filter() returns a new array containing elements that match the condition.

---

What does reduce() do?

reduce() converts an array into one value.

Examples:

• total price

• sum of numbers

• average

---

Difference between push() and unshift()

push	unshift
Adds element at end	Adds element at beginning

---

Final Thoughts

Array methods are essential for writing clean, modern JavaScript code.

Instead of writing long loops, developers use methods like:

map()
filter()
reduce()

These make the code:

• shorter

• more readable

• easier to maintain

The best way to learn them is by experimenting in the browser console.