Array Deletion at Beginning in DSA Javascript - Execution Trace

Concept Flow - Array Deletion at Beginning

Start with array

↓

Remove first element

↓

Shift all elements left by one

↓

Reduce array length by one

↓

Resulting array without first element

The process removes the first element, shifts all others left, and shortens the array.

Execution Sample

DSA Javascript

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

Deletes the first element (10) from the array and prints the updated array.

Execution Table

Step	Operation	Array Before	Action Detail	Array After	Notes
1	Start	[10, 20, 30, 40]	Initial array setup	[10, 20, 30, 40]	Array has 4 elements
2	Delete first element	[10, 20, 30, 40]	Remove element at index 0	[20, 30, 40]	Elements shifted left, length reduced
3	Print array	[20, 30, 40]	Output current array state	[20, 30, 40]	Final array after deletion

💡 Deletion done, array length is now 3, first element removed

Variable Tracker

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

Key Moments - 3 Insights

Why does the array length decrease after deleting the first element?

Because the first element is removed and all others shift left, the array shortens by one, as shown in execution_table step 2.

What happens to the original first element after deletion?

It is removed from the array and no longer accessible, as seen in execution_table step 2 where the array no longer contains 10.

Does the array keep the same memory space after deletion?

Conceptually, the array shrinks and shifts elements left; the original first element's space is freed or reused internally, reflected by the shorter array length.

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 [10, 30, 40]

💡 Hint

Check the 'Array After' column in step 2 of execution_table

At which step does the array length reduce?

A Step 1

B Step 2

C Step 3

D No length change

💡 Hint

Look at the 'Notes' column in execution_table for length changes

If we delete the first element again after step 3, what will be the new first element?

A 30

B 40

C 20

D Array will be empty

💡 Hint

Refer to variable_tracker final state and imagine shift() applied again

Concept Snapshot

Array Deletion at Beginning:
- Use arr.shift() to remove first element
- Elements shift left to fill gap
- Array length decreases by one
- Original first element is lost
- Updated array reflects deletion immediately

Full Transcript

This visual trace shows how deleting the first element from an array works. Initially, the array has four elements. When we call shift(), the first element is removed, and all other elements move one position left. The array length decreases by one. The final array no longer contains the original first element. This process is shown step-by-step in the execution table and variable tracker.

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