How do I pass an extra parameter to the callback function in Javascript .filter() method?
Solution 1
Make startsWith
accept the word to compare against and return a function which will then be used as filter/callback function:
function startsWith(wordToCompare) {
return function(element) {
return element.indexOf(wordToCompare) === 0;
}
}
addressBook.filter(startsWith(wordToCompare));
Another option would be to use Function.prototype.bind
[MDN] (only available in browser supporting ECMAScript 5, follow a link for a shim for older browsers) and "fix" the first argument:
function startsWith(wordToCompare, element) {
return element.indexOf(wordToCompare) === 0;
}
addressBook.filter(startsWith.bind(this, wordToCompare));
I dont really understand how the default parameters it takes are passed
There is nothing special about it. At some point, filter
just calls the callback and passes the current element of the array. So it's a function calling another function, in this case the callback you pass as argument.
Here is an example of a similar function:
function filter(array, callback) {
var result = [];
for(var i = 0, l = array.length; i < l; i++) {
if(callback(array[i])) { // here callback is called with the current element
result.push(array[i]);
}
}
return result;
}
Solution 2
The second parameter of filter will set this inside of the callback.
arr.filter(callback[, thisArg])
So you could do something like:
function startsWith(element) {
return element.indexOf(this) === 0;
}
addressBook.filter(startsWith, wordToCompare);
Solution 3
For those looking for an ES6 alternative using arrow functions, you can do the following.
let startsWith = wordToCompare => (element, index, array) => {
return element.indexOf(wordToCompare) === 0;
}
// where word would be your argument
let result = addressBook.filter(startsWith("word"));
Updated version using includes:
const startsWith = wordToCompare => (element, index, array) => {
return element.includes(wordToCompare);
}
Solution 4
function startsWith(element, wordToCompare) {
return element.indexOf(wordToCompare) === 0;
}
// ...
var word = "SOMETHING";
addressBook.filter(function(element){
return startsWith(element, word);
});
Solution 5
You can use the arrow function inside a filter, like this:
result = addressBook.filter(element => element.indexOf(wordToCompare) === 0);
An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. These function expressions are best suited for non-method functions and they can not be used as constructors.
agente_secreto
Updated on May 09, 2020Comments
-
agente_secreto about 4 years
I want to compare each string in an Array with a given string. My current implementation is:
function startsWith(element) { return element.indexOf(wordToCompare) === 0; } addressBook.filter(startsWith);
This simple function works, but only because right now wordToCompare is being set as a global variable, but of course I want to avoid this and pass it as a parameter. My problem is that I am not sure how to define startsWith() so it accepts one extra parameter, because I dont really understand how the default parameters it takes are passed. I've tried all the different ways I can think of and none of them work.
If you could also explain how the passed parameters to 'built in' callback functions (sorry, I dont know of a better term for these) work that would be great
-
agente_secreto over 12 yearsOk now I understand. I was trying to pass the parameters directly to the callback function... I really need to work on my JavaScript. Thank you Felix, your answer is very helpful
-
geotheory over 9 yearsWhat about passing additional arguments? I tried passing an array of arguments but that seems to fail
-
Felix Kling over 9 years@geotheory: what about them? you pass multiple arguments like to any other function.
-
Jeaf Gilbert almost 8 yearsI found this is the best answer.
-
Badhon Jain almost 8 yearsso now the new array will be assigned to wordToCompare object, right? How can access the new array later using the wordToCompare object?
-
Luis Lavieri about 7 yearsNote: Not supported on IE
-
richaa almost 6 yearsbest answer. works perfect for both filter and find. And is per WC3 documention for both: thisValue - Optional. A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value
-
imtk over 5 yearsThere is any way to pass a different parameter from element, index, and array? For example, I want to pass an X variable.
-
Tarek Eldeeb over 4 yearsWhat if several arguments are needed?
-
toddmo over 4 years@TarekEldeeb just pass an object you make
{one: 'haha', two:'hoho'}
-
toddmo over 4 yearsThis is a great example of how there can be vast differences among answers as to complexity and how convoluted they can be vs how simple they can be
-
GetBackerZ over 4 years@leandrotk in this case "wordToCompare" is the "X" variable to be passed in.
-
Sagar Khatri almost 4 yearsbind(this) after function name along with filter() chaining helped me use .this inside function. Thanks.
-
Masroor over 3 yearsin the first snippet, where is that
element
coming from, in thestartsWith
function? -
Felix Kling over 3 years@Prime:
addressBook
appears to be an array.addressBook.filter
calls the provided function for each element of the array passing it as argument. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . The last example in my answer shows a.filter
might be implemented. -
Erin about 3 yearsThe value of thisArg is undefined for me when I try to use it with ES6.