Array Insertion at Beginning in DSA Javascript

Mental Model

To add a new item at the start of an array, we shift all existing items one step to the right and place the new item at the first position.

Analogy: Imagine a line of people waiting to enter a room. If a new person wants to enter first, everyone else steps back one spot to make space at the front.

Index: 0   1   2   3   4
Array: [1]->[2]->[3]->[4]->null

Dry Run Walkthrough

Input: array: [1, 2, 3, 4], insert value 0 at beginning

Goal: Insert 0 at the start so the array becomes [0, 1, 2, 3, 4]

Step 1: Shift element at index 3 (4) to index 4

[1]->[2]->[3]->[4]->[4]

Why: Make space at the beginning by moving last element one step right

Step 2: Shift element at index 2 (3) to index 3

[1]->[2]->[3]->[3]->[4]

Why: Continue shifting elements right to free index 0

Step 3: Shift element at index 1 (2) to index 2

[1]->[2]->[2]->[3]->[4]

Why: Keep shifting elements right

Step 4: Shift element at index 0 (1) to index 1

[1]->[1]->[2]->[3]->[4]

Why: Last shift to free index 0

Step 5: Insert new value 0 at index 0

[0]->[1]->[2]->[3]->[4]

Why: Place new element at the beginning

Result:

Final array: [0]->[1]->[2]->[3]->[4]

Annotated Code

DSA Javascript

class ArrayInsertion {
  constructor(arr) {
    this.arr = arr;
  }

  insertAtBeginning(value) {
    // Shift elements right to make space at index 0
    for (let i = this.arr.length - 1; i >= 0; i--) {
      this.arr[i + 1] = this.arr[i]; // move element one step right
    }
    this.arr[0] = value; // insert new value at start
  }

  printArray() {
    let result = '';
    for (let i = 0; i < this.arr.length; i++) {
      result += `[${this.arr[i]}]`;
      if (i !== this.arr.length - 1) result += '->';
    }
    result += '\n';
    console.log(result);
  }
}

// Driver code
const arrObj = new ArrayInsertion([1, 2, 3, 4]);
arrObj.insertAtBeginning(0);
arrObj.printArray();

for (let i = this.arr.length - 1; i >= 0; i--) { this.arr[i + 1] = this.arr[i]; }

Shift all elements one position to the right to free index 0

this.arr[0] = value;

Insert the new value at the beginning of the array

Output

[0]->[1]->[2]->[3]->[4]

Complexity Analysis

Time: O(n) because we must move all n elements one step to the right

Space: O(1) because insertion is done in place without extra arrays

vs Alternative: Using a linked list would allow O(1) insertion at beginning, but arrays require shifting elements making it O(n)

Edge Cases

empty array

Inserting at beginning simply places the new element at index 0 without shifting

DSA Javascript

for (let i = this.arr.length - 1; i >= 0; i--) { this.arr[i + 1] = this.arr[i]; }

array with one element

The single element shifts right, new element placed at index 0

DSA Javascript

for (let i = this.arr.length - 1; i >= 0; i--) { this.arr[i + 1] = this.arr[i]; }

When to Use This Pattern

When you need to add an element at the start of an array and must keep order, use shifting elements right to make space.

Common Mistakes

Mistake: Overwriting elements without shifting causes data loss
Fix: Always shift elements from the end towards the start to avoid overwriting before moving

Mistake: Starting shift loop from index 0 instead of end
Fix: Start shifting from the last index down to 0 to preserve data

Summary

Inserts a new element at the start of an array by shifting existing elements right.

Use when you want to add an item at the beginning but must keep the order of existing items.

The key is to move elements from the end backward to avoid overwriting data.

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