❮ Previous Next ❯

Array Modification

  • This lesson covers different methods used to modify arrays.

  • Introduction to Array Modification

    In JavaScript, arrays are dynamic, which means:

    • Their size can change

    • Elements can be added or removed at runtime

    To modify arrays, JavaScript provides built-in methods that allow us to:

    • Add elements

    • Remove elements

    • Modify array length

    In this lesson, we will learn four important array modification methods:

    1. push()

    2. pop()

    3. shift()

    4. unshift()

    Why Do We Need Array Modification Methods ?

    Real-world examples:

    • Adding a product to a cart

    • Removing the last message from a chat

    • Adding a new student to a list

    • Removing the first task from a queue

    Without array methods, array handling would be complex and inefficient.

    push Method

    What is push() ?

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

    Syntax

    array.push(element1, element2, ..., elementN);

    Key Points About push()

    • Adds elements at the end

    • Modifies the original array

    • Returns the new length of the array

push Method in Arrays

Adds one or more elements to the end of an array and returns new length. 

// Adding single element

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

fruits.push("Mango");

console.log(fruits);


// Adding multiple elements

let numbers = [1, 2];

numbers.push(3, 4, 5);

console.log(numbers);


// Return value of push()

let colors = ["Red", "Blue"];

let newLength = colors.push("Green");

console.log(newLength); // 3

  • pop() Method

    What is pop() ? 

    The pop() method is used to remove the last element from an array.

    Syntax

    array.pop();

    Key Points About pop()

    • Removes the last element

    • Modifies the original array

    • Returns the removed element

pop Method in Arrays

Removes the last element from an array and returns it. 

// Removing last element

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

let removedFruit = fruits.pop();

console.log(removedFruit); // Mango
console.log(fruits); // ["Apple", "Banana"]


// pop on empty array

let arr = [];

console.log(arr.pop()); // undefined

  • shift() Method

    What is shift() ?

    The shift() method is used to remove the first element from an array.

    Syntax

    array.shift();

    Key Points About shift()

    • Removes the first element

    • Shifts all remaining elements to lower index

    • Modifies the original array

    • Returns the removed element

    • Slower than pop() for large arrays

shift Method in Arrays

Removes the first element from an array and returns it. 

// Removing first element

let numbers = [10, 20, 30, 40];

let removedNumber = numbers.shift();

console.log(removedNumber); // 10
console.log(numbers); // [20, 30, 40]

  • unshift() Method

    What is unshift() ?

    The unshift() method is used to add one or more elements at the beginning of an array.

    Syntax

    array.unshift(element1, element2, ..., elementN);

    Key Points About unshift()

    • Adds elements at the start

    • Shifts existing elements to higher index

    • Modifies the original array

    • Returns the new length of the array

unshift Method in Arrays

Adds one or more elements to the beginning of an array. 

// Adding element at beginning

let cities = ["Delhi", "Mumbai"];

cities.unshift("Ahmedabad");

console.log(cities);


// Adding multiple elements

let nums = [3, 4];

nums.unshift(1, 2);

console.log(nums);
  • push vs pop vs shift vs unshift
    MethodOperationPositionReturns
    push()AddEndNew length
    pop()RemoveEndRemoved element
    shift()RemoveStartRemoved element
    unshift()AddStartNew length

    Visual Understanding

    let arr = ["A", "B", "C"];

    • push("D") → ["A", "B", "C", "D"]

    • pop() → ["A", "B"]

    • shift() → ["B", "C"]

    • unshift("Z") → ["Z", "A", "B", "C"]

    Common Mistakes

    • Expecting push() to return the element

    • Forgetting that these methods modify the original array

    • Using shift() and unshift() in large arrays without understanding performance

    • Confusing start and end positions

    Best Practices

    • Use push() and pop() for better performance

    • Use shift() and unshift() when order matters

    • Avoid unnecessary array mutations

    • Always check array length when removing elements

❮ Previous Next ❯