Filter method in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to filter out numbers less than 5 from the array.

Javascript

const numbers = [1, 4, 6, 8];
const filtered = numbers.filter(num => num [1] 5);
console.log(filtered);

Drag options to blanks, or click blank then click option'

A===

B>

C<

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' will keep numbers less than 5, which is the opposite.

Using '===' or '!==' compares equality, not greater or less.

The filter keeps numbers greater than 5, so we use '>' operator.

2fill in blank

medium

Complete the code to filter only even numbers from the array.

Javascript

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n [1] 2 === 0);
console.log(evens);

Drag options to blanks, or click blank then click option'

A%

B*

C/

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/' divides but does not check remainder.

Using '*' or '+' does not help check even numbers.

The modulus operator '%' gives the remainder. Even numbers have remainder 0 when divided by 2.

3fill in blank

hard

Fix the error in the filter callback to keep strings longer than 3 characters.

Javascript

const words = ['cat', 'lion', 'dog', 'elephant'];
const longWords = words.filter(word => word.length [1] 3);
console.log(longWords);

Drag options to blanks, or click blank then click option'

A>

B<

C===

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' keeps shorter words, which is wrong here.

Using '===' or '!==' checks equality, not length comparison.

We want words longer than 3, so use '>' operator to compare length.

4fill in blank

hard

Fill both blanks to filter numbers divisible by 3 from the array.

Javascript

const arr = [3, 4, 6, 7, 9];
const divisibleByThree = arr.filter(num => num [1] 3 [2] 0);
console.log(divisibleByThree);

Drag options to blanks, or click blank then click option'

A%

B===

C!==

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!== 0' keeps numbers not divisible by 3.

Using '>' does not check divisibility.

Use '%' to get remainder and '===' to check if remainder is zero for divisibility.

5fill in blank

hard

Fill all three blanks to filter words starting with letter 'a' (case insensitive).

Javascript

const words = ['Apple', 'banana', 'Avocado', 'cherry'];
const aWords = words.filter(word => word.[1](0).[2]() [3] 'a');
console.log(aWords);

Drag options to blanks, or click blank then click option'

AtoLowerCase

BtoUpperCase

C===

DcharAt

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toUpperCase' on the whole word instead of the first letter.

Not converting case leads to missing words starting with uppercase 'A'.

Use 'charAt(0)' to get first letter, then 'toLowerCase()' to compare ignoring case.

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