Array Deletion at Beginning in DSA Javascript - Build from Scratch

Array Deletion at Beginning

📖 Scenario: You have a list of tasks you want to complete today. As you finish each task, you remove it from the beginning of the list to focus on the next one.

🎯 Goal: Learn how to remove the first item from an array in JavaScript and see the updated list after each removal.

📋 What You'll Learn

Create an array called tasks with exact values: 'Wake up', 'Brush teeth', 'Eat breakfast', 'Go to work'

Create a variable called removedTask to store the task removed from the beginning

Use the shift() method on tasks to remove the first task and assign it to removedTask

Print the updated tasks array after removal

💡 Why This Matters

🌍 Real World

Managing a to-do list where tasks are completed in order and removed from the start.

💼 Career

Understanding array operations like removing items is essential for data manipulation in many programming jobs.

1

Create the initial array of tasks

Create an array called tasks with these exact values in order: 'Wake up', 'Brush teeth', 'Eat breakfast', 'Go to work'

DSA Javascript

// Create the array called tasks with the given values
// Your code here

Hint

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

2

Create a variable to hold the removed task

Create a variable called removedTask and set it to null to prepare for storing the removed task

DSA Javascript

const tasks = ['Wake up', 'Brush teeth', 'Eat breakfast', 'Go to work'];
// Create removedTask variable and set it to null
// Your code here

Hint

Use let to create a variable that can change later.

3

Remove the first task from the array

Use the shift() method on tasks to remove the first task and assign it to removedTask

DSA Javascript

const tasks = ['Wake up', 'Brush teeth', 'Eat breakfast', 'Go to work'];
let removedTask = null;
// Remove the first task from tasks and assign it to removedTask
// Your code here

Hint

The shift() method removes the first item from an array and returns it.

4

Print the updated tasks array

Print the tasks array after removing the first task using console.log(tasks)

DSA Javascript

const tasks = ['Wake up', 'Brush teeth', 'Eat breakfast', 'Go to work'];
let removedTask = null;
removedTask = tasks.shift();
// Print the updated tasks array
// Your code here

Hint

Use console.log(tasks) to see the current tasks after removal.

Practice

1. What does the shift() method do to an array in JavaScript?

easy

A. Adds an element at the end

B. Removes the last element and returns it

C. Adds an element at the beginning

D. Removes the first element and returns it

Solution

1. Step 1: Understand the shift() method

   The shift() method removes the first element from an array and returns that element.

2. Step 2: Compare with other array methods

   pop() removes the last element, unshift() adds at the beginning, and push() adds at the end.

3. Final Answer:

   Removes the first element and returns it -> Option D

4. Quick Check:

   shift() removes first element [OK]

Hint: Remember: shift = remove from start [OK]

Common Mistakes:

• Confusing shift() with pop()
• Thinking shift() adds elements
• Mixing shift() with unshift()

2. Which of the following is the correct syntax to remove the first element from an array arr in JavaScript?

easy

A. arr.shift()

B. arr.delete(0)

C. arr.unshift()

D. arr.pop()

Solution

1. Step 1: Identify the method to remove first element

   The method to remove the first element is shift().

2. Step 2: Check other options

   pop() removes last element, unshift() adds elements at start, and delete is not a valid array method.

3. Final Answer:

   arr.shift() -> Option A

4. Quick Check:

   Use shift() to remove first element [OK]

Hint: Use arr.shift() to remove first element [OK]

Common Mistakes:

• Using pop() instead of shift()
• Trying to use delete() on arrays
• Confusing unshift() with shift()

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

let arr = [10, 20, 30, 40];
let removed = arr.shift();
console.log(arr);
console.log(removed);

medium

A. [20, 30, 40] and 10

B. [10, 20, 30] and 40

C. [20, 30, 40] and 40

D. [10, 20, 30] and 10

Solution

1. Step 1: Apply shift() on the array

   shift() removes the first element (10) from arr and returns it.

2. Step 2: Check the updated array and removed value

   After removal, arr becomes [20, 30, 40], and removed stores 10.

3. Final Answer:

   [20, 30, 40] and 10 -> Option A

4. Quick Check:

   shift() removes first element 10 [OK]

Hint: shift() returns removed first element [OK]

Common Mistakes:

• Expecting last element removed
• Confusing returned value with array
• Not updating array after shift()

4. Find the error in the following code that tries to remove the first element from array nums:

let nums = [5, 10, 15];
nums.remove(0);
console.log(nums);

medium

A. remove() removes last element, not first

B. remove() is not a valid array method

C. remove() requires two arguments

D. Code is correct and works fine

Solution

1. Step 1: Check the method used

   The method remove() does not exist for JavaScript arrays.

2. Step 2: Identify correct method to remove first element

   To remove the first element, use shift() instead of remove().

3. Final Answer:

   remove() is not a valid array method -> Option B

4. Quick Check:

   Use shift() to remove first element, not remove() [OK]

Hint: Use shift(), not remove(), to delete first element [OK]

Common Mistakes:

• Using remove() instead of shift()
• Assuming remove() exists in JS arrays
• Not checking method names carefully

5. Given an array data = [1, 2, 3, 4, 5], you want to remove the first two elements efficiently. Which code snippet correctly achieves this?

hard

A. data.shift(2);

B. data.pop(); data.pop();

C. data.splice(0, 2);

D. data.slice(2);

Solution

1. Step 1: Understand each method's effect

   shift(2) is invalid; shift() removes one element from start and takes no arguments. splice(0, 2) removes two elements starting at index 0 in one call. pop() removes from end, not start. slice(2) returns a new array without first two elements but does not modify original.

2. Step 2: Choose the best method to remove first two elements

   splice(0, 2) removes first two elements efficiently and modifies the original array.

3. Final Answer:

   data.splice(0, 2); -> Option C

4. Quick Check:

   splice(0, 2) removes first two elements [OK]

Hint: Use splice(0, 2) to remove first two elements at once [OK]

Common Mistakes:

• Using pop() which removes from end
• Using slice() which does not modify original array
• Using shift(2) which is invalid