Common array operations in Javascript - Mini Project: Build & Apply

Common array operations

📖 Scenario: You are working on a small app that manages a list of fruits. You need to perform some common tasks like creating the list, adding a new fruit, filtering fruits by length, and showing the final list.

🎯 Goal: Build a program that creates an array of fruits, adds a new fruit, filters fruits with names longer than 5 letters, and prints the filtered list.

📋 What You'll Learn

Create an array called fruits with the exact values: 'apple', 'banana', 'cherry', 'date', 'fig'

Create a variable called newFruit and set it to the string 'grapefruit'

Use the push method on fruits to add newFruit

Create a new array called longFruits that contains only fruits with names longer than 5 letters

Print the longFruits array using console.log

💡 Why This Matters

🌍 Real World

Managing lists of items like fruits, products, or tasks is common in apps. Knowing how to add, filter, and display items is very useful.

💼 Career

Many programming jobs require working with arrays or lists to handle data. These basic operations are foundational skills.

1

Create the initial array of fruits

Create an array called fruits with these exact values: 'apple', 'banana', 'cherry', 'date', 'fig'

Javascript

# Create the array fruits with the given fruits
// Your code here

Hint

Use square brackets [] to create an array and separate the fruit names with commas.

2

Add a new fruit to the array

Create a variable called newFruit and set it to the string 'grapefruit'

Javascript

const fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
// Create newFruit variable and set it to 'grapefruit'
// Your code here

Hint

Use const newFruit = 'grapefruit'; to create the variable.

3

Add the new fruit to the fruits array

Use the push method on fruits to add the newFruit variable

Javascript

const fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
const newFruit = 'grapefruit';
// Add newFruit to fruits array
// Your code here

Hint

Use fruits.push(newFruit); to add the new fruit to the array.

4

Filter and print fruits with names longer than 5 letters

Create a new array called longFruits that contains only fruits from fruits with names longer than 5 letters using the filter method. Then print longFruits using console.log

Javascript

const fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];
const newFruit = 'grapefruit';
fruits.push(newFruit);
// Create longFruits with fruits longer than 5 letters
// Print longFruits
// Your code here

Hint

Use fruits.filter(fruit => fruit.length > 5) to get fruits with names longer than 5 letters.

Use console.log(longFruits); to print the result.

Practice

1. Which method adds a new item to the end of a JavaScript array?

easy

A. shift()

B. pop()

C. push()

D. unshift()

Solution

1. Step 1: Understand array methods for adding/removing items

   push() adds items to the end, pop() removes from the end, shift() removes from the start, unshift() adds to the start.

2. Step 2: Identify the method that adds to the end

   push() is the method that adds new items at the end of the array.

3. Final Answer:

   push() -> Option C

4. Quick Check:

   push() adds item at end [OK]

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

Common Mistakes:

• Confusing push() with pop()
• Using shift() to add items
• Using unshift() to add at end

2. Which of the following is the correct syntax to remove the first item from an array named arr?

easy

A. arr.shift()

B. arr.unshift()

C. arr.push()

D. arr.pop()

Solution

1. Step 1: Recall array methods for removing items

   pop() removes last item, shift() removes first item, push() adds last, unshift() adds first.

2. Step 2: Choose method that removes first item

   shift() removes the first item from the array.

3. Final Answer:

   arr.shift() -> Option A

4. Quick Check:

   shift() removes first item [OK]

Hint: shift() removes first, pop() removes last [OK]

Common Mistakes:

• Using pop() to remove first item
• Using push() or unshift() to remove items
• Confusing shift() with unshift()

3. What is the output of the following code?

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana');
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits);

medium

A. ['apple', 'banana', 'cherry']

B. ['banana', 'cherry']

C. ['apple']

D. ['apple', 'cherry']

Solution

1. Step 1: Find the index of 'banana' in the array

   indexOf('banana') returns 1 because 'banana' is at position 1.

2. Step 2: Remove 'banana' using splice

   splice(1, 1) removes 1 item at index 1, so 'banana' is removed.

3. Final Answer:

   ['apple', 'cherry'] -> Option D

4. Quick Check:

   Removed 'banana' from array [OK]

Hint: indexOf finds position, splice removes item at that position [OK]

Common Mistakes:

• Not checking index before splice
• Using splice with wrong index
• Expecting splice to return new array

4. The following code is intended to remove 'orange' from the array, but it doesn't work as expected. What is the error?

const colors = ['red', 'green', 'blue'];
const index = colors.indexOf('orange');
colors.splice(index, 1);
console.log(colors);

medium

A. indexOf returns -1 if item not found, causing splice to remove last item

B. splice() is used incorrectly; it should be pop()

C. indexOf should be replaced with includes()

D. splice() cannot remove items by index

Solution

1. Step 1: Check indexOf result for 'orange'

   Since 'orange' is not in the array, indexOf returns -1.

2. Step 2: Understand splice behavior with negative index

   splice(-1, 1) removes the last item, so 'blue' is removed unexpectedly.

3. Final Answer:

   indexOf returns -1 if item not found, causing splice to remove last item -> Option A

4. Quick Check:

   Check index before splice to avoid removing wrong item [OK]

Hint: Check indexOf result before splice to avoid errors [OK]

Common Mistakes:

• Not checking if index is -1
• Using includes() instead of indexOf for index
• Assuming splice can't remove by index

5. Given an array nums = [1, 2, 3, 4, 5], which code snippet correctly removes all even numbers from the array?

hard

A. nums = nums.filter(n => n % 2 === 0);

B. nums = nums.filter(n => n % 2 !== 0);

C. nums.splice(1, 2);

D. nums.pop(); nums.pop();

Solution

1. Step 1: Understand filtering even numbers

   To remove even numbers, keep only numbers where n % 2 !== 0 (odd numbers).

2. Step 2: Check each option

   nums.filter(n => n % 2 !== 0) keeps odd numbers, removing all evens. nums.filter(n => n % 2 === 0) keeps evens. nums.splice(1, 2) removes items at fixed indexes. nums.pop() twice removes only the last two items.

3. Final Answer:

   nums = nums.filter(n => n % 2 !== 0); -> Option B

4. Quick Check:

   filter odd numbers to remove even [OK]

Hint: Use filter with condition to keep desired items [OK]

Common Mistakes:

• Using filter condition backwards
• Using splice without index knowledge
• Using pop to remove specific items