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

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

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

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

Hint

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

Practice

1. What does the JavaScript filter method do?

easy

A. Sorts the array in ascending order

B. Creates a new array with elements that pass a test

C. Changes the original array by removing elements

D. Combines all elements into a single value

Solution

1. Step 1: Understand the purpose of filter

   The filter method tests each element with a function and keeps only those that return true.

2. Step 2: Compare options with filter behavior

   Only Creates a new array with elements that pass a test describes creating a new array with elements that pass the test, which matches filter's behavior.

3. Final Answer:

   Creates a new array with elements that pass a test -> Option B

4. Quick Check:

   filter creates new filtered array = C [OK]

Hint: Filter keeps items passing test, original array stays same [OK]

Common Mistakes:

• Thinking filter changes original array
• Confusing filter with sort or reduce
• Believing filter combines elements

2. Which of the following is the correct syntax to filter an array arr for values greater than 10?

easy

A. arr.filter(x => {x > 10});

B. arr.filter(x > 10);

C. arr.filter(x => x > 10);

D. arr.filter(x => x > 10)();

Solution

1. Step 1: Check arrow function syntax inside filter

   The filter method requires a function that returns true or false. The arrow function must return the condition directly or with a return statement.

2. Step 2: Validate each option's syntax

   arr.filter(x => x > 10); uses correct arrow function syntax returning x > 10. arr.filter(x > 10); misses the function. arr.filter(x => {x > 10}); uses braces but no return, so returns undefined. arr.filter(x => x > 10)(); adds extra parentheses causing error.

3. Final Answer:

   arr.filter(x => x > 10); -> Option C

4. Quick Check:

   Correct arrow function syntax = A [OK]

Hint: Arrow function must return condition inside filter [OK]

Common Mistakes:

• Omitting arrow function syntax
• Using braces without return in arrow function
• Adding extra parentheses after filter call

3. What is the output of the following code?

const nums = [5, 12, 8, 130, 44];
const result = nums.filter(num => num > 10);
console.log(result);

medium

A. [5, 8]

B. []

C. [5, 12, 8, 130, 44]

D. [12, 130, 44]

Solution

1. Step 1: Identify the filter condition

   The filter keeps numbers greater than 10.

2. Step 2: Check each number in the array

   5 (no), 12 (yes), 8 (no), 130 (yes), 44 (yes). So filtered array is [12, 130, 44].

3. Final Answer:

   [12, 130, 44] -> Option D

4. Quick Check:

   Filter > 10 = [12,130,44] [OK]

Hint: Filter keeps only items passing condition [OK]

Common Mistakes:

• Including numbers not greater than 10
• Returning original array instead of filtered
• Confusing filter with map or reduce output

4. Find the error in this code that tries to filter even numbers:

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => { num % 2 === 0 });
console.log(evens);

medium

A. Missing return statement inside arrow function

B. filter method does not exist on arrays

C. num % 2 === 0 is incorrect syntax

D. Array should be declared with let, not const

Solution

1. Step 1: Analyze arrow function with braces

   When using braces in arrow functions, you must explicitly return a value.

2. Step 2: Check the function body

   The function body has expression but no return, so it returns undefined, causing filter to keep no elements.

3. Final Answer:

   Missing return statement inside arrow function -> Option A

4. Quick Check:

   Arrow function with braces needs return [OK]

Hint: Use return inside braces or remove braces in arrow function [OK]

Common Mistakes:

• Forgetting return inside arrow function with braces
• Thinking filter is not an array method
• Misunderstanding modulo operator syntax

5. Given an array of objects:

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 19 },
  { name: 'David', age: 15 }
];

// Filter adults (age 18 or older)
const adults = people.filter(person => person.age >= 18);

console.log(adults);

What will be the output?

hard

A. [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 19 }]

B. [{ name: 'Bob', age: 17 }, { name: 'David', age: 15 }]

C. [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 17 }, { name: 'Charlie', age: 19 }, { name: 'David', age: 15 }]

D. []

Solution

1. Step 1: Understand filter condition on objects

   The filter keeps objects where person.age is 18 or more.

2. Step 2: Check each person's age

   Alice (25) and Charlie (19) meet the condition. Bob (17) and David (15) do not.

3. Final Answer:

   [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 19 }] -> Option A

4. Quick Check:

   Filter adults age >= 18 = Alice, Charlie [OK]

Hint: Filter objects by property condition inside arrow function [OK]

Common Mistakes:

• Filtering by name instead of age
• Including underage people by mistake
• Expecting filter to modify original array