Filter method in Javascript - Step-by-Step Execution

Concept Flow - Filter method

Start with array

↓

Check each element

↓

Apply condition function

↓

Keep element

↓

Build new filtered array

↓

Return new array

The filter method checks each element in an array with a condition. If true, it keeps the element; if false, it skips it. It returns a new array with only the elements that passed.

Execution Sample

Javascript

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

This code filters the numbers array to keep only even numbers and prints the new array.

Execution Table

Step	Element (n)	Condition (n % 2 === 0)	Result	New Array State
1	1	1 % 2 === 0 → false	Discard	[]
2	2	2 % 2 === 0 → true	Keep	[2]
3	3	3 % 2 === 0 → false	Discard	[2]
4	4	4 % 2 === 0 → true	Keep	[2, 4]
5	5	5 % 2 === 0 → false	Discard	[2, 4]

💡 All elements checked; filter returns [2, 4]

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
numbers	[1,2,3,4,5]	[1,2,3,4,5]	[1,2,3,4,5]	[1,2,3,4,5]	[1,2,3,4,5]	[1,2,3,4,5]	[1,2,3,4,5]
evens	[]	[]	[2]	[2]	[2,4]	[2,4]	[2,4]

Key Moments - 3 Insights

Why does the original array 'numbers' not change after filter?

Because filter creates a new array with elements that pass the condition. It does not modify the original array, as shown in variable_tracker where 'numbers' stays the same.

What happens if the condition is false for an element?

The element is discarded and not added to the new array. See execution_table rows 1, 3, and 5 where elements 1, 3, and 5 are discarded.

Does filter include elements that return true or false from the condition?

Filter includes only elements where the condition returns true. This is shown in execution_table where only elements 2 and 4 are kept.

Visual Quiz - 3 Questions

Look at the execution table, what is the new array state after step 4?

A [1, 2, 3, 4]

B [2, 4]

C [4]

D [2]

💡 Hint

Check the 'New Array State' column at step 4 in the execution_table.

At which step does the condition first return true?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Condition' column in execution_table to find the first true result.

If the condition was changed to 'n > 3', what would be the new array after step 5?

A [4, 5]

B [1, 2, 3]

C [2, 4]

D [1, 3, 5]

💡 Hint

Think about which numbers in [1,2,3,4,5] are greater than 3.

Concept Snapshot

Filter method syntax: array.filter(element => condition)
Returns a new array with elements passing the condition.
Original array stays unchanged.
Condition function runs on each element.
Only elements where condition is true are kept.

Full Transcript

The filter method in JavaScript takes an array and checks each element with a condition function. If the condition returns true, the element is kept in a new array. If false, it is skipped. The original array does not change. For example, filtering even numbers from [1,2,3,4,5] results in [2,4]. This process is step-by-step: check element, apply condition, keep or discard, build new array, then return it.

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