Array Deletion at Beginning in DSA Javascript

Mental Model

Removing the first item from a list means shifting all other items one step left to fill the gap.

Analogy: Imagine a line of people waiting to enter a store. When the first person goes in, everyone else moves forward one step to close the space.

[0]1 -> [1]2 -> [2]3 -> [3]4 -> null
Index:  0      1      2      3

Dry Run Walkthrough

Input: array: [1, 2, 3, 4], delete element at beginning

Goal: Remove the first element and shift all others left to keep order

Step 1: Remove element at index 0 (value 1)

[0]null -> [1]2 -> [2]3 -> [3]4 -> null
Index:  0      1      2      3

Why: We remove the first element to delete it

Step 2: Shift element at index 1 (value 2) to index 0

[0]2 -> [1]null -> [2]3 -> [3]4 -> null
Index:  0      1      2      3

Why: Shift left to fill the empty spot at the start

Step 3: Shift element at index 2 (value 3) to index 1

[0]2 -> [1]3 -> [2]null -> [3]4 -> null
Index:  0      1      2      3

Why: Continue shifting elements left

Step 4: Shift element at index 3 (value 4) to index 2

[0]2 -> [1]3 -> [2]4 -> [3]null -> null
Index:  0      1      2      3

Why: Shift last element left to fill gap

Step 5: Remove last element (index 3) as duplicate after shift

[0]2 -> [1]3 -> [2]4 -> null
Index:  0      1      2

Why: Array size reduces by one after deletion

Result:

[0]2 -> [1]3 -> [2]4 -> null
Array after deletion: [2, 3, 4]

Annotated Code

DSA Javascript

class ArrayDeletion {
  constructor(arr) {
    this.arr = arr;
  }

  deleteAtBeginning() {
    if (this.arr.length === 0) return;
    for (let i = 1; i < this.arr.length; i++) {
      this.arr[i - 1] = this.arr[i]; // shift element left
    }
    this.arr.pop(); // remove last duplicate
  }

  printArray() {
    console.log(this.arr.join(' -> ') + ' -> null');
  }
}

// Driver code
const arrayObj = new ArrayDeletion([1, 2, 3, 4]);
arrayObj.deleteAtBeginning();
arrayObj.printArray();

if (this.arr.length === 0) return;

handle empty array edge case by exiting early

for (let i = 1; i < this.arr.length; i++) { this.arr[i - 1] = this.arr[i]; // shift element left }

shift each element one position left to overwrite the first element

this.arr.pop(); // remove last duplicate

remove last element which is now duplicate after shifting

Output

2 -> 3 -> 4 -> null

Complexity Analysis

Time: O(n) because we shift all elements left once

Space: O(1) because we modify the array in place without extra space

vs Alternative: Compared to using a new array to copy elements except the first, this in-place method saves space but still requires shifting all elements

Edge Cases

empty array []

function returns immediately without error

DSA Javascript

if (this.arr.length === 0) return;

array with one element [5]

removes the only element, resulting in empty array []

DSA Javascript

for (let i = 1; i < this.arr.length; i++) { ... }

When to Use This Pattern

When you need to remove the first item from a list and keep order, use array deletion at beginning which requires shifting all elements left.

Common Mistakes

Mistake: Not shifting elements left after removing the first element, leaving a gap
Fix: Shift all elements one position left to fill the gap before reducing array size

Mistake: Not removing the last duplicate element after shifting
Fix: Use pop() to remove the last element after shifting

Summary

Deletes the first element of an array by shifting all other elements left and reducing the array size.

Use when you need to remove the first item but keep the order of remaining items.

The key insight is that deleting at the start requires moving all elements left to fill the empty spot.

Practice

1. What does the shift() method do to an array in JavaScript?

easy

A. Adds an element at the end

B. Removes the last element and returns it

C. Adds an element at the beginning

D. Removes the first element and returns it

Solution

1. Step 1: Understand the shift() method

   The shift() method removes the first element from an array and returns that element.

2. Step 2: Compare with other array methods

   pop() removes the last element, unshift() adds at the beginning, and push() adds at the end.

3. Final Answer:

   Removes the first element and returns it -> Option D

4. Quick Check:

   shift() removes first element [OK]

Hint: Remember: shift = remove from start [OK]

Common Mistakes:

• Confusing shift() with pop()
• Thinking shift() adds elements
• Mixing shift() with unshift()

2. Which of the following is the correct syntax to remove the first element from an array arr in JavaScript?

easy

A. arr.shift()

B. arr.delete(0)

C. arr.unshift()

D. arr.pop()

Solution

1. Step 1: Identify the method to remove first element

   The method to remove the first element is shift().

2. Step 2: Check other options

   pop() removes last element, unshift() adds elements at start, and delete is not a valid array method.

3. Final Answer:

   arr.shift() -> Option A

4. Quick Check:

   Use shift() to remove first element [OK]

Hint: Use arr.shift() to remove first element [OK]

Common Mistakes:

• Using pop() instead of shift()
• Trying to use delete() on arrays
• Confusing unshift() with shift()

3. What will be the output of the following code?

let arr = [10, 20, 30, 40];
let removed = arr.shift();
console.log(arr);
console.log(removed);

medium

A. [20, 30, 40] and 10

B. [10, 20, 30] and 40

C. [20, 30, 40] and 40

D. [10, 20, 30] and 10

Solution

1. Step 1: Apply shift() on the array

   shift() removes the first element (10) from arr and returns it.

2. Step 2: Check the updated array and removed value

   After removal, arr becomes [20, 30, 40], and removed stores 10.

3. Final Answer:

   [20, 30, 40] and 10 -> Option A

4. Quick Check:

   shift() removes first element 10 [OK]

Hint: shift() returns removed first element [OK]

Common Mistakes:

• Expecting last element removed
• Confusing returned value with array
• Not updating array after shift()

4. Find the error in the following code that tries to remove the first element from array nums:

let nums = [5, 10, 15];
nums.remove(0);
console.log(nums);

medium

A. remove() removes last element, not first

B. remove() is not a valid array method

C. remove() requires two arguments

D. Code is correct and works fine

Solution

1. Step 1: Check the method used

   The method remove() does not exist for JavaScript arrays.

2. Step 2: Identify correct method to remove first element

   To remove the first element, use shift() instead of remove().

3. Final Answer:

   remove() is not a valid array method -> Option B

4. Quick Check:

   Use shift() to remove first element, not remove() [OK]

Hint: Use shift(), not remove(), to delete first element [OK]

Common Mistakes:

• Using remove() instead of shift()
• Assuming remove() exists in JS arrays
• Not checking method names carefully

5. Given an array data = [1, 2, 3, 4, 5], you want to remove the first two elements efficiently. Which code snippet correctly achieves this?

hard

A. data.shift(2);

B. data.pop(); data.pop();

C. data.splice(0, 2);

D. data.slice(2);

Solution

1. Step 1: Understand each method's effect

   shift(2) is invalid; shift() removes one element from start and takes no arguments. splice(0, 2) removes two elements starting at index 0 in one call. pop() removes from end, not start. slice(2) returns a new array without first two elements but does not modify original.

2. Step 2: Choose the best method to remove first two elements

   splice(0, 2) removes first two elements efficiently and modifies the original array.

3. Final Answer:

   data.splice(0, 2); -> Option C

4. Quick Check:

   splice(0, 2) removes first two elements [OK]

Hint: Use splice(0, 2) to remove first two elements at once [OK]

Common Mistakes:

• Using pop() which removes from end
• Using slice() which does not modify original array
• Using shift(2) which is invalid