Array Insertion at Middle Index in DSA Javascript - Execution Trace

Concept Flow - Array Insertion at Middle Index

Start with original array

↓

Calculate middle index = length // 2

↓

Shift elements right from end to middle

↓

Insert new element at middle index

↓

Array updated with new element in middle

We find the middle index, shift elements right to make space, then insert the new element there.

Execution Sample

DSA Javascript

let arr = [10, 20, 30, 40];
let mid = Math.floor(arr.length / 2);
let val = 25;
for(let i = arr.length; i > mid; i--) {
  arr[i] = arr[i-1];
}
arr[mid] = val;

Insert 25 into the middle of array [10, 20, 30, 40] by shifting elements right.

Execution Table

Step	Operation	Index i	Array State	Pointer Changes	Visual State
1	Calculate middle index	-	[10, 20, 30, 40]	mid = 2	[10, 20, 30, 40]
2	Start shifting elements right	i=4	[10, 20, 30, 40, _]	arr[4] = arr[3]	[10, 20, 30, 40, 40]
3	Shift element right	i=3	[10, 20, 30, 40, 40]	arr[3] = arr[2]	[10, 20, 30, 30, 40]
4	Stop shifting when i=2 (middle)	-	[10, 20, 30, 30, 40]	-	[10, 20, 30, 30, 40]
5	Insert new value at middle	mid=2	[10, 20, 25, 30, 40]	arr[2] = 25	[10, 20, 25, 30, 40]
6	End	-	[10, 20, 25, 30, 40]	-	[10, 20, 25, 30, 40]

💡 Loop ends when i reaches middle index; insertion completes.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
arr	[10, 20, 30, 40]	[10, 20, 30, 40]	[10, 20, 30, 40, 40]	[10, 20, 30, 30, 40]	[10, 20, 30, 30, 40]	[10, 20, 25, 30, 40]	[10, 20, 25, 30, 40]
mid	-	2	2	2	2	2	2
i	-	-	4	3	2	-	-
val	-	25	25	25	25	25	25

Key Moments - 3 Insights

Why do we start shifting elements from the end of the array and not from the middle?

Starting from the end prevents overwriting elements before they are moved, as shown in steps 2 and 3 where elements are shifted right safely.

Why does the loop stop when i equals the middle index?

Because the middle index is where we want to insert the new element, so shifting stops before overwriting that position (step 4).

What happens if the array length is odd?

The middle index calculation uses floor division, so the new element is inserted just after the middle element, maintaining order.

Visual Quiz - 3 Questions

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

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

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

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

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

💡 Hint

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

At which step is the new value 25 inserted into the array?

A Step 5

B Step 3

C Step 2

D Step 4

💡 Hint

Look for the operation 'Insert new value at middle' in the execution_table.

If the array was [10, 20, 30] instead, what would be the middle index calculated?

A 2

B 0

C 1

D 3

💡 Hint

Middle index is floor of length divided by 2; check variable_tracker for 'mid'.

Concept Snapshot

Array Insertion at Middle Index:
1. Calculate middle index as floor(length/2).
2. Shift elements right from end to middle to make space.
3. Insert new element at middle index.
4. Array size increases by 1.
5. Shifting from end prevents overwriting data.

Full Transcript

This visual trace shows how to insert an element into the middle of an array. First, we calculate the middle index by dividing the array length by two and rounding down. Then, starting from the end of the array, we shift each element one position to the right until we reach the middle index. This creates space for the new element. Finally, we insert the new value at the middle index. The array size increases by one, and the order of elements is preserved. The key is shifting from the end to avoid overwriting elements before moving them.

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