Array Deletion at Middle Index in DSA Typescript - 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 size by 1

↓

Resulting array without deleted element

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

Execution Sample

DSA Typescript

const arr = [10, 20, 30, 40, 50];
const indexToDelete = 2;
for(let i = indexToDelete; i < arr.length - 1; i++) {
  arr[i] = arr[i + 1];
}
arr.length = arr.length - 1;
console.log(arr);

Deletes the element at index 2 (value 30) by shifting elements left and reducing array size.

Execution Table

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

💡 Array length reduced from 5 to 4, element at index 2 deleted.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	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]
indexToDelete	2	2	2	2	2
arr.length	5	5	5	4	4
i	-	2	3	-	-

Key Moments - 3 Insights

Why do we shift elements left starting from the deletion index?

Because we overwrite the element to delete with the next element, moving all subsequent elements one step left to fill the gap, as shown in steps 2 and 3 of the execution_table.

Why do we reduce the array length after shifting elements?

Reducing the length removes the duplicate last element leftover after shifting, effectively deleting the last redundant element, as shown in step 4.

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

The loop won't run properly and may cause errors or no change; the code assumes a valid index, so always check index validity before deletion.

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, 50, 50]

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

D [10, 20, 40, 50]

💡 Hint

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

At which step is the array length reduced?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

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

If indexToDelete was 0, how would the array state change after step 2?

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

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

C [20, 20, 30, 40, 50]

D [30, 40, 50, 50, 50]

💡 Hint

Shifting starts at indexToDelete, so arr[0] becomes arr[1]. Check variable_tracker for similar shifts.

Concept Snapshot

Array Deletion at Middle Index:
- Identify index to delete.
- Shift all elements after index left by one.
- Reduce array length by one.
- Result: array without deleted element.
- Works in-place, no extra array needed.

Full Transcript

This visualization 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 each element after that index one position to the left, overwriting the element to delete. After shifting, we reduce the array length by one to remove the duplicate last element. The final array no longer contains the deleted element. This process is done step-by-step, showing the array state and pointer changes at each step.

Practice

1. What does deleting the middle element from an array mean?
Example: [1, 2, 3, 4, 5] Delete the middle element.

easy

A. Remove the element at index 2 (value 3) from the array

B. Remove the first element (value 1) from the array

C. Remove the last element (value 5) from the array

D. Remove all elements except the middle one

Solution

1. Step 1: Identify the middle index of the array

   The array has 5 elements, so middle index = floor(5/2) = 2.

2. Step 2: Remove the element at the middle index

   Removing element at index 2 removes the value 3 from the array.

3. Final Answer:

   Remove the element at index 2 (value 3) from the array -> Option A

4. Quick Check:

   Middle index = 2, remove element 3 [OK]

Hint: Middle index = floor(length/2), remove that element [OK]

Common Mistakes:

• Removing first or last element instead of middle
• Using length/2 without floor for odd length
• Confusing index with value

2. Which TypeScript code correctly deletes the middle element from array arr?

easy

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

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

C. arr.delete(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 in TypeScript

   TypeScript arrays use splice(index, count) to remove elements at a specific index.

2. Step 2: Use Math.floor(arr.length / 2) to get middle index

   This expression correctly calculates the middle index for deletion.

3. Final Answer:

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

4. Quick Check:

   splice + floor middle index = correct deletion [OK]

Hint: Use splice with floor(length/2) to delete middle [OK]

Common Mistakes:

• Using non-existent methods like delete or removeAt
• Using pop() which removes last element only
• Not flooring the middle index calculation

3. What is the output of this TypeScript code?

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

medium

A. [20, 30, 40, 50]

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

C. [10, 20, 30, 50]

D. [10, 20, 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 removing it results in [10, 20, 40, 50].

3. Final Answer:

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

4. Quick Check:

   Removed element 30 at index 2 [OK]

Hint: Remove element at floor(length/2) index [OK]

Common Mistakes:

• Not flooring index, causing wrong removal
• Removing wrong element index
• Expecting original array unchanged

4. Find the error in this code that tries to delete the middle element:

let arr = [5, 10, 15, 20];
arr.splice(arr.length / 2, 1);
console.log(arr);

medium

A. console.log syntax is incorrect

B. splice method does not exist on arrays

C. Using arr.length / 2 without floor causes wrong index

D. splice removes all elements, not one

Solution

1. Step 1: Check middle index calculation

   arr.length / 2 = 4 / 2 = 2 (number), but for even length arrays, middle index should be floor(4/2) = 2, so this seems correct but in TypeScript splice expects integer index.

2. Step 2: Verify if index is integer

   arr.length / 2 is 2 (integer), so no error here. But if length was odd, it would be float. The main issue is that for even length arrays, middle is ambiguous; usually floor is used to pick index 2.

3. Step 3: Identify actual problem

   In this code, no floor is used but division results in integer 2, so no error. However, if length was odd, index would be float causing error. So best practice is to use Math.floor to ensure integer index.

4. Final Answer:

   Using arr.length / 2 without floor causes wrong index -> Option C

5. Quick Check:

   Always floor middle index for splice [OK]

Hint: Always floor middle index before splice [OK]

Common Mistakes:

• Not flooring index causing float error
• Thinking splice removes all elements
• Misunderstanding console.log usage

5. Given an array arr of even length, how can you delete the lower middle element?
Example: arr = [2, 4, 6, 8] After deletion, output should be [2, 6, 8].

hard

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

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

C. arr.splice(arr.length / 2, 1);

D. arr.splice(arr.length / 2 + 1, 1);

Solution

1. Step 1: Understand middle elements in even length array

   For even length 4, middle indices are 1 and 2 (0-based). Lower middle is index 1.

2. Step 2: Calculate index to delete

   Math.floor(4/2) = 2, subtract 1 to get lower middle index = 1.

3. Step 3: Use splice to delete element at index 1

   arr.splice(1, 1) removes element 4, resulting in [2, 6, 8].

4. Final Answer:

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

5. Quick Check:

   Lower middle index = floor(length/2)-1 [OK]

Hint: Lower middle = floor(length/2) - 1 for even arrays [OK]

Common Mistakes:

• Deleting upper middle instead of lower middle
• Not adjusting index for zero-based arrays
• Using ceil instead of floor