Array Deletion at Beginning in DSA Typescript

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 movie. 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
 ↑start

Dry Run Walkthrough

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

Goal: Remove the first element and shift remaining elements left

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

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

Why: We clear the first position to remove the first element

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

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

Why: Move second element forward to fill the empty first slot

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

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

Why: Move third element forward to fill the gap

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

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

Why: Move fourth element forward to fill the last gap

Step 5: Set last index (3) to null or remove it

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

Why: Remove duplicate last element after shifting

Result:

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

Annotated Code

DSA Typescript

class ArrayDeletion {
  arr: (number | null)[];

  constructor(arr: number[]) {
    this.arr = arr;
  }

  deleteAtBeginning(): void {
    if (this.arr.length === 0) return; // handle empty array
    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 element
  }

  printArray(): void {
    let result = '';
    for (let i = 0; i < this.arr.length; i++) {
      result += this.arr[i] + (i < this.arr.length - 1 ? ' -> ' : ' -> null');
    }
    console.log(result);
  }
}

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

if (this.arr.length === 0) return; // handle empty array

check if array is empty to avoid errors

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

shift each element one position to the left to overwrite the first element

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

remove the last element which is now duplicated after shifting

Output

2 -> 3 -> 4 -> null

Complexity Analysis

Time: O(n) because we shift all n-1 elements one position left

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

vs Alternative: Compared to creating a new array without the first element (which uses O(n) space), this approach saves memory by shifting in place

Edge Cases

empty array

no operation performed, array remains empty

DSA Typescript

if (this.arr.length === 0) return; // handle empty array

array with one element

removing first element results in empty array

DSA Typescript

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

When to Use This Pattern

When you need to remove the first item from a list and keep the order, use array shifting to fill the gap.

Common Mistakes

Mistake: Not shifting elements left, just removing first element leaving a gap
Fix: Shift all elements left by one to fill the empty first position

Mistake: Forgetting to remove 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.

Use when you want to remove the front item but keep the rest in order.

The key is to move every element one step left to close the gap before removing the last duplicate.

Practice

1. What does deleting the first element of an array using array.shift() do to the array?

easy

A. Removes the last element of the array

B. Removes the first element and shifts all other elements left

C. Deletes the entire array

D. Adds a new element at the beginning

Solution

1. Step 1: Understand shift() method

   The shift() method removes the first element of the array.

2. Step 2: Effect on array elements

   After removal, all other elements move one position to the left to fill the gap.

3. Final Answer:

   Removes the first element and shifts all other elements left -> Option B

4. Quick Check:

   shift() removes first element [OK]

Hint: Remember: shift() removes from start, pop() removes from end [OK]

Common Mistakes:

• Confusing shift() with pop()
• Thinking shift() deletes entire array
• Assuming shift() adds elements

2. Which of the following is the correct syntax to remove the first element from an array named nums in TypeScript?

easy

A. nums.shift()

B. nums.removeFirst()

C. nums.pop()

D. nums.delete(0)

Solution

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

   The correct method to remove the first element in TypeScript arrays is shift().

2. Step 2: Check other options

   pop() removes last element, removeFirst() and delete(0) are invalid methods.

3. Final Answer:

   nums.shift() -> Option A

4. Quick Check:

   Use shift() to remove first element [OK]

Hint: Use shift() to remove first element, pop() for last [OK]

Common Mistakes:

• Using pop() instead of shift()
• Using non-existent methods like removeFirst()
• Trying to delete with delete(0) which is invalid

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

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

medium

A. [40]

B. [10, 20, 30, 40]

C. [30, 40]

D. [20, 30, 40]

Solution

1. Step 1: Initial array and shift operation

   The array starts as [10, 20, 30, 40]. Calling shift() removes the first element 10.

2. Step 2: Resulting array after shift

   After removal, the array becomes [20, 30, 40].

3. Final Answer:

   [20, 30, 40] -> Option D

4. Quick Check:

   shift() removes first element, rest remain [OK]

Hint: shift() removes first element, so array starts from second element [OK]

Common Mistakes:

• Expecting original array unchanged
• Thinking shift() removes last element
• Confusing output with pop() effect

4. Consider this TypeScript code snippet:

let numbers = [5, 10, 15];
numbers.shift;
console.log(numbers);

What is the issue and how to fix it?

medium

A. Missing parentheses after shift; fix by using numbers.shift()

B. shift is not a valid method; use pop() instead

C. Array is empty; no fix needed

D. shift() removes last element; use unshift() instead

Solution

1. Step 1: Identify the method call mistake

   The code uses numbers.shift without parentheses, so the method is not called.

2. Step 2: Correct method call syntax

   Adding parentheses numbers.shift() calls the method and removes the first element.

3. Final Answer:

   Missing parentheses after shift; fix by using numbers.shift() -> Option A

4. Quick Check:

   Method calls need parentheses [OK]

Hint: Always add () to call methods like shift() [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Using pop() instead of shift() incorrectly
• Misunderstanding shift() removes first element

5. You have an array let fruits = ['apple', 'banana', 'cherry', 'date'];. You want to remove the first two fruits efficiently. Which code snippet correctly does this?

hard

A. fruits.shift(2);

B. fruits.pop(); fruits.pop();

C. fruits.splice(0, 2);

D. fruits.delete(0); fruits.delete(1);

Solution

1. Step 1: Understand removing multiple elements

   fruits.shift(2); fruits.shift(2); is incorrect: shift() takes no arguments (ignores 2) and removes only the first element.

2. Step 2: Using splice for efficient removal

   splice(0, 2) removes two elements starting at index 0 in one operation.

3. Step 3: Check other options

   pop() removes from end, delete() is invalid for arrays.

4. Final Answer:

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

5. Quick Check:

   Use splice to remove multiple from start efficiently [OK]

Hint: Use splice(0, n) to remove n elements from start at once [OK]

Common Mistakes:

• Using shift(2) which only removes one element
• Using pop() which removes from end
• Using invalid delete() method