confused over js notation when calling functions

Question

The accepted answer below explains why checkit(x) doesn't work.

I'm a little confused by the following notation:

const array1 = [5, 12, 8, 130, 44];

function checkit(x){
return x == 8;}

const found = array1.find(element => element > 10);
const found1 = array1.find(function(x){return (x < 10);});
const found2 = array1.find(checkit);

console.log(found,found1,found2);

found and found1 make perfect sense to me. Why in found2 do we not have to name the variable being tested? i.e. Why not:

  found2 = array1.find(checkit(x));

Could someone provide a reference?

I'm voting to close this question as off-topic because it's not a real question. — r3wt, Dec 16 '19 at 19:17
@r3wt I think it's as real a question as [How can I pass a parameter to a function without it running right away?](https://stackoverflow.com/q/9638361/691711). The misunderstanding is how passing functions to functions that expect function references work. Maybe you could close as a duplicate of [In JavaScript, does it make a difference if I call a function with parentheses?](https://stackoverflow.com/q/3246928/691711). — zero298, Dec 16 '19 at 19:19
Does this answer your question? [In JavaScript, does it make a difference if I call a function with parentheses?](https://stackoverflow.com/questions/3246928/in-javascript-does-it-make-a-difference-if-i-call-a-function-with-parentheses) — zero298, Dec 16 '19 at 19:21
you're asking a question about basic syntax, and there is no point to this question at all. `function checkit(x){return x == 8;}` is the same as `x=>x==8` or `function(x){return x==8}`. not sure why that is confusing to you. you can pass a function by reference(technically the reference is pass by value), an anomymous function or a closure as a callback. basic syntax stuff for dynamic languages like javascript,php or python. you don't have to provide typing for the callback when passing it. also, `function checkit(x){...}` is really just syntax sugar for `var checkit=function(x){...}` — r3wt, Dec 16 '19 at 19:24
I know it's a question about syntax but closures are not so basic. That's why I asked for a reference. Which I note that no one was able to provide — DCR, Dec 16 '19 at 19:47

zero298 · Accepted Answer · 2019-12-16T19:17:13.570

1

Array.find() accepts a function. You gave it a function: checkit. Giving it checkit(x) would actually mean giving it what the call to checkit(x) is so you'd actually be saying Array.find(false) (or an error since x doesn't exist outside the scope).

const array1 = [5, 12, 8, 130, 44];

function checkit(x) {
  return x == 8;
}

// A reference to a function
const foundArg = element => element > 10;

// Another reference to a function
const found1Arg = function(x) {
  return (x < 10);
}

// More function references
const found2Arg = checkit

// BAD! found3Arg is now a boolean!
//const found3Arg = checkit(x);

const found = array1.find(foundArg);
const found1 = array1.find(found1Arg);
const found2 = array1.find(found2Arg); 
//const found3 = array1.find(found3Arg); // Error!

console.log(found, found1, found2);

edited Dec 16 '19 at 19:17

answered Dec 16 '19 at 19:12

zero298

25,467
10
75
100

then how come the anonymous function requires we pass x? – DCR Dec 16 '19 at 19:14
Check my answer. We have already done it while defining checkit. – kooskoos Dec 16 '19 at 19:16
@DCR you never explicitly pass `x`. `Array.find()` does the passing. You just tell it which function to pass to. – zero298 Dec 16 '19 at 19:18

Nicolas · Answer 2 · 2019-12-16T19:16:21.547

Because the variable checkit refer to a function. You don't want to call this function yet, you want the callback to do it.

array1.find(checkit(x)) will execute the function checkit with a parameters x and takes it's return values as the callback, we don't want that. We just want the find function to take the function reference stored in the checkit variable.

See example below.

function functionThatTakesACallback(callback) {
  return callback();
}

let callback1 = () => {
  console.log('this is the callback1');
}

let callback2 = () => {
  console.log('this is the callback2');
}

let shouldWeTakeCallback2 = (bool) => {
  return bool ? callback2 : callback1
}

// will log 'this is the callback1'
functionThatTakesACallback(callback1)

// will execute shouldWeTakeCallback2 and takes it's returns value as the callback
// so it will log 'this is the callback2'
// if we change the boolean value to false, it would log 'this is the callback1' 
functionThatTakesACallback(shouldWeTakeCallback2(true))

Because it needs to be of the correct definition to be a valid filter callback, just like the `function(x){return (x < 10);}` filter. But we don't need to pass parameters to the callback because we do not want it to be run now. We want the callback to call it when it is ready. I've edited my answer with some example. Maybe this will help @DCR — Nicolas, Dec 16 '19 at 19:17

kooskoos · Answer 3 · 2019-12-16T19:18:57.420

In found and found1 you are defining an anonymous function and find() takes that as an argument whereas with found2 checkit function is already defined and it directly takes in that as argument.

With anonymous functions we have to define the parameters that anonymous functions take, hence found and found1 take argument and not found2as you have already done it when declaring it.

 found2 = array1.find(checkit(x));

Here you are actually calling checkit with an undefined argument x rather than passing the function as parameter.

score 1 · Answer 4 · answered Dec 16 '19 at 19:13

1

Array.prototype.find takes a function as the argument. When you pass the function by name, it's just shorthand for array1.find(x => callback(x)).

answered Dec 16 '19 at 19:13

Matt U

4,970
9
28

confused over js notation when calling functions

4 Answers4