Filter method in Javascript - Mini Project: Build & Apply

Filter Method

📖 Scenario: You are working on a small online store. You have a list of products with their prices. You want to find only the products that cost less than $20 to show a special discount section.

🎯 Goal: Build a program that filters the list of products to keep only those with a price less than $20 using the filter method.

📋 What You'll Learn

Create an array called products with objects containing name and price properties.

Create a variable called maxPrice and set it to 20.

Use the filter method on products to create a new array called affordableProducts with products priced less than maxPrice.

Print the affordableProducts array to the console.

💡 Why This Matters

🌍 Real World

Filtering lists of items is common in online stores, apps, and data processing to show only relevant information to users.

💼 Career

Knowing how to use the filter method helps you work with data arrays efficiently, a key skill for frontend and backend developers.

1

Create the products array

Create an array called products with these exact objects: { name: 'Pen', price: 5 }, { name: 'Notebook', price: 15 }, { name: 'Backpack', price: 45 }, { name: 'Pencil', price: 3 }, { name: 'Calculator', price: 25 }.

Javascript

// Your code here

Need a hint?

Use square brackets [] to create an array. Each product is an object with name and price.

2

Set the maximum price

Create a variable called maxPrice and set it to the number 20.

Javascript

const products = [
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 15 },
  { name: 'Backpack', price: 45 },
  { name: 'Pencil', price: 3 },
  { name: 'Calculator', price: 25 }
];
// Your code here

Need a hint?

Use const maxPrice = 20; to create the variable.

3

Filter affordable products

Use the filter method on products to create a new array called affordableProducts that contains only products with a price less than maxPrice.

Javascript

const products = [
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 15 },
  { name: 'Backpack', price: 45 },
  { name: 'Pencil', price: 3 },
  { name: 'Calculator', price: 25 }
];

const maxPrice = 20;
// Your code here

Need a hint?

Use products.filter(product => product.price < maxPrice) to get the filtered array.

4

Print the filtered products

Print the affordableProducts array to the console using console.log.

Javascript

const products = [
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 15 },
  { name: 'Backpack', price: 45 },
  { name: 'Pencil', price: 3 },
  { name: 'Calculator', price: 25 }
];

const maxPrice = 20;

const affordableProducts = products.filter(product => product.price < maxPrice);
// Your code here

Need a hint?

Use console.log(affordableProducts); to print the filtered list.