Array Insertion at Middle Index in DSA Typescript - 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, move elements right to make space, then insert the new element there.

Execution Sample

DSA Typescript

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

This code inserts 25 into the middle of the array [10, 20, 30, 40].

Execution Table

Step	Operation	Index i	Value Moved	Array State	Pointer Changes	Visual State
1	Calculate middle index	-	-	[10, 20, 30, 40]	mid = 2	[10, 20, 30, 40]
2	Shift element right	4	arr[4] = 40	[10, 20, 30, 40, 40]	i=4	[10, 20, 30, 40, 40]
3	Shift element right	3	arr[3] = 30	[10, 20, 30, 30, 40]	i=3	[10, 20, 30, 30, 40]
4	Insert new value	2	arr[2] = 25	[10, 20, 25, 30, 40]	arr[2] = 25	[10, 20, 25, 30, 40]
5	End	-	-	[10, 20, 25, 30, 40]	-	Insertion complete

💡 Loop ends when i reaches middle index; new value inserted at index 2.

Variable Tracker

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

Key Moments - 3 Insights

Why do we shift elements starting from the end and not from the middle?

Shifting from the end prevents overwriting elements before they are moved. See steps 2 and 3 in execution_table where elements at higher indexes move right first.

Why is the middle index calculated with floor division?

Floor division ensures the middle index is an integer and points to the correct insertion position. Step 1 shows mid = 2 for array length 4.

What happens if we insert without shifting elements?

Without shifting, the element at the middle index would be overwritten, losing data. Steps 2 and 3 show shifting to avoid this.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of arr after step 3?

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

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

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

D [10, 20, 30, 40]

💡 Hint

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

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

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Insert new value' operation in execution_table.

If the array length was 5 instead of 4, what would be the middle index?

A 1

B 3

C 2

D 4

💡 Hint

Middle index is floor of length divided by 2; see variable_tracker for mid calculation.

Concept Snapshot

Array Insertion at Middle Index:
- Calculate middle index as floor(length/2)
- Shift elements right from end to middle to make space
- Insert new element at middle index
- Array size increases by 1
- Prevents overwriting existing elements

Full Transcript

To insert an element in the middle of an array, first find the middle index by dividing the array length by two and rounding down. Then, starting from the end of the array, move each element one position to the right until you reach the middle index. This creates space at the middle index. Finally, place the new element at this middle index. This process keeps all original elements and inserts the new one in the middle without losing data.

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 middle element with a new element

Solution

1. Step 1: Understand array indexing

   Arrays have positions starting from 0 to length-1. The middle index is usually length/2 (rounded down).

2. Step 2: Define insertion at middle

   Inserting at middle means placing the new element at this middle index, shifting elements after it to the 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 = array length divided by 2 [OK]

Common Mistakes:

• Confusing insertion with replacement
• Inserting at start or end instead of middle
• Not shifting elements after insertion

2. Which of the following TypeScript code snippets correctly inserts the value 99 at the middle index of array arr?

easy

A. arr.unshift(99);

B. arr.push(99);

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

D. arr[ Math.floor(arr.length / 2) ] = 99;

Solution

1. Step 1: Understand splice method

   splice(index, 0, value) inserts value at index without removing elements.

2. Step 2: Check other options

   push adds at end, unshift adds at start, direct assignment replaces element.

3. Final Answer:

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

4. Quick Check:

   splice with 0 delete count inserts [OK]

Hint: Use splice(index, 0, value) to insert without removal [OK]

Common Mistakes:

• Using push or unshift instead of splice
• Replacing element instead of inserting
• Incorrect index calculation

3. What is the output of the following TypeScript code?

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

medium

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

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

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

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

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

   splice(2, 0, 25) inserts 25 before element at index 2 (which is 30), shifting elements right.

3. Final Answer:

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

4. Quick Check:

   Inserted 25 at index 2 [OK]

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

Common Mistakes:

• Inserting at wrong index
• Replacing element instead of inserting
• Misunderstanding splice parameters

4. What is the output of the following TypeScript code?

const nums = [1, 2, 3, 4, 5];
const mid = nums.length / 2;
nums.splice(mid, 0, 50);
console.log(nums);

medium

A. [1, 50, 2, 3, 4, 5]

B. [1, 2, 3, 4, 5, 50]

C. [1, 2, 3, 50, 4, 5]

D. [1, 2, 50, 3, 4, 5]

Solution

1. Step 1: Check mid calculation

   nums.length = 5, mid = 5 / 2 = 2.5 (a float).

2. Step 2: Understand splice behavior

   splice coerces 2.5 to integer 2 (ToInteger(2.5) = 2). Inserts 50 at index 2, shifting 3,4,5 right: [1, 2, 50, 3, 4, 5].

3. Final Answer:

   [1, 2, 50, 3, 4, 5] -> Option D

4. Quick Check:

   Float index coerced to 2 [OK]

Hint: Always floor length/2 for middle index [OK]

Common Mistakes:

• Confusing with unshift (insert at start)
• Confusing with push (append at end)
• Inserting at index 3 instead of 2

5. Given an array arr = [5, 10, 15, 20, 25], write a TypeScript function insertMiddle that inserts a given value exactly in the middle of the array. What will be the array after calling insertMiddle(arr, 12)?

hard

A. [5, 10, 12, 15, 20, 25]

B. [5, 10, 15, 12, 20, 25]

C. [12, 5, 10, 15, 20, 25]

D. [5, 10, 15, 20, 25, 12]

Solution

1. Step 1: Calculate middle index for odd length

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

2. Step 2: Insert 12 at index 2

   Using splice(2, 0, 12) inserts 12 before element at index 2 (which is 15), shifting elements right.

3. Final Answer:

   [5, 10, 12, 15, 20, 25] -> Option A

4. Quick Check:

   Inserted 12 at middle index 2 [OK]

Hint: Use Math.floor(length/2) for middle insertion [OK]

Common Mistakes:

• Inserting at wrong index for odd length
• Appending instead of inserting
• Replacing element instead of inserting