Modifying arrays in Javascript - Mini Project: Build & Apply

Modifying arrays

📖 Scenario: You are managing a small online store's product list. You want to update the list by adding new products and removing old ones.

🎯 Goal: Build a simple JavaScript program that starts with an initial array of products, adds a new product, removes a discontinued product, and then shows the updated list.

📋 What You'll Learn

Create an array called products with the exact values: 'apple', 'banana', 'carrot'

Create a variable called newProduct and set it to the string 'date'

Add the newProduct to the end of the products array

Remove the product 'banana' from the products array

Print the final products array

💡 Why This Matters

🌍 Real World

Managing product lists is common in online stores and inventory systems where items are added or removed regularly.

💼 Career

Knowing how to modify arrays is essential for frontend and backend developers working with lists of data.

1

Create the initial products array

Create an array called products with these exact values: 'apple', 'banana', 'carrot'

Javascript

# Create the products array with 'apple', 'banana', 'carrot'
// Your code here

Need a hint?

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

2

Add a new product variable

Create a variable called newProduct and set it to the string 'date'

Javascript

const products = ['apple', 'banana', 'carrot'];
// Create newProduct variable and set it to 'date'
// Your code here

Need a hint?

Use const to create a variable and assign the string 'date'.

3

Modify the products array

Add the newProduct to the end of the products array using push, then remove the product 'banana' from the products array using splice

Javascript

const products = ['apple', 'banana', 'carrot'];
const newProduct = 'date';
// Add newProduct to products
// Remove 'banana' from products
// Your code here

Need a hint?

Use push to add an item and splice with the index of 'banana' to remove it.

4

Display the updated products array

Write console.log(products) to print the updated products array

Javascript

const products = ['apple', 'banana', 'carrot'];
const newProduct = 'date';
products.push(newProduct);
const bananaIndex = products.indexOf('banana');
if (bananaIndex !== -1) {
    products.splice(bananaIndex, 1);
}
// Print the products array
// Your code here

Need a hint?

Use console.log(products) to see the final list in the console.