Closure in JavaScript with inline function

Question

Lets say, I have defined a function like

var f = function(cb){cb()};

Now, if I pass a callback function it will work:

f(()=>{console.log("ccb")}); //print: ccb

But if I pass a argument, in this case x will be undefined:

f((x)=>{console.log("x:"+x);}); // x will be undefined

so one solution is to use closure,

function cba(x){
      return function(){
        console.log("ccbbaa:"+x)
      }
}

f(cba(20)); //will work give output: ccbbaa:20

But if I am trying to achieve closure using inplace function, considering xx is defined.

var xx = 20;
f(function(xx){
    return function(){
        console.log("xxx: "+xx)
    }
});

callback inside f is not even called. Why? How will we can use this inline function to make it work? I am studying closures so wanted to understand this. Any help is appreciated.

You execute the *outer* function with signature `function(xx)` which returns a new function with signature `function()` but you never execute the latter. Since it's also never returned, you can't invoke it afterwards, either. It's just produced and at some point garbage collected. — VLAZ, Jan 27 '20 at 11:47
"callback inside f is not even called. Why?" — Because you've done **nothing** that would call it. `f()` doesn't do **anything** with the return value it gets from calling the function passed to it. — Quentin, Jan 27 '20 at 11:48
@NikhilKumar — You've laid down a very *abstract* and broken solution to a problem that isn't really clearly defined. It's hard to say how to solve the actual problem because we don't know what it is. You just seem to be wanting `f` to do something `f` isn't designed to do at all and are approaching it by changing what you pass to `f` … but no matter what you pass to `f` it isn't going to change how `f` works. — Quentin, Jan 27 '20 at 11:56

score 2 · Accepted Answer · answered Jan 27 '20 at 11:52

2

In your code you're not calling your inline function with xx. You're just passing the inline function to f which will be executed it but that will not print anything because the called inline function simply returns another function which is then never called.

var f = function(cb){cb()};
var xx = 20;
f((function(xx){
    return function(){
        console.log("xxx: "+xx)
    }
})(xx));

answered Jan 27 '20 at 11:52

vatz88

2,422
2
14
25

Thankyou for swift response and sorry for naive question, But as per that logic, why f(cba(20)); worked – Nikhil Kumar Jan 27 '20 at 11:57
1

@NikhilKumar because you *execute* `cba` which then returns a (single-level) function. The exact same thing happens if you have `(function(xx){ return function(){ console.log("xxx: "+xx) } })(xx)` - you have a function that is executed and returns a (single-level) function. The only difference is that in the latter case you have [an IIFE](https://stackoverflow.com/questions/1639180/how-does-the-function-construct-work-and-why-do-people-use-it) but nothing is really fundamentally different - you get the same result either way. – VLAZ Jan 27 '20 at 12:09
@VLAZ Oh got it now, Thankyou. Wondering how can we use arrow function in that case, like ` f((xx)=>{return function(){console.log("xxx: "+xx)}}(xx));`. Is it correct? – Nikhil Kumar Jan 27 '20 at 12:12
@NikhilKumar Yes, that would work syntactically. But the question is why you want an IIFE at all? it provides no benefit over using a normal function. If needed, there is partial application which can be used to pre-set parameters that the function expects. With this (and other techniques, like currying), you can take a normal function that takes parameters and produce [thunks](https://en.wikipedia.org/wiki/Thunk) that are essentially functions that don't expect a parameter but you can execute later. – VLAZ Jan 27 '20 at 12:22

Ziv Ben-Or · Answer 2 · 2020-01-27T12:06:18.290

0

Use bind to bind the parameter:

const f = function(x){x()};
const param = 12

f(function(x){
    console.log("ccbbaa:"+x)
}.bind(null, param))

edited Jan 27 '20 at 12:06

answered Jan 27 '20 at 11:56

Ziv Ben-Or

1,149
6
15

NobodyImportant · Answer 3 · 2020-01-27T12:18:00.163

0

The only way to make this work is to give the anonymous function a default value for xx

f(function(xx=20){
    (function(){
        console.log("xxx: "+xx)
    })(xx);
});

edited Jan 27 '20 at 12:18

answered Jan 27 '20 at 12:00

NobodyImportant

167
2
6

This is still not going to execute the inner function that is returned from the outer. – VLAZ Jan 27 '20 at 12:12
It doesn't work because f will always return undefined because it doesn't return anything. The inner function is never returned after function(xx) is executed by f. To make it work, you need to execute the inner function. I've edited the code to make it work. – NobodyImportant Jan 27 '20 at 12:16

score 0 · Answer 4 · answered Jan 27 '20 at 12:25

0

inline function returns another function which is never called.

 var f = function(cb){cb()};
    var xx = 20;
    f((function(xx){
        return function(){
            console.log("xxx: "+xx)
        }
    })(xx));

answered Jan 27 '20 at 12:25

Annas

35
4

Closure in JavaScript with inline function

4 Answers4