Array Insertion at Middle Index in DSA Javascript

Mental Model

To insert a new value in the middle of an array, we shift all elements from that position one step to the right to make space.

Analogy: Imagine a row of people standing in line. If someone wants to join in the middle, everyone from that spot moves one step back to make room.

Array before insertion:
[1] -> [2] -> [3] -> [4] -> null
Insert value 99 at index 2 (middle)

Positions:
Index: 0    1    2    3
Value: 1 -> 2 -> 3 -> 4 -> null

Dry Run Walkthrough

Input: array: [1, 2, 3, 4], insert value 99 at index 2

Goal: Insert 99 at index 2 and shift elements right to keep order

Step 1: Start shifting elements from the last index to index 2 one step right

[1] -> [2] -> [3] -> [4] -> null

Why: We need to move elements to make space at index 2

Step 2: Move element at index 3 (4) to index 4

[1] -> [2] -> [3] -> [4] -> [4]

Why: Shift last element right to free index 3

Step 3: Move element at index 2 (3) to index 3

[1] -> [2] -> [3] -> [3] -> [4]

Why: Shift element at insertion index right to free index 2

Step 4: Insert 99 at index 2

[1] -> [2] -> [99] -> [3] -> [4]

Why: Place new value in the freed position

Result:

[1] -> [2] -> [99] -> [3] -> [4] -> null

Annotated Code

DSA Javascript

class ArrayInsertion {
  constructor(arr) {
    this.array = arr;
  }

  insertAtMiddle(value, index) {
    // Shift elements right from the end to index
    for (let i = this.array.length; i > index; i--) {
      this.array[i] = this.array[i - 1]; // shift element right
    }
    this.array[index] = value; // insert new value
  }

  printArray() {
    let result = '';
    for (let i = 0; i < this.array.length; i++) {
      result += this.array[i] + (i < this.array.length - 1 ? ' -> ' : ' -> null');
    }
    console.log(result);
  }
}

// Driver code
const arr = [1, 2, 3, 4];
const arrayInsertion = new ArrayInsertion(arr);
arrayInsertion.insertAtMiddle(99, 2);
arrayInsertion.printArray();

for (let i = this.array.length; i > index; i--) {

move backward from end to index to shift elements right

this.array[i] = this.array[i - 1]; // shift element right

shift element at i-1 to i to free space

this.array[index] = value; // insert new value

insert new value at the freed index

Output

1 -> 2 -> 99 -> 3 -> 4 -> null

Complexity Analysis

Time: O(n) because in the worst case we shift half of the elements to the right

Space: O(1) because insertion is done in place without extra arrays

vs Alternative: Compared to creating a new array and copying elements, this in-place shift saves space but still requires shifting elements which is O(n)

Edge Cases

Insert at index 0 (start of array)

All elements shift right, new value placed at start

DSA Javascript

for (let i = this.array.length; i > index; i--) {

Insert at last index (end of array)

No shifting needed, value added at end

DSA Javascript

for (let i = this.array.length; i > index; i--) {

Insert in empty array

Value inserted at index 0 without shifting

DSA Javascript

for (let i = this.array.length; i > index; i--) {

When to Use This Pattern

When you need to add an element inside an array and keep order, think of shifting elements right to make space before inserting.

Common Mistakes

Mistake: Shifting elements left instead of right, overwriting data
Fix: Shift elements from the end backward to the insertion index to avoid overwriting

Mistake: Not increasing array size before shifting, causing lost elements
Fix: Use array length + 1 index to shift elements safely

Summary

It inserts a new value at a given middle index by shifting elements right to make space.

Use it when you want to add an element inside an array without losing existing data order.

The key insight is to shift elements from the end backward to avoid overwriting before inserting.

Practice

1. What does inserting an element at the middle index of an array mean?

easy

A. Adding the element exactly in the center position of the array

B. Adding the element at the start of the array

C. Adding the element at the end of the array

D. Replacing the first element with the new element

Solution

1. Step 1: Understand array indexing

   Arrays have positions starting from 0 to length-1. The middle index is roughly length/2.

2. Step 2: Define insertion at middle

   Inserting at middle means placing the new element at the middle index, shifting others right.

3. Final Answer:

   Adding the element exactly in the center position of the array -> Option A

4. Quick Check:

   Middle insertion = center position [OK]

Hint: Middle index is array length divided by 2 [OK]

Common Mistakes:

• Confusing middle with start or end
• Replacing element instead of inserting
• Not shifting elements after insertion

2. Which of the following is the correct syntax to insert an element 'x' at the middle index of array 'arr' in JavaScript?

easy

A. arr.insert(Math.floor(arr.length / 2), x);

B. arr.add(Math.floor(arr.length / 2), x);

C. arr.splice(Math.floor(arr.length / 2), 0, x);

D. arr.push(Math.floor(arr.length / 2), x);

Solution

1. Step 1: Identify JavaScript method for insertion

   JavaScript arrays use splice(start, deleteCount, items...) to insert elements.

2. Step 2: Calculate middle index and insert

   Using Math.floor(arr.length / 2) gives middle index; splice with 0 deletes nothing and inserts 'x'.

3. Final Answer:

   arr.splice(Math.floor(arr.length / 2), 0, x); -> Option C

4. Quick Check:

   splice + middle index + 0 delete = insert [OK]

Hint: Use splice with 0 delete count to insert [OK]

Common Mistakes:

• Using non-existent insert or add methods
• Using push which adds only at end
• Not calculating middle index correctly

3. What will be the output of the following code?

const arr = [10, 20, 30, 40];
arr.splice(Math.floor(arr.length / 2), 0, 25);
console.log(arr);

medium

A. [10, 20, 25, 30, 40]

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

C. [25, 10, 20, 30, 40]

D. [10, 20, 30, 40, 25]

Solution

1. Step 1: Calculate middle index

   arr.length = 4, middle index = Math.floor(4/2) = 2.

2. Step 2: Insert 25 at index 2

   Using splice(2, 0, 25) inserts 25 at index 2, shifting elements right.

3. Final Answer:

   [10, 20, 25, 30, 40] -> Option A

4. Quick Check:

   Insert at index 2 shifts right [OK]

Hint: Middle index = floor(length/2), splice inserts at that index [OK]

Common Mistakes:

• Inserting at wrong index
• Appending instead of inserting
• Misunderstanding splice parameters

4. Identify the error in the following code that tries to insert 15 at the middle of array 'nums':

const nums = [5, 10, 20, 25];
nums.insert(nums.length / 2, 15);
console.log(nums);

medium

A. The middle index calculation is incorrect

B. 'insert' is not a valid array method in JavaScript

C. The element 15 should be added using push()

D. The array should be declared with let instead of const

Solution

1. Step 1: Check array method used

   JavaScript arrays do not have an 'insert' method; splice should be used instead.

2. Step 2: Confirm middle index calculation

   nums.length / 2 = 2 is correct, but method is invalid causing error.

3. Final Answer:

   'insert' is not a valid array method in JavaScript -> Option B

4. Quick Check:

   Use splice, not insert [OK]

Hint: Remember: JavaScript arrays use splice, not insert [OK]

Common Mistakes:

• Using non-existent insert method
• Ignoring method errors
• Confusing push with insert

5. Given an array arr = [1, 3, 5, 7, 9], write code to insert the number 4 exactly in the middle so that the array remains sorted. What will be the final array?

hard

A. [1, 3, 5, 7, 9, 4]

B. [1, 3, 5, 4, 7, 9]

C. [4, 1, 3, 5, 7, 9]

D. [1, 3, 4, 5, 7, 9]

Solution

1. Step 1: Find middle index for insertion

   arr.length = 5, middle index = Math.floor(5 / 2) = 2.

2. Step 2: Insert 4 at index 2 using splice

   arr.splice(2, 0, 4) inserts 4 before element 5, keeping array sorted.

3. Final Answer:

   [1, 3, 4, 5, 7, 9] -> Option D

4. Quick Check:

   Insert 4 at index 2 keeps order [OK]

Hint: Insert at floor(length/2) to keep sorted order [OK]

Common Mistakes:

• Inserting at wrong index breaking order
• Appending instead of inserting
• Not using splice correctly