Array Insertion at Beginning in DSA Javascript - Execution Trace

Concept Flow - Array Insertion at Beginning

Start with array

↓

Create space at index 0

↓

Shift all elements right by 1

↓

Insert new element at index 0

↓

Array updated with new element at start

The array elements are shifted right to make space at the start, then the new element is placed at index 0.

Execution Sample

DSA Javascript

let arr = [2, 3, 4];
arr.unshift(1);
console.log(arr);

Inserts 1 at the beginning of the array [2, 3, 4], resulting in [1, 2, 3, 4].

Execution Table

Step	Operation	Array State Before	Action Detail	Array State After
1	Start	[2, 3, 4]	Initial array	[2, 3, 4]
2	Shift elements right	[2, 3, 4]	Move arr[3] = arr[2] (shift last element right)	[2, 3, 4, 4]
3	Shift elements right	[2, 3, 4, 4]	Move arr[2] = arr[1]	[2, 3, 3, 4]
4	Shift elements right	[2, 3, 3, 4]	Move arr[1] = arr[0]	[2, 2, 3, 4]
5	Insert new element	[2, 2, 3, 4]	Place 1 at index 0	[1, 2, 3, 4]
6	Verify insertion	[1, 2, 3, 4]	Shifts complete from end, no data loss	[1, 2, 3, 4]
7	End	[1, 2, 3, 4]	Insertion complete	[1, 2, 3, 4]

💡 All elements shifted right and new element inserted at index 0, array updated.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
arr	[2, 3, 4]	[2, 3, 4, 4]	[2, 3, 3, 4]	[2, 2, 3, 4]	[1, 2, 3, 4]	[1, 2, 3, 4]	[1, 2, 3, 4]

Key Moments - 3 Insights

Why do we need to shift elements before inserting at the beginning?

Because arrays have fixed index positions, shifting elements right frees index 0 to insert the new element without overwriting existing data. See steps 2-4 in execution_table.

Why does the array temporarily have duplicate values during shifting?

During shifting, elements are copied to the next index, causing temporary duplicates until all elements are moved. This is shown in steps 2-4.

Why shift elements starting from the end (right to left)?

Shifting from the end prevents overwriting an element before it is copied to its new position, avoiding data loss. This is shown in steps 2-4.

Visual Quiz - 3 Questions

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

A [2, 2, 3, 4]

B [2, 3, 3, 4]

C [1, 3, 4, 4]

D [1, 2, 3, 4]

💡 Hint

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

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

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

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

If we skip shifting elements, what would happen to the array?

A New element overwrites the first element

B Array size increases automatically

C Elements shift left instead

D Array becomes empty

💡 Hint

Refer to key_moments about why shifting is needed before insertion.

Concept Snapshot

Array Insertion at Beginning:
- Shift all elements right by one index
- Insert new element at index 0
- Array size increases by 1
- Prevents overwriting existing elements
- Use unshift() in JavaScript for simplicity

Full Transcript

This visual trace shows how inserting an element at the beginning of an array works. First, all existing elements are shifted one position to the right to make space at index 0. This causes temporary duplicates during shifting. Then, the new element is placed at index 0, completing the insertion. This process prevents overwriting data and increases the array size by one. The example uses JavaScript's unshift method to perform this operation.

Practice

1. What does the unshift() method do in a JavaScript array?

easy

A. Adds one or more elements to the beginning of the array

B. Removes the first element from the array

C. Adds one or more elements to the end of the array

D. Removes the last element from the array

Solution

1. Step 1: Understand the unshift() method

   The unshift() method adds elements to the start of an array, shifting existing elements to the right.

2. Step 2: Compare with other array methods

   push() adds to the end, shift() removes from the start, and pop() removes from the end.

3. Final Answer:

   Adds one or more elements to the beginning of the array -> Option A

4. Quick Check:

   unshift() adds at start = B [OK]

Hint: Remember: unshift = add at front [OK]

Common Mistakes:

• Confusing unshift() with push()
• Thinking unshift() removes elements
• Mixing unshift() with shift()

2. Which of the following is the correct syntax to insert the value 10 at the beginning of array arr?

easy

A. arr.pushFront(10);

B. arr.addFirst(10);

C. arr.unshift(10);

D. arr.insertAt(0, 10);

Solution

1. Step 1: Recall JavaScript array methods

   JavaScript arrays use unshift() to add elements at the start.

2. Step 2: Check each option

   Only arr.unshift(10); is valid JavaScript syntax for this operation.

3. Final Answer:

   arr.unshift(10); -> Option C

4. Quick Check:

   Correct syntax for start insertion = A [OK]

Hint: Use unshift() to add at start, push() for end [OK]

Common Mistakes:

• Using non-existent methods like addFirst or pushFront
• Confusing unshift() with push()
• Trying to use insertAt which is not a JS array method

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

let arr = [2, 3, 4];
arr.unshift(1);
console.log(arr);

medium

A. [1, 3, 4]

B. [1, 2, 3, 4]

C. [2, 3, 4, 1]

D. [2, 3, 4]

Solution

1. Step 1: Understand unshift effect on array

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

2. Step 2: Trace the array after unshift

   Original array: [2, 3, 4]
   After unshift(1): [1, 2, 3, 4]

3. Final Answer:

   [1, 2, 3, 4] -> Option B

4. Quick Check:

   unshift adds at front = [1, 2, 3, 4] [OK]

Hint: unshift adds element at front, shifts others right [OK]

Common Mistakes:

• Thinking unshift adds at end
• Ignoring that unshift shifts elements
• Expecting original array unchanged

4. Identify the error in the following code that tries to insert 0 at the beginning of array nums:

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

medium

A. Using assignment instead of calling unshift as a function

B. Array nums is not defined

C. unshift cannot add zero

D. Syntax error due to missing parentheses

Solution

1. Step 1: Analyze the assignment to unshift property

   The code assigns 0 to nums.unshift, overwriting the method instead of calling it.

2. Step 2: Correct usage of unshift

   To add 0 at start, call nums.unshift(0); as a function, not assign a value.

3. Final Answer:

   Using assignment instead of calling unshift as a function -> Option A

4. Quick Check:

   unshift must be called, not assigned = A [OK]

Hint: Call unshift() as function, don't assign it a value [OK]

Common Mistakes:

• Assigning value to unshift instead of calling it
• Missing parentheses when calling unshift
• Thinking unshift is a property, not a method

5. Given the array let data = [5, 6, 7];, which code snippet correctly inserts the numbers 2, 3, 4 at the beginning so that the final array is [2, 3, 4, 5, 6, 7]?

hard

A. data.unshift([2, 3, 4]);

B. data.splice(0, 0, [2, 3, 4]);

C. data.push(2, 3, 4);

D. data.unshift(2, 3, 4);

Solution

1. Step 1: Understand unshift with multiple arguments

   The unshift() method can take multiple arguments and adds them all at the start in order.

2. Step 2: Analyze each option's effect

   data.unshift([2, 3, 4]); adds a single array as first element, resulting in nested array.
   data.unshift(2, 3, 4); adds 2, 3, 4 individually at start, producing desired array.
   data.push(2, 3, 4); adds elements at end.
   data.splice(0, 0, [2, 3, 4]); inserts a single array at index 0, nesting again.

3. Final Answer:

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

4. Quick Check:

   unshift multiple args adds all at front = D [OK]

Hint: Pass multiple values to unshift() to add all at start [OK]

Common Mistakes:

• Passing an array instead of separate values to unshift
• Using push() which adds at end
• Using splice() incorrectly causing nested arrays