Array Methods You Must Know

In this blog we are going to learn most useful methods of arrays in javaScript. Javascript provides multiple built-in methods for common tasks so, that se don't need to write the logic from scratch.

push() and pop() : Both function perform very simple and common task.

push() : From the name you can guess it is used to push(add) new values in array at the end of the array and return new array length.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'mango'); 

console.log(fruits);    // ["apple", "banana", "orange", "mango"]
console.log(newLength); // 4

pop() : This method remove the last element from the array from original array.

it returns the removed element.

const fruits = ['apple', 'banana', 'cherry'];
const lastFruit = fruits.pop(); 

console.log(fruits);    // ["apple", "banana"] (original array modified)
console.log(lastFruit); // "cherry" (returned value)

shift() and unshift() : : Both methods are used to manipulate beginning of the array.

shift() : This method remove first element of the array and return that removed element. This method directly change into original array length and content.

If the array is empty it returns undefined.

let fruits = ["Apple", "Banana", "Cherry"];
let first = fruits.shift(); 
console.log(first);  // "Apple"
console.log(fruits); // ["Banana", "Cherry"]

unshift() : This method adds one or more elements at the beginning of the array.

Yes, it changes the original array. Always return the new length of array.

If you pass multiple arguments , they are inserted at the beginning in the same order they are provided.

let numbers = [3, 4];
let newLength = numbers.unshift(1, 2);
console.log(newLength); // 4
console.log(numbers);   // [1, 2, 3, 4]

Array map() :

map() is a method used to loop through all elements of an array.

Non-mutating:

It does not modify the original array; instead, it returns a new array.

Inside map(), we use a callback function. The first parameter of the callback represents the current element, and the second parameter represents the index of that element.

const numbers = [1, 2, 3];
const doubled = numbers.map((num) =>{
    return num * 2

}); 
console.log(doubled); // [2, 4, 6]

Let's understand the above code.

• We have an array: [1, 2, 3]

• We use .map() on this array

• map() loops through each element one by one

In each iteration:

• First iteration → num = 1

• Second iteration → num = 2

• Third iteration → num = 3

In every iteration, map() applies the logic inside the callback function and returns the result.

These results are collected into a new array.

Output :

[2, 4, 6] //new array

Array filter() :The filter() method loops through all elements of an array and returns a new array. It does not modify the original array.

It returns only those elements that pass a specific condition.

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

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

console.log(result); // [3, 4, 5]

Let's understand the above code.

• filter() checks each element one by one

• If the condition returns true, the element is included

• If it returns false, the element is skipped

So, only elements that satisfy the condition are added to the new array.

Array reduce() : The reduce method runs a callback functions on each element of array and calculate result of each element into single variable based on the logic you provide.

array.reduce((accumulator, currentValue) => {
  // logic
}, initialValue);

accumulator → stores the result

currentValue → current element of the array

initialValue → starting value of the accumulator

Example :

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

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

console.log(sum); // 10

Errors: Calling reduce on an empty array without an initialValue throws a TypeError.

forEach() : forEach() is an in-built method for arrays that runs a callback function for each element of array.

Return value : It always return undefined. If you want to transform array you should use map() instead .

const numbers = [1, 2, 3];

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

Output :

1
2
3

Important point : Unlike map() or filter(), forEach() does not return a new array. It simply performs an action on each element.

Purpose : It is used for "side effects" like logging data , updating variable outside the loop or DOM manipulation.

side effects : A side effect means doing something inside a function that affects things outside the function, instead of just returning a value.

Example of Side effect :

const arr = [1, 2, 3];

let sum = 0; // declared outside

arr.forEach((num) => {
  sum += num; // updating outside variable
});

console.log(sum); // 6

Summary : In this blog, we focused on the most common and widely used array methods in JavaScript. We studied each method in detail with practical code examples.