JavaScript Arrays
JavaScript
filterbuilds a new array containing only the elements that pass a test.
The callback returns true to keep an element and false to drop it.
The new array can be shorter than the original, but never longer.
Example
javascript
const numbers = [1, 8, 3, 12];
console.log(numbers.filter(n => n > 4).join(","));The output is 8,12.
filter keeps the elements for which the callback returns a truthy value.
The original array is not changed.
If nothing passes the test, you get an empty array rather than undefined.
Syntax
javascript
const result = array.filter(function (value) {
return condition;
});The callback must return true or false.
Any condition that gives true or false will work.
Example
javascript
const numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.filter(n => n % 2 === 0).join(","));Only the even numbers are kept.
This is where filter earns its keep in real code.
Example
javascript
const users = [
{ name: "Ada", active: true },
{ name: "Alan", active: false }
];
console.log(users.filter(u => u.active).map(u => u.name).join(","));Only the active users are kept, then their names are pulled out.
Boolean can be passed directly as the callback.
Example
javascript
const list = ["a", "", "b", null, "c"];
console.log(list.filter(Boolean).join(","));Every falsy value is removed in one step.
An empty result is still an array, so it is safe to keep working with.
Example
javascript
const numbers = [1, 2];
const big = numbers.filter(n => n > 100);
console.log(big.length);The output is 0.
Chaining is very common: narrow the list first, then reshape it.
Example
javascript
const numbers = [1, 2, 3, 4];
console.log(numbers.filter(n => n % 2 === 0).map(n => n * 10).join(","));Filtering first means less work for map.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript filter</title>
</head>
<body>
<h1>JavaScript filter</h1>
<p id="result"></p>
<script>
const scores = [45, 82, 30, 91, 67];
const passed = scores.filter(s => s >= 50);
document.getElementById("result").innerHTML =
"Passed: " + passed.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a higher bar:
Change 50 to 80 and see how many scores are left.
filter keeps the elements that pass a test.undefined.filter(Boolean) removes all falsy values.filter narrows a list down to the elements you care about.
It pairs naturally with map to select and then reshape.
Together they replace most of the loops you would otherwise write.