← JavaScript

Arrays – filter()

Creates a new array containing only the elements that pass a test provided by a function.

Part of: JavaScript Coding without HTML and CSS — Module 27, ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 35

Understanding Arrays – filter() in JavaScript

What it does: This is exactly what the filter() method does. The return keyword's value decides if the element is kept. filter() returns a new array containing only the elements that pass the test. filter() leaves the original array untouched. map() transforms every element - it never removes any. JavaScript is case-sensitive, so the method must start lowercase. filter() calls the function you give it to test each element. filter() keeps only the people whose age passes the check.

Common mistakes: 'filter' must start lowercase - a capital F causes an error. Missing the dot before 'filter' - it should be n2.filter(...).

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Arrays – filter() to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 1–29) and word search (Modules 21–52).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Does filter() create a new array of only matching elements?
YesNo
Matches
nums.Filter(function(n) { return n>2; })
↓
Wrong - 'filter' must start with a lowercase f
Applying
Meanings
Term
filter()
Meaning
Creates a new array containing only the elements that pass a test provided by a function.
Practice
let nums = [1, 2, 3, 4];
Testing
Gaps
let big = nums.(function(n) {
Check Answer
Spots
1a.Filter(function(n) {
2let a = [1, 2, 3];

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Nebula Cat' badge — Orbit Debugger, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Does filter() create a new array of only matching elements?
A. Yes ✓
B. No
filter() returns a new array containing only the elements that pass the test.
2. Does filter() change the original array?
A. Yes
B. No ✓
filter() leaves the original array untouched.
3. Is a return statement needed inside filter()'s function?
A. Yes ✓
B. No
Without return, no elements would ever pass the test.
4. Does map() filter out elements the way filter() does?
A. Yes
B. No ✓
map() transforms every element - it never removes any.
5. Is 'Filter' with a capital F valid JavaScript syntax?
A. No ✓
B. Yes
JavaScript is case-sensitive, so the method must start lowercase.

Match the Pairs

nums.filter(function(n) { return n > 2; }) → Creates a new array with only numbers over 2
people.filter(function(p) { return p.age >= 18; }) → Creates a new array of only the adult people
Runs a function on every element to keep matches → array.filter(function(item) { ... })
Decides whether an element passes the test → return
nums.Filter(function(n) { return n>2; }) → Wrong - 'filter' must start with a lowercase f
nums.filter(function(n) { n > 2; }) → Wrong - missing the 'return' keyword

Key Term

filter()
Creates a new array containing only the elements that pass a test provided by a function.

Fill in the Blanks

1. let big = nums.filter(function(n) {
Hint: Type the array method that returns a new array of matching elements.
2. let big = nums.filter(function(n) {
Hint: Type the keyword used to define the function passed to filter.
3. return n % 2 === 0;
Hint: Type the keyword that sends a value back from a function.
4. let adults = people.filter(function(p) {
Hint: Type the array method that returns a new array of matching elements.
5. let adults = people.filter(function(p) { return p.age >= 18; });
Hint: Type the keyword that sends a value back from a function.

Spot the Error

Question 1
A a.Filter(function(n) {
B let a = [1, 2, 3];
C return n > 1;
Line A — 'filter' must start lowercase - a capital F causes an error.
Question 2
A n2filter(function(n) {
B let n2 = [1, 2];
C return n > 1;
Line A — Missing the dot before 'filter' - it should be n2.filter(...).
Question 3
A let e = [1, 2, 3];
B let f = e.map(function(n) {
C return n > 1;
Line B — map() doesn't filter elements - use filter() instead.
Question 4
A let o = [1, 2];
B let p = o.fitler(function(n) {
C return n > 1;
Line B — 'filter' is misspelled as 'fitler'.
Question 5
A let c = [1, 2, 3];
B let d = c.filter(function(n) {
C n > 1;
Line C — Missing the 'return' keyword - without it, nothing is tested.

Student with a class code? Join your class →