Array Insertion at Beginning in DSA Typescript - Build from Scratch

Array Insertion at Beginning

📖 Scenario: You are managing a list of tasks for your daily routine. You want to add new urgent tasks at the beginning of your task list so you can see them first.

🎯 Goal: Build a program that creates an array of tasks, sets up a new urgent task, inserts it at the beginning of the array, and then prints the updated task list.

📋 What You'll Learn

Create an array called tasks with these exact strings: 'Read emails', 'Write report', 'Attend meeting'

Create a string variable called urgentTask with the exact value 'Fix server issue'

Insert the urgentTask at the beginning of the tasks array using the unshift method

Print the tasks array after insertion

💡 Why This Matters

🌍 Real World

In real life, urgent tasks or notifications often need to be shown first in lists or queues. Knowing how to insert items at the beginning of an array helps manage priority.

💼 Career

Many programming jobs require manipulating lists or arrays efficiently. Understanding how to add items at the start is a basic but important skill for data handling and UI updates.

1

Create the initial array of tasks

Create an array called tasks with these exact strings: 'Read emails', 'Write report', 'Attend meeting'

DSA Typescript

// Your code here

Hint

Use square brackets [] to create an array and separate strings with commas.

2

Create the urgent task variable

Create a string variable called urgentTask with the exact value 'Fix server issue'

DSA Typescript

const tasks = ['Read emails', 'Write report', 'Attend meeting'];
// Your code here

Hint

Use const to declare a string variable with the given value.

3

Insert the urgent task at the beginning

Use the unshift method on the tasks array to insert the urgentTask at the beginning

DSA Typescript

const tasks = ['Read emails', 'Write report', 'Attend meeting'];
const urgentTask = 'Fix server issue';
// Your code here

Hint

Call tasks.unshift(urgentTask) to add the urgent task at the start.

4

Print the updated tasks array

Print the tasks array using console.log(tasks) to show the updated list

DSA Typescript

const tasks = ['Read emails', 'Write report', 'Attend meeting'];
const urgentTask = 'Fix server issue';
tasks.unshift(urgentTask);
// Your code here

Hint

Use console.log(tasks) to print the array.

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