JavaScript filter keeps the elements in an array that satisfy a condition. Its main method, Array.filter(), calls a callback for each existing element and returns a new array containing every element whose callback result is truthy.
Use it for collections with zero, one, or many matches. The original array remains unchanged, so the method is suitable for creating filtered views of data without removing elements from the source.
How JavaScript filter works
The JavaScript filter function receives up to three callback arguments: the current element, its index, and the complete array. Most callbacks use only the element:
Example: const numbers = [3, 8, 12, 15]; const multiples = numbers.filter((element) => element % 3 === 0);
The returned value is [3, 12, 15]. To access all callback arguments, use this form:
Example: const firstHalf = numbers.filter((element, index, array) => index < array.length / 2 && element > 5);
A callback does not need to return the words true or false. Any truthy result keeps the element; false, 0, “”, null, and undefined exclude it. Returning a boolean expression makes the intended rule clearest.
filter() does not mutate the original array. It creates a new array, although object elements inside it still reference the same objects. If no elements pass the condition, the result is an empty array: [].
How does the JavaScript filter function select numbers and strings?
For numbers, write a predicate that describes the allowed value. This example keeps values at least 10:
Example: const scores = [7, 10, 14, 18]; const passing = scores.filter(score => score >= 10);
The result is [10, 14, 18], while scores is unchanged. The same pattern works with strings. Combine typeof with a text condition when an array may contain different data types:
Example: const values = [“JavaScript”, 42, “filter”, null]; const words = values.filter(value => typeof value === “string” && value.length > 5);
This returns [“JavaScript”, “filter”]. The filter function JavaScript developers use can therefore select by type, length, range, pattern, or any other callback condition.
How JavaScript Array.filter() handles objects, missing values, and multiple conditions
For objects, inspect a property inside the callback. This example keeps active users:
Example: const users = [{ name: “Ana”, active: true }, { name: “Bo”, active: false }, { name: “Cy”, active: true }]; const activeUsers = users.filter(user => user.active === true);
The result contains Ana and Cy. A missing property evaluates to undefined, so an explicit comparison such as user.active === true safely excludes an object without an active property.
Filter out missing or invalid values by checking the value before using it:
Example: const values = [10, undefined, 25, null, 40]; const validNumbers = values.filter(value => typeof value === “number”);
The result is [10, 25, 40]. For a sparse array with genuinely empty slots, filter() skips those unassigned slots rather than calling the callback for them.
Use logical operators for compound conditions. This example keeps in-stock products costing no more than 50:
Example: const products = [{ name: “Pen”, price: 3, inStock: true }, { name: “Bag”, price: 45, inStock: false }, { name: “Lamp”, price: 38, inStock: true }]; const affordable = products.filter(product => product.inStock && product.price <= 50);
The && operator requires both conditions to pass. Use || when either condition is acceptable, such as selecting products in the “office” or “school” category.
When should you use the filter function in JavaScript instead of find or map?
Choose filter() when the required result is an array containing every match. Its result always has array shape, including an empty array when nothing matches.
Choose find() when you need one element: specifically, the first match. It returns that element or undefined, not an array. Do not use filter() when a single first match is the required result.
Choose map() when every element should produce a transformed value. It normally returns an array with the same number of elements, whereas filter() removes elements that fail its predicate.