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
– VLAZ, Commented Jan 27, 2020 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
– Quentin, Commented Jan 27, 2020 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
– Quentin, Commented Jan 27, 2020 at 11:56

vatz88 · Accepted Answer · 2020-01-27 11:52:54Z

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, 2020 at 11:52

vatz88

2,4522 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikhil Kumar Over a year ago

Thankyou for swift response and sorry for naive question, But as per that logic, why f(cba(20)); worked

VLAZ Over a year ago

@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 but nothing is really fundamentally different - you get the same result either way.

Nikhil Kumar Over a year ago

@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?

VLAZ Over a year ago

@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 that are essentially functions that don't expect a parameter but you can execute later.

Ziv Ben-Or · Accepted Answer · 2020-01-27 12:06:18Z

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, 2020 at 12:06

answered Jan 27, 2020 at 11:56

Ziv Ben-Or

1,1946 silver badges15 bronze badges

Comments

NobodyImportant · Accepted Answer · 2020-01-27 12:18:00Z

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, 2020 at 12:18

answered Jan 27, 2020 at 12:00

NobodyImportant

3773 silver badges9 bronze badges

2 Comments

VLAZ Over a year ago

This is still not going to execute the inner function that is returned from the outer.

NobodyImportant Over a year ago

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.

Annas · Accepted Answer · 2020-01-27 12:25:46Z

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, 2020 at 12:25

Annas

354 bronze badges

Collectives™ on Stack Overflow

Closure in JavaScript with inline function

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related