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.