Array Methods You Must Know

Introduction -

Arrays are one of the most commonly used data structures in JavaScript. Once we understand how arrays work, the next step is learning the built-in methods that make working with arrays easier. JavaScript provides several helpful array methods that allow us to add, remove, transform, and analyze data inside arrays.

In this article, we will explore some of the most useful array methods every beginner should know.

push() and pop()

The push() method adds a new element to the end of an array while pop() removes the last element. Example :

let numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);

Before :

[1, 2, 3]

After :

[1, 2, 3, 4]

Now using pop():

numbers.pop();

console.log(numbers);

After removing :

[1, 2, 3]

shift() and unshift()

These methods work with the beginning of the array.

• unshift() adds an element to the start

• shift() removes the first element

Example :

let fruits = ["Mango", "Banana"];

fruits.unshift("Apple");

console.log(fruits);

Result :

["Apple", "Mango", "Banana"]

Now remove the first element :

fruits.shift();

console.log(fruits);

Result :

["Mango", "Banana"]

map()

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

Example : doubling numbers.

let numbers = [2, 4, 6];

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

console.log(doubled);

Result :

[4, 8, 12]

Traditional Loop vs map()

Using a loop :

let result = [];

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

Using map():

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

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

filter()

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

Example :

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

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

console.log(filtered);

Result :

[12, 20]

Here the filter keeps only numbers greater than 10.

reduce()

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

Example : calculating the total sum.

let numbers = [5, 10, 15];

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

console.log(total);

Result :

30

Here:

• sum stores the accumulated value

• num represents each number in the array

reduce() keeps adding numbers until the final result is produced.

forEach()

The forEach() method runs a function for every element in an array.

Example :

let fruits = ["Apple", "Mango", "Banana"];

fruits.forEach(fruit => {
  console.log(fruit);
});

Output :

Apple
Mango
Banana

forEach() is useful when we simply want to perform an action for each element.

Practice Exercise -

Create an array of numbers

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

Use map() to double numbers

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

Use filter() to get numbers greater than 10

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

Use reduce() to calculate sum

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

Visual Diagrams -

To better understand how these methods work, you can include diagrams such as:

• Flowchart showing how map() transforms each value

• Flowchart showing how filter() selects values

• Simple diagram showing how reduce() accumulates results

These visualizations help beginners understand how array methods process data step by step.

Conclusion -

Array methods are powerful tools that make working with arrays much easier in JavaScript. Methods like push(), pop(), map(), filter(), reduce(), and forEach() allow developers to manipulate data efficiently and write cleaner code. Learning these methods is an important step toward writing more expressive and modern JavaScript programs.