Array Insertion at End in DSA Javascript

Mental Model

Adding a new item to the end of a list means placing it right after the last item.

Analogy: Imagine a line of people waiting to buy tickets. When a new person arrives, they stand at the very end of the line.

[1] -> [2] -> [3] -> null

Dry Run Walkthrough

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

Goal: Add the value 4 to the end of the array

Step 1: Check current array length to find the end position

[1] -> [2] -> [3] -> null

Why: We need to know where the last item is to add after it

Step 2: Place the new value 4 at the position after the last item

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

Why: Inserting at the end means adding after the last element

Step 3: Confirm the array now includes the new value at the end

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

Why: This shows the insertion was successful

Result:

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

Annotated Code

DSA Javascript

class ArrayList {
  constructor() {
    this.array = [];
  }

  insertAtEnd(value) {
    // Add value at the end of the array
    this.array[this.array.length] = value;
  }

  print() {
    // Print array elements with arrows
    let result = '';
    for (let i = 0; i < this.array.length; i++) {
      result += this.array[i];
      if (i !== this.array.length - 1) {
        result += ' -> ';
      }
    }
    result += ' -> null';
    console.log(result);
  }
}

// Driver code
const list = new ArrayList();
list.array = [1, 2, 3];
list.insertAtEnd(4);
list.print();

this.array[this.array.length] = value;

Add new value at the index equal to current length, placing it at the end

for (let i = 0; i < this.array.length; i++) {

Traverse all elements to prepare printing

result += this.array[i];

Add current element to output string

if (i !== this.array.length - 1) { result += ' -> '; }

Add arrow between elements except after last

Output

1 -> 2 -> 3 -> 4 -> null

Complexity Analysis

Time: O(1) because adding at the end uses the array length to place the new item directly

Space: O(1) because no extra space is needed besides the new element

vs Alternative: Compared to inserting at the start which requires shifting all elements (O(n)), insertion at end is faster and simpler

Edge Cases

empty array

The new value becomes the first and only element

DSA Javascript

this.array[this.array.length] = value;

array with one element

The new value is added after the single existing element

DSA Javascript

this.array[this.array.length] = value;

When to Use This Pattern

When you need to add items to a list without disturbing existing order, reach for array insertion at end because it is simple and efficient.

Common Mistakes

Mistake: Trying to insert at a fixed index like 0 instead of using array length
Fix: Use the array's length property to place the new element at the end

Mistake: Using push method without understanding underlying index placement
Fix: Understand that push is a shortcut for insertion at array length index

Summary

It adds a new element to the end of an array.

Use it when you want to grow a list by adding items at the back.

The key insight is that the array length tells you exactly where the end is.

Practice

1. What does the push() method do when used on a JavaScript array?

easy

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

B. Removes the first element from the array

C. Sorts the array in ascending order

D. Reverses the order of elements in the array

Solution

1. Step 1: Understand the purpose of push()

   The push() method is designed to add elements to the end of an array.

2. Step 2: Compare with other array methods

   Other methods like shift() remove elements, sort() orders elements, and reverse() changes order, but push() only adds at the end.

3. Final Answer:

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

4. Quick Check:

   push() adds elements at end [OK]

Hint: Remember: push adds at the end, pop removes from end [OK]

Common Mistakes:

• Confusing push() with pop() which removes elements
• Thinking push() adds elements at the start
• Mixing push() with sort() or reverse()

2. Which of the following is the correct syntax to add the element 5 at the end of array arr?

easy

A. arr.add(5);

B. arr.append(5);

C. arr.insertEnd(5);

D. arr.push(5);

Solution

1. Step 1: Recall JavaScript array methods

   JavaScript arrays use push() to add elements at the end.

2. Step 2: Check each option's validity

   add(), insertEnd(), and append() are not valid JavaScript array methods.

3. Final Answer:

   arr.push(5); -> Option D

4. Quick Check:

   Correct syntax for adding at end is push() [OK]

Hint: Use push() to add elements at array end [OK]

Common Mistakes:

• Using non-existent methods like add() or append()
• Confusing push() with unshift() which adds at start
• Missing parentheses in method call

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

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

medium

A. [1, 2, 3]

B. [4, 1, 2, 3]

C. [1, 2, 3, 4]

D. Error

Solution

1. Step 1: Understand initial array and push operation

   The array starts as [1, 2, 3]. The push(4) adds 4 at the end.

2. Step 2: Determine final array content

   After push, the array becomes [1, 2, 3, 4].

3. Final Answer:

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

4. Quick Check:

   push(4) adds 4 at end [OK]

Hint: push() adds element at end, so array grows rightwards [OK]

Common Mistakes:

• Thinking push adds element at start
• Expecting original array unchanged
• Confusing push with unshift

4. Identify the error in the following code snippet that tries to add 10 at the end of array nums:

let nums = [1, 2, 3];
nums.push = 10;
console.log(nums);

medium

A. Using assignment instead of calling push as a function

B. Array nums is not defined

C. push method does not exist on arrays

D. Missing semicolon after push

Solution

1. Step 1: Analyze the push usage

   The code assigns 10 to nums.push instead of calling nums.push(10).

2. Step 2: Understand consequences of assignment

   This overwrites the push method with a number, so push no longer works as a function.

3. Final Answer:

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

4. Quick Check:

   push must be called as a function, not assigned [OK]

Hint: Always call push() with parentheses to add elements [OK]

Common Mistakes:

• Assigning value to push instead of calling it
• Forgetting parentheses after push
• Assuming push is a property, not a method

5. Given the code below, what will be the final state of arr?

let arr = [10];
arr.push(20);
arr.push(30, 40);
arr.push();

hard

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

B. [10, 20, 30, 40]

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

D. [10, 20, 30]

Solution

1. Step 1: Trace each push call

   Initial array: [10]. arr.push(20) adds 20 -> [10, 20]. arr.push(30, 40) adds both 30 and 40 -> [10, 20, 30, 40]. arr.push() with no arguments adds nothing.

2. Step 2: Confirm final array state

   No undefined or nested arrays are added. Final array is [10, 20, 30, 40].

3. Final Answer:

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

4. Quick Check:

   push() adds all args at end; no args means no change [OK]

Hint: push() adds all arguments; no args means no change [OK]

Common Mistakes:

• Thinking push() with no args adds undefined
• Assuming push(30, 40) adds an array instead of separate elements
• Confusing nested arrays with multiple arguments