Array Deletion at Beginning in DSA Typescript - Execution Trace

Concept Flow - Array Deletion at Beginning

Start with array

↓

Remove first element

↓

Shift all elements left by one

↓

Reduce array size by one

↓

Resulting array without first element

This flow shows how deleting the first element in an array removes it and shifts all other elements left to fill the gap.

Execution Sample

DSA Typescript

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

This code deletes the first element of the array and prints the updated array.

Execution Table

Step	Operation	Array State Before	Action Detail	Array State After
1	Start	[10, 20, 30, 40]	Initial array	[10, 20, 30, 40]
2	Delete first element	[10, 20, 30, 40]	Remove element at index 0 (10)	[20, 30, 40]
3	Shift elements	[20, 30, 40]	Elements shifted left to fill gap	[20, 30, 40]
4	Reduce size	[20, 30, 40]	Array length reduced by 1	[20, 30, 40]
5	End	[20, 30, 40]	Deletion complete	[20, 30, 40]

💡 First element removed, array size decreased, no more elements to shift.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
arr	[10, 20, 30, 40]	[20, 30, 40]	[20, 30, 40]	[20, 30, 40]
length	4	3	3	3

Key Moments - 3 Insights

Why do all elements shift left after deleting the first element?

Because arrays store elements in continuous memory, removing the first element leaves a gap. To keep elements contiguous, all elements after the removed one move left by one index. See execution_table rows 2 and 3.

Does the array size change after deletion?

Yes, the array length decreases by one after the first element is removed, as shown in variable_tracker and execution_table row 4.

What happens if the array is empty before deletion?

If the array is empty, deleting the first element does nothing and the array remains empty. This is not shown here but is important to handle in real code.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 2?

A [10, 20, 30, 40]

B [30, 40]

C [20, 30, 40]

D [40]

💡 Hint

Check the 'Array State After' column in row with Step 2.

At which step does the array length reduce?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Operation' and 'Action Detail' columns for length change.

If the array was empty initially, what would be the array state after deletion?

A Empty array []

B Array with one element

C Error occurs

D Array unchanged with elements

💡 Hint

Consider what happens when deleting from an empty array (not shown in table but logical).

Concept Snapshot

Array Deletion at Beginning:
- Remove element at index 0
- Shift all elements left by one
- Decrease array length by one
- Result: array without first element
- Operation is O(n) due to shifting

Full Transcript

This visualization shows how deleting the first element of an array works. Initially, the array has four elements. When we delete the first element, it is removed, and all other elements shift left to fill the gap. The array length decreases by one. The final array no longer contains the original first element. This process is important because arrays store elements in continuous memory, so shifting keeps the array compact.

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