Array Methods You Must Know

Introduction :

Arrays become truly powerful because of their built-in methods. These methods allow developers to easily manipulate, transform, and analyze data stored inside arrays.

In JavaScript, array methods help perform common operations such as adding elements, removing items, searching for values, transforming data, or looping through the array. Instead of writing long logic manually, these methods provide simple and efficient ways to work with collections of data.

Some array methods modify the original array, while others return a new array without changing the original one. Understanding the difference between these behaviors is important when building real applications.

In this section, we will explore some of the most important and commonly used array methods, including:

1. push() and pop()

2. shift() and unshift()

3. map()

4. filter()

5. reduce()

6. forEach()

These methods are widely used in modern JavaScript development, especially in frameworks like React and in backend environments like Node.js.

All array methods you need to know :

1. push()

Definition: push() is used to add one or more elements to the end of an array.
It also returns the new length of the array.

For example:

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

fruits.push("mango");

console.log(fruits);

Explanation

• The array initially contains "apple" and "banana".

• push("mango") adds "mango" to the end of the array.

Output

[ 'apple', 'banana', 'mango' ]

=== Code Execution Successful ===

2. pop() :

Definition: pop() removes the last element from an array and returns that removed element.

For example :

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

let removed = fruits.pop();

console.log(removed);
console.log(fruits);

Explanation

• "mango" is the last element.

• pop() removes it and returns it.

Output

mango
[ 'apple', 'banana' ]

=== Code Execution Successful ===

3. shift() :

Definition: shift() removes the first element of an array and returns it.

For example:

let numbers = [1, 2, 3];

let removed = numbers.shift();

console.log(removed);
console.log(numbers);

Explanation

• 1 is the first element.

• shift() removes it and shifts the remaining elements.

Output

1
[ 2, 3 ]

=== Code Execution Successful ===

4. unshift()

Definition: unshift() adds one or more elements to the beginning of an array.

For example:

let numbers = [2, 3];

numbers.unshift(1);

console.log(numbers);

Explanation

• The array starts with [2,3]

• unshift(1) adds 1 at the start.

Output

[ 1, 2, 3 ]

=== Code Execution Successful ===

5. map()

Definition: map() creates a new array by applying a function to each element of the original array.

For example:

let numbers = [1, 2, 3];

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

console.log(result);

Explanation

• Each number is multiplied by 2.

• A new array is created.

Output

[ 2, 4, 6 ]

=== Code Execution Successful ===

Original array remains unchanged.

6. filter()

Definition: filter() creates a new array containing elements that match a condition.

For example:

let numbers = [2, 5, 8, 10];

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

console.log(result);

Explanation

• Only numbers greater than 5 are selected.

Output

[ 8, 10 ]

=== Code Execution Successful ===

7. reduce()

Definition: reduce() processes all elements of an array and reduces them to a single value.

For example:

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

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

console.log(sum);

Explanation

The values are added step by step:

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

Output

10

=== Code Execution Successful ===

8. forEach()

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

For example:

let numbers = [1,2,3];

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

Explanation

• The function runs for every element in the array.

• It simply prints each number.

Output

1
2
3

=== Code Execution Successful ===

Compare traditional for loop vs map/filter:

In JavaScript, there are multiple ways to work with arrays. Two common approaches are using the traditional for loop or using modern array methods like map() and filter().

Both approaches can achieve similar results, but they differ in readability, simplicity, and style.

1. Using Traditional for Loop :

A for loop manually iterates through each element of an array.

Example: Double each number

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

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

console.log(result);

Output

[2,4,6,8]

=== Code Execution Successful ===

Explanation

• Loop runs from index 0 to numbers.length

• Each value is multiplied by 2

• Result is manually pushed into a new array

This approach works but requires more code.

2. Using map() :

The map() method automatically loops through the array and returns a new transformed array.

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

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

console.log(result);

Output

[2,4,6,8]

=== Code Execution Successful ===

Why map() is better

• Shorter code

• More readable

• Functional programming style

• Automatically returns a new array

3. Using filter() :

filter() is used when you want to select elements based on a condition.

Example: Get numbers greater than 2

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

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

console.log(result);

Output

[3,4]

=== Code Execution Successful ===

Create an array of numbers:

let numbers = [1,2,3];

console.log(numbers)

Output:

[ 1, 2, 3 ]

=== Code Execution Successful ===

Use map() to double each number:

For example:

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

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

console.log(doubled);

Output:

[ 2, 4, 6, 8 ]

=== Code Execution Successful ===

Use filter() to get numbers greater than 10:

For example:

let numbers = [12, 20, 3, 13, 42, 34, 9, 7];

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

console.log(doubled);

Output:

[ 12, 20, 13, 42, 34 ]

=== Code Execution Successful ===

Use reduce() to calculate total sum:

For example:

let numbers = [12, 20, 3, 13, 42, 34, 9, 7];

let doubled = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(doubled);

Output:

140

=== Code Execution Successful ===

Conclusion:

Array methods are an essential part of JavaScript programming. They allow developers to work with collections of data in a clean and efficient way.

Some of the most useful array methods include:

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

• shift() and unshift() for modifying the beginning of arrays

• map() for transforming data

• filter() for selecting specific elements

• reduce() for combining values into a single result

• forEach() for running operations on each element

By mastering these methods, you can write shorter, cleaner, and more readable JavaScript code.

Keep practicing in the console and try creating your own examples. With regular practice, working with arrays will become much easier.