Array Deletion at Middle Index in DSA Javascript

Mental Model

To delete an element in the middle of an array, we remove it and shift all elements after it one step left to fill the gap.

Analogy: Imagine a row of books on a shelf. If you remove one book from the middle, you slide all books after it to the left to close the empty space.

Index: 0   1   2   3   4
Array: [1]->[2]->[3]->[4]->[5]

Dry Run Walkthrough

Input: array: [1, 2, 3, 4, 5], delete element at index 2

Goal: Remove the element at index 2 and shift remaining elements left

Step 1: Remove element at index 2 (value 3)

Index: 0   1   2   3   4
Array: [1]->[2]->[ ]->[4]->[5]

Why: We want to delete the element at index 2, so we mark it empty first

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

Index: 0   1   2   3   4
Array: [1]->[2]->[4]->[4]->[5]

Why: Shift left to fill the empty spot at index 2

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

Index: 0   1   2   3   4
Array: [1]->[2]->[4]->[5]->[5]

Why: Continue shifting elements left to close the gap

Step 4: Remove duplicate last element at index 4

Index: 0   1   2   3
Array: [1]->[2]->[4]->[5]

Why: Last element is duplicated after shifting, so remove it to keep correct size

Result:

Index: 0   1   2   3
Array: [1]->[2]->[4]->[5]

Annotated Code

DSA Javascript

class ArrayDeletion {
  constructor(arr) {
    this.arr = arr;
    this.size = arr.length;
  }

  deleteAtIndex(index) {
    if (index < 0 || index >= this.size) {
      console.log('Index out of bounds');
      return;
    }
    // Shift elements left starting from index
    for (let i = index; i < this.size - 1; i++) {
      this.arr[i] = this.arr[i + 1]; // shift element left
    }
    this.size--; // reduce size after deletion
    this.arr.length = this.size; // remove last duplicate element
  }

  printArray() {
    let result = '';
    for (let i = 0; i < this.size; i++) {
      result += this.arr[i];
      if (i !== this.size - 1) result += ' -> ';
    }
    result += ' -> null';
    console.log(result);
  }
}

// Driver code
const arrDel = new ArrayDeletion([1, 2, 3, 4, 5]);
arrDel.deleteAtIndex(2);
arrDel.printArray();

for (let i = index; i < this.size - 1; i++) { this.arr[i] = this.arr[i + 1]; }

shift elements left to overwrite the deleted element

this.size--;

reduce the size to reflect one less element

this.arr.length = this.size;

remove the last duplicate element after shifting

Output

1 -> 2 -> 4 -> 5 -> null

Complexity Analysis

Time: O(n) because we may need to shift all elements after the deleted index once

Space: O(1) because deletion and shifting happen in place without extra storage

vs Alternative: Compared to linked lists where deletion is O(1) if node is known, array deletion requires shifting elements making it O(n)

Edge Cases

delete at index 0 (first element)

All elements shift left, first element removed

DSA Javascript

if (index < 0 || index >= this.size) {

delete at last index

No shifting needed, just reduce size

DSA Javascript

for (let i = index; i < this.size - 1; i++) {

delete with invalid index (negative or too large)

Prints 'Index out of bounds' and does nothing

DSA Javascript

if (index < 0 || index >= this.size) {

When to Use This Pattern

When you need to remove an element from the middle of an array and maintain order, use the shifting pattern to fill the gap left by deletion.

Common Mistakes

Mistake: Not shifting elements after deletion, leaving a gap
Fix: Shift all elements after the deleted index one position left

Mistake: Not reducing the array size after deletion, causing duplicates at the end
Fix: Decrease size and adjust array length to remove duplicates

Mistake: Deleting with an invalid index without checking bounds
Fix: Add index bounds check before deletion

Summary

Deletes an element at a given index by shifting subsequent elements left to fill the gap.

Use when you want to remove an element from an array and keep the order of remaining elements.

The key insight is that deletion in arrays requires shifting elements to maintain continuous storage.

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