Why Array Insertion at End in DSA Typescript?

The Big Idea

What if adding one item didn't mean rewriting the whole list?

The Scenario

Imagine you have a list of your favorite songs written on paper. Every time you discover a new song, you want to add it to the end of your list. Doing this by rewriting the entire list every time is tiring and slow.

The Problem

Manually rewriting or shifting all items to add a new one at the end wastes time and can cause mistakes like losing or mixing up songs. It's hard to keep track as the list grows.

The Solution

Using array insertion at the end lets you quickly add new items without touching the rest. It's like having a magic notebook where you just write the new song at the bottom instantly.

Before vs After

✗ Before

let songs = ['Song1', 'Song2', 'Song3'];
// To add a new song manually:
let newSongs = [];
for(let i = 0; i < songs.length; i++) {
  newSongs[i] = songs[i];
}
newSongs[songs.length] = 'Song4';

✓ After

let songs = ['Song1', 'Song2', 'Song3'];
songs.push('Song4');

What It Enables

This makes growing lists easy and fast, letting you focus on what matters instead of managing the list itself.

Real Life Example

When you add new photos to your phone gallery, they appear instantly at the end without you needing to rearrange all existing photos.

Key Takeaways

Manual addition is slow and error-prone.

Array insertion at end is quick and simple.

It helps manage growing collections efficiently.

Practice

1. What does inserting an element at the end of an array do?

easy

A. Adds the element as the last item in the array

B. Removes the first element of the array

C. Replaces the first element with the new element

D. Sorts the array in ascending order

Solution

1. Step 1: Understand array insertion

   Inserting at the end means adding a new element after the last existing element.

2. Step 2: Effect on array

   The new element becomes the last item, increasing the array size by one.

3. Final Answer:

   Adds the element as the last item in the array -> Option A

4. Quick Check:

   Insertion at end = append last [OK]

Hint: Insertion at end means append after last element [OK]

Common Mistakes:

• Confusing insertion at end with removal
• Thinking insertion replaces elements
• Assuming insertion sorts the array

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

easy

A. arr.insert(5);

B. arr.add(5);

C. arr.push(5);

D. arr.append(5);

Solution

1. Step 1: Identify correct method for insertion at end

   In TypeScript (JavaScript), the method to add at the end is `push()`.

2. Step 2: Check other options

   Methods `add()`, `insert()`, and `append()` do not exist on arrays in TypeScript.

3. Final Answer:

   arr.push(5); -> Option C

4. Quick Check:

   Use push() to add at end [OK]

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

Common Mistakes:

• Using non-existent methods like add or append
• Confusing push() with pop()
• Trying to assign directly to arr[arr.length]

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

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

medium

A. [4, 1, 2, 3]

B. [1, 2, 3, 4]

C. [1, 2, 3]

D. [1, 2, 4, 3]

Solution

1. Step 1: Initial array state

   Array starts as [1, 2, 3].

2. Step 2: Apply push(4)

   push(4) adds 4 at the end, so array becomes [1, 2, 3, 4].

3. Final Answer:

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

4. Quick Check:

   push adds element at end [OK]

Hint: push() adds element at array end [OK]

Common Mistakes:

• Thinking push adds at start
• Confusing push with unshift
• Expecting array to remain unchanged

4. Identify the error in the following TypeScript code that tries to insert `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 method

B. Array nums is not declared properly

C. push method does not exist on arrays

D. Console.log syntax is incorrect

Solution

1. Step 1: Analyze push usage

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

2. Step 2: Effect of assignment

   This overwrites the push method, so no insertion happens and push is lost.

3. Final Answer:

   Using assignment instead of calling push method -> Option A

4. Quick Check:

   push must be called as a function [OK]

Hint: Call push() as a function, don't assign to it [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 an empty array `let data: number[] = [];`, which code snippet correctly inserts numbers 1 to 3 at the end of the array using a loop?

hard

A. for(let i = 0; i < 3; i++) { data.push(i); }

B. for(let i = 1; i <= 3; i++) { data[i] = i; }

C. for(let i = 1; i < 3; i++) { data.push(i); }

D. for(let i = 1; i <= 3; i++) { data.push(i); }

Solution

1. Step 1: Understand loop range and insertion

   We want to insert 1, 2, 3 at the end, so loop from 1 to 3 inclusive.

2. Step 2: Check each option

   A pushes 0,1,2 instead of 1,2,3.
   B assigns directly to indices 1,2,3 leaving index 0 empty.
   C uses push with i from 1 to 3, correctly adding 1,2,3.
   D loops from 1 to 2 only, missing 3.

3. Final Answer:

   for(let i = 1; i <= 3; i++) { data.push(i); } -> Option D

4. Quick Check:

   Loop 1 to 3 with push() adds correct elements [OK]

Hint: Loop from 1 to 3 and push each value [OK]

Common Mistakes:

• Using wrong loop range
• Assigning to array indices instead of push
• Starting loop at 0 instead of 1