Array Deletion at Middle Index in DSA Javascript - Execution Trace

Concept Flow - Array Deletion at Middle Index

Start with array

↓

Identify index to delete

↓

Shift elements left from index+1 to end

↓

Reduce array length by 1

↓

Resulting array without deleted element

We start with the array, find the index to delete, shift all elements after it one step left, then reduce the array size by one.

Execution Sample

DSA Javascript

let arr = [10, 20, 30, 40, 50];
let index = 2; // delete element at index 2 (30)
for(let i = index; i < arr.length - 1; i++) {
  arr[i] = arr[i + 1];
}
arr.length = arr.length - 1;

This code deletes the element at index 2 by shifting elements left and shortening the array.

Execution Table

Step	Operation	Index i	Array State	Pointer Changes	Visual State
1	Start	-	[10, 20, 30, 40, 50]	i not set	10 -> 20 -> 30 -> 40 -> 50 -> null
2	Delete at index 2	2	[10, 20, 30, 40, 50]	i=2	10 -> 20 -> 30 -> 40 -> 50 -> null
3	Shift arr[2] = arr[3]	2	[10, 20, 40, 40, 50]	i=2	10 -> 20 -> 40 -> 40 -> 50 -> null
4	Shift arr[3] = arr[4]	3	[10, 20, 40, 50, 50]	i=3	10 -> 20 -> 40 -> 50 -> 50 -> null
5	Reduce length by 1	-	[10, 20, 40, 50]	length=4	10 -> 20 -> 40 -> 50 -> null
6	End	-	[10, 20, 40, 50]	-	10 -> 20 -> 40 -> 50 -> null

💡 Loop ends when i reaches arr.length - 1; array length reduced by 1 to remove duplicate last element.

Variable Tracker

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

Key Moments - 3 Insights

Why do we shift elements left instead of just removing the element at the index?

Because arrays have fixed positions, removing an element leaves a gap. Shifting left fills that gap by moving all elements after the deleted index one step left, as shown in steps 3 and 4 of the execution_table.

Why do we reduce the array length after shifting elements?

After shifting, the last element is duplicated. Reducing the length removes this duplicate, effectively deleting the last redundant element, as shown in step 5.

What happens if we try to delete an index outside the array range?

The code lacks bounds checking. For index >= arr.length, the loop does not run but length is reduced, truncating the last element(s). For index < 0, unexpected shifts occur from negative indices.

Visual Quiz - 3 Questions

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

A [10, 20, 30, 40, 50]

B [10, 20, 40, 40, 50]

C [10, 20, 40, 50, 50]

D [10, 20, 40, 50]

💡 Hint

Check the 'Array State' column at step 3 in the execution_table.

At which step is the array length reduced?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Look for the operation 'Reduce length by 1' in the execution_table.

If we delete the element at index 0 instead, what would be the first shift operation?

A arr[0] = arr[1]

B arr[1] = arr[2]

C arr[2] = arr[3]

D arr[0] = arr[0]

💡 Hint

Shifting starts at the deleted index; see how shifting happens at index 2 in the execution_table.

Concept Snapshot

Array Deletion at Middle Index:
- Identify index to delete
- Shift elements left from index+1 to end
- Reduce array length by 1
- Result: array without deleted element
- Shifting fills the gap left by deletion

Full Transcript

This visual trace shows how to delete an element from the middle of an array. We start with the original array and the index to delete. Then, we shift all elements after that index one position to the left to overwrite the deleted element. After shifting, the last element is duplicated, so we reduce the array length by one to remove the duplicate. The final array no longer contains the deleted element. This process ensures the array remains continuous without gaps.

Practice

1. What happens when you delete the middle element from an array with an odd number of elements using array.splice(mid, 1) where mid is the middle index?

easy

A. The first element is removed instead.

B. The array remains unchanged.

C. All elements after the middle are removed.

D. The middle element is removed and the array size decreases by one.

Solution

1. Step 1: Understand splice method behavior

   The splice method removes elements starting at the given index. Here, it removes 1 element at the middle index.

2. Step 2: Effect on array size

   Removing one element reduces the array length by one, and elements after the removed one shift left.

3. Final Answer:

   The middle element is removed and the array size decreases by one. -> Option D

4. Quick Check:

   splice(mid, 1) removes middle element [OK]

Hint: Use splice(mid, 1) to remove middle element quickly [OK]

Common Mistakes:

• Thinking splice does not change array size
• Confusing splice with slice
• Removing wrong index

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

easy

A. arr.delete(Math.floor(arr.length / 2));

B. arr.splice(Math.floor(arr.length / 2), 1);

C. arr.remove(Math.floor(arr.length / 2));

D. arr.pop(Math.floor(arr.length / 2));

Solution

1. Step 1: Identify correct method to remove element by index

   JavaScript arrays use splice to remove elements at a specific index.

2. Step 2: Calculate middle index correctly

   Math.floor(arr.length / 2) gives the middle index for odd or even length arrays.

3. Final Answer:

   arr.splice(Math.floor(arr.length / 2), 1); -> Option B

4. Quick Check:

   splice + floor middle index = correct syntax [OK]

Hint: Use splice with floor of length/2 for middle deletion [OK]

Common Mistakes:

• Using non-existent methods like delete or remove
• Using pop with index argument
• Not flooring the middle index

3. What is the output of the following code?

let arr = [10, 20, 30, 40, 50];
let mid = Math.floor(arr.length / 2);
arr.splice(mid, 1);
console.log(arr);

medium

A. [10, 20, 40, 50]

B. [10, 20, 30, 40]

C. [10, 20, 30, 50]

D. [20, 30, 40, 50]

Solution

1. Step 1: Calculate middle index

   Array length is 5, so middle index = floor(5/2) = 2.

2. Step 2: Remove element at index 2

   Element at index 2 is 30, so splice removes 30.

3. Step 3: Resulting array

   Array becomes [10, 20, 40, 50] after removal.

4. Final Answer:

   [10, 20, 40, 50] -> Option A

5. Quick Check:

   Removed element 30 at index 2 [OK]

Hint: Find middle index, splice removes that element [OK]

Common Mistakes:

• Removing wrong index element
• Not flooring middle index
• Confusing splice with slice

4. Find the error in the code below that tries to remove the middle element from an array:

let arr = [1, 2, 3, 4, 5];
let mid = arr.length / 2;
arr.splice(mid, 1);
console.log(arr);

medium

A. splice cannot remove elements from arrays.

B. arr.length / 2 gives the last index, not middle.

C. mid should be floored to an integer before using in splice.

D. splice requires two arguments, but only one is given.

Solution

1. Step 1: Check middle index calculation

   mid is calculated as arr.length / 2 = 2.5, which is a float, not an integer index.

2. Step 2: Effect of float index in splice

   splice expects an integer index; JavaScript coerces 2.5 to 2, but explicitly using Math.floor(arr.length / 2) ensures clarity and avoids reliance on type coercion.

3. Step 3: Correct approach

   Use Math.floor(arr.length / 2) to get integer index 2.

4. Final Answer:

   mid should be floored to an integer before using in splice. -> Option C

5. Quick Check:

   Index must be integer for splice [OK]

Hint: Always floor middle index before splice [OK]

Common Mistakes:

• Using float index in splice
• Assuming splice removes by value
• Passing wrong number of arguments to splice

5. Given an array arr with an even number of elements, how can you remove the two middle elements correctly in JavaScript?

hard

A. Use arr.splice(arr.length / 2 - 1, 2);

B. Use arr.splice(arr.length / 2, 1); twice

C. Use arr.pop(); arr.shift();

D. Use arr.splice(arr.length / 2, 2);

Solution

1. Step 1: Identify middle indices for even length

   For even length n, middle two elements are at indices n/2 - 1 and n/2.

2. Step 2: Remove two elements starting at n/2 - 1

   Using arr.splice(arr.length / 2 - 1, 2) removes both middle elements at once.

3. Step 3: Why other options fail

   Use arr.splice(arr.length / 2, 1); twice removes one element twice but shifts indices, causing wrong removal; Use arr.pop(); arr.shift(); removes first and last elements; Use arr.splice(arr.length / 2, 2); removes elements after middle.

4. Final Answer:

   Use arr.splice(arr.length / 2 - 1, 2); -> Option A

5. Quick Check:

   Remove two middle elements starting at n/2 - 1 [OK]

Hint: Start splice at n/2 - 1 to remove two middle elements [OK]

Common Mistakes:

• Removing elements twice causing index shift
• Removing first and last instead of middle
• Starting splice at wrong index