Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A callback function is a function passed to another function so that function can call it while doing its work. JavaScript’s array method filter() uses a callback as a test: it keeps each array element for which the callback returns a truthy value and returns those elements in a new array.
What is a callback function?
A callback is an ordinary function supplied as an argument to another function. The receiving function decides when to invoke it and what arguments to pass. With filter(), the callback is invoked to check array elements.
How does Array.filter() work?
The method has the form array.filter(callbackFn) or array.filter(callbackFn, thisArg). It calls the callback for each element that has a value. A truthy callback result keeps that element; a falsy result leaves it out. The callback’s return values are used as decisions, not collected into the result.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →For example:
const numbers = [12, 5, 8, 130, 44];
const largeNumbers = numbers.filter((value) => value >= 10);
// largeNumbers is [12, 130, 44]The arrow function (value) => value >= 10 is the callback. For each value, the comparison produces true or false; filter() retains the values whose comparison is true. If no elements pass, the result is an empty array.
#1 Best Overall
What arguments can the callback receive?
The callback can receive the current element, its index, and the original array, in that order: (element, index, array). You can leave out parameters you do not need.
const labels = ["first", "second", "third"];
const laterLabels = labels.filter((label, index) => index > 0);
// ["second", "third"]The optional thisArg supplies the value used as this inside a regular callback function. Arrow functions use their lexical this instead, so thisArg does not change an arrow function’s this.
Rank #2
Can you pass a named function?
Yes. Pass the function itself by name, without parentheses:
function isBigEnough(value) {
return value >= 10;
}
const largeNumbers = numbers.filter(isBigEnough);numbers.filter(isBigEnough) gives filter() the function so it can call it for each element. Writing numbers.filter(isBigEnough()) calls the function immediately and passes its return value instead, which is not the intended callback.
What does filter() return, and does it change the original array?
filter() returns a new array containing the selected elements in their original order. It does not change the original array’s membership or order. The result is a shallow copy: if the elements are objects, the new array contains references to those same objects rather than copies of the objects themselves.
If the callback returns a truthy non-boolean value, the element is still kept. If it returns a falsy value, such as false, 0, an empty string, null, or undefined, the element is excluded.
Rank #4
How does filter() handle sparse arrays?
An empty slot in a sparse array is skipped: the callback is not called for that slot. An explicit undefined value is an element, so the callback is called for it. For example, [1, , 3] has an empty slot between its values, while [1, undefined, 3] has a present element in that position.
Free tools Windows power users keep installed
One-click scans. No signup required.
The callback’s third argument, when used, refers to the original array passed to filter(), not the new array being constructed. The method is also generic: it can operate on array-like objects that have a length property and integer-keyed properties.
When should you use filter()?
Use filter() when you want a new array containing every element that passes a test. It checks all present elements rather than stopping at the first match. If you want just one matching item rather than an array of all matches, choose a method designed to find a single result. See the MDN reference for Array.prototype.filter() for the method’s syntax and behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
