Why Array Insertion at Middle Index in DSA Typescript?

The Big Idea

What if you could add anything anywhere in your list instantly without rewriting everything?

The Scenario

Imagine you have a list of your favorite songs on a paper. You want to add a new song right in the middle. You have to erase some songs, rewrite the list, and it takes a lot of time and effort.

The Problem

Manually shifting all songs after the middle to make space is slow and easy to mess up. You might lose a song or write them in the wrong order. It's tiring and error-prone.

The Solution

Using array insertion at the middle index lets you add the new song directly where you want without rewriting the whole list. The computer handles moving the other songs smoothly and quickly.

Before vs After

✗ Before

let songs = ['A', 'B', 'C', 'D'];
// Manually shift elements to insert 'X' at index 2
songs[4] = songs[3];
songs[3] = songs[2];
songs[2] = 'X';

✓ After

let songs = ['A', 'B', 'C', 'D'];
songs.splice(2, 0, 'X');

What It Enables

You can easily add new items anywhere in your list, making your data flexible and organized without hassle.

Real Life Example

When editing a playlist on your phone, you want to add a new song right in the middle without deleting or rewriting the whole list. Array insertion at the middle index does exactly that behind the scenes.

Key Takeaways

Manual insertion is slow and error-prone because you must move elements yourself.

Array insertion at middle index automates shifting elements to make space.

This makes adding items anywhere in a list easy and reliable.

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