Filter method in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this filter method?

Look at this JavaScript code. What will it print to the console?

Javascript

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(num => num > 3);
console.log(result);

A [4, 5]

B [1, 2, 3]

C []

D [3, 4, 5]

💡 Hint

Filter keeps only items where the condition is true.

The filter method keeps numbers greater than 3, so it returns [4, 5].

❓ Predict Output

intermediate

What does this filter return?

What will be the output of this code snippet?

Javascript

const words = ['apple', 'banana', 'cherry', 'date'];
const filtered = words.filter(word => word.length === 5);
console.log(filtered);

A ['apple', 'banana']

B ['apple']

C ['apple', 'cherry']

D ['banana', 'date']

💡 Hint

Check the length of each word carefully.

Only 'apple' has exactly 5 letters, so the result is ['apple'].

❓ Predict Output

advanced

What is the output of this filter with objects?

What will this code print to the console?

Javascript

const people = [
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 17},
  {name: 'Carol', age: 19}
];
const adults = people.filter(person => person.age >= 18);
console.log(adults);

A [{name: 'Bob', age: 17}]

B [{name: 'Alice', age: 25}]

C [{name: 'Alice', age: 25}, {name: 'Carol', age: 19}]

D []

💡 Hint

Filter keeps people who are 18 or older.

Alice and Carol are 18 or older, so they are included in the result.

❓ Predict Output

advanced

What happens with this filter callback?

What will this code output?

Javascript

const arr = [0, 1, 2, 3];
const filtered = arr.filter(x => x);
console.log(filtered);

A [1, 2, 3]

B [0, 1, 2, 3]

C []

D [0]

💡 Hint

Filter keeps items where the callback returns a truthy value.

0 is falsy, so it is removed. The rest are truthy and kept.

🧠 Conceptual

expert

Which option causes a runtime error?

Which of these filter uses will cause a runtime error when run?

A ['a', 'b', 'c'].filter((x, i) => i > 1)

B [1, 2, 3].filter(x => x > 1)

C [true, false].filter(x => x === true)

D [null, undefined].filter(x => x.length > 0)

💡 Hint

Check if the callback tries to access a property on null or undefined.

Accessing x.length on null or undefined causes a TypeError at runtime.

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