Array Insertion at Beginning in DSA Typescript - Execution Trace

Concept Flow - Array Insertion at Beginning

Create new element

↓

Shift all elements right by 1

↓

Insert new element at index 0

↓

Array updated with new element at start

To insert at the beginning, first shift all elements one step right, then place the new element at index 0.

Execution Sample

DSA Typescript

let arr = [10, 20, 30];
let newElement = 5;
arr.unshift(newElement);
console.log(arr);

This code inserts 5 at the start of the array [10, 20, 30], resulting in [5, 10, 20, 30].

Execution Table

Step	Operation	Array State Before	Action Detail	Array State After
1	Start	[10, 20, 30]	Initial array	[10, 20, 30]
2	Create new element	[10, 20, 30]	New element = 5	[10, 20, 30]
3	Shift elements right	[10, 20, 30]	Move 30 to index 3	[10, 20, 30, 30]
4	Shift elements right	[10, 20, 30, 30]	Move 20 to index 2	[10, 20, 20, 30]
5	Shift elements right	[10, 20, 20, 30]	Move 10 to index 1	[10, 10, 20, 30]
6	Insert new element	[10, 10, 20, 30]	Place 5 at index 0	[5, 10, 20, 30]
7	End	[5, 10, 20, 30]	Insertion complete	[5, 10, 20, 30]

💡 All elements shifted right, new element inserted at index 0, operation complete.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	After Step 6	Final
arr	[10, 20, 30]	[10, 20, 30, 30]	[10, 20, 20, 30]	[10, 10, 20, 30]	[5, 10, 20, 30]	[5, 10, 20, 30]
newElement	5	5	5	5	5	5

Key Moments - 3 Insights

Why do we shift elements from the end towards the beginning instead of the other way?

Shifting from the end prevents overwriting elements before they are moved, as shown in steps 3 to 5 in the execution_table.

What happens if the array is empty before insertion?

If empty, no shifting is needed; the new element is simply placed at index 0, similar to step 6 but without prior shifts.

Why does the array size increase after insertion?

Because inserting at the beginning adds a new element, the array length grows by one, as seen after step 3 when the array gains an extra slot.

Visual Quiz - 3 Questions

Look at the execution_table, what is the array state after step 4?

A [10, 20, 30, 30]

B [10, 20, 20, 30]

C [10, 10, 20, 30]

D [5, 10, 20, 30]

💡 Hint

Check the 'Array State After' column for step 4 in the execution_table.

At which step is the new element placed at index 0?

A Step 3

B Step 5

C Step 6

D Step 7

💡 Hint

Look for the operation 'Insert new element' in the execution_table.

If the array was empty initially, which steps would be skipped?

A Steps 3 to 5

B Step 6 only

C Step 2 only

D No steps skipped

💡 Hint

Refer to key_moments about shifting elements when the array is empty.

Concept Snapshot

Array Insertion at Beginning:
- Shift all elements right by one position starting from the end
- Insert new element at index 0
- Array size increases by 1
- Prevents overwriting by shifting backwards
- Use array.unshift() in TypeScript for simplicity

Full Transcript

To insert an element at the beginning of an array, first create the new element. Then shift all existing elements one position to the right, starting from the last element to avoid overwriting. After shifting, place the new element at index 0. This increases the array size by one. The process is shown step-by-step in the execution_table, with the array state changing after each shift and insertion. If the array is empty, no shifting is needed, and the new element is placed directly at index 0.

Practice

1. What does inserting an element at the beginning of an array do to the existing elements?

easy

A. Replaces the first element with the new element

B. Deletes the last element of the array

C. Shifts all existing elements one position to the right

D. Leaves the array unchanged

Solution

1. Step 1: Understand array insertion at beginning

   When a new element is inserted at the start, all existing elements move one step to the right to make space.

2. Step 2: Effect on existing elements

   This shifting means the first element moves to second position, second to third, and so on.

3. Final Answer:

   Shifts all existing elements one position to the right -> Option C

4. Quick Check:

   Insert at start shifts elements right [OK]

Hint: New start element pushes others right [OK]

Common Mistakes:

• Thinking insertion replaces first element
• Assuming array size decreases
• Believing array stays unchanged

2. Which of the following is the correct TypeScript syntax to insert an element `5` at the beginning of array `arr`?

easy

A. arr.unshift(5);

B. arr.addFirst(5);

C. arr.insert(0, 5);

D. arr.push(5);

Solution

1. Step 1: Recall array methods for insertion

   In TypeScript (JavaScript), `unshift` adds elements at the start of an array.

2. Step 2: Check other options

   `push` adds at the end, `insert` and `addFirst` are not valid array methods.

3. Final Answer:

   arr.unshift(5); -> Option A

4. Quick Check:

   Use unshift() to add at beginning [OK]

Hint: Use unshift() to add at start [OK]

Common Mistakes:

• Using push() which adds at the end
• Using non-existent methods like insert()
• Confusing unshift() with pop()

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

let arr = [10, 20, 30];
arr.unshift(5);
console.log(arr);

medium

A. [10, 20, 30, 5]

B. [5, 10, 20, 30]

C. [5, 20, 30]

D. [10, 5, 20, 30]

Solution

1. Step 1: Understand unshift effect

   unshift(5) adds 5 at the start, shifting existing elements right.

2. Step 2: Resulting array

   Original [10, 20, 30] becomes [5, 10, 20, 30].

3. Final Answer:

   [5, 10, 20, 30] -> Option B

4. Quick Check:

   unshift adds at front [OK]

Hint: unshift adds element at front [OK]

Common Mistakes:

• Thinking unshift adds at end
• Misplacing the new element in the array
• Confusing unshift with push

4. Identify the error in the following TypeScript code that tries to insert `100` at the beginning of array `nums`.

let nums = [1, 2, 3];
nums.add(0, 100);
console.log(nums);

medium

A. `add` is not a valid method for arrays

B. `console.log` is used incorrectly

C. Array 'nums' is not declared properly

D. The element 100 cannot be added to arrays

Solution

1. Step 1: Check array method usage

   Arrays in TypeScript do not have an `add` method; insertion at beginning uses `unshift`.

2. Step 2: Validate other parts

   Declaration and console.log are correct; adding 100 is allowed.

3. Final Answer:

   `add` is not a valid method for arrays -> Option A

4. Quick Check:

   Use unshift(), not add() [OK]

Hint: Use unshift(), not add() for insertion [OK]

Common Mistakes:

• Using non-existent add() method
• Thinking console.log is wrong
• Believing arrays can't hold numbers

5. Given an empty array `let data: number[] = [];`, which sequence of operations will result in the array `[3, 2, 1]` by inserting elements only at the beginning?

hard

A. data.unshift(1); data.unshift(2); data.unshift(3);

B. data.push(1); data.push(2); data.push(3);

C. data.push(3); data.unshift(2); data.push(1);

D. data.unshift(3); data.unshift(2); data.unshift(1);

Solution

1. Step 1: Understand insertion at beginning

   Each unshift adds element at front, pushing existing elements right.

2. Step 2: Trace operations

   Starting empty: unshift(3) -> [3], unshift(2) -> [2,3], unshift(1) -> [1,2,3].

3. Final Answer:

   data.unshift(3); data.unshift(2); data.unshift(1); -> Option D

4. Quick Check:

   Insert in reverse order with unshift [OK]

Hint: Insert last element first with unshift [OK]

Common Mistakes:

• Using push() which adds at end
• Inserting elements in wrong order
• Mixing push and unshift incorrectly