Filter method in Javascript - Time & Space Complexity

Time Complexity: Filter method

O(n)

Understanding Time Complexity

We want to understand how the time it takes to run the filter method changes as the list gets bigger.

How does the work grow when we filter more items?

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

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

This code creates a new list with only the even numbers from the original list.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: Checking each number to see if it is even.
• How many times: Once for every item in the list.

How Execution Grows With Input

As the list gets bigger, the filter method checks more items one by one.

Input Size (n)	Approx. Operations
10	10 checks
100	100 checks
1000	1000 checks

Pattern observation: The number of checks grows directly with the size of the list.

Final Time Complexity

Time Complexity: O(n)

This means the time to filter grows in a straight line with the number of items.

Common Mistake

[X] Wrong: "Filter only looks at some items, so it runs faster than the list size."

[OK] Correct: Filter always checks every item to decide if it should keep it, so it takes time proportional to the whole list.

Interview Connect

Understanding how filter works helps you explain how your code handles data efficiently, a skill useful in many coding conversations.

Self-Check

"What if we used filter inside another loop over the same list? How would the time complexity change?"

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