JS Function returning function for later use - arguments undefined

Question

I am trying to create a function that can then return many functions based on an input. Here is an example of the problem I am facing.

var giveFunction = function(text) {
    return function(text) {
        console.log(text)
    }
}
var test = giveFunction('this is a test');
test()

Running test() at the end prints undefined instead of 'this is a test.' Is there any way around this problem?

invoke it as test("this is a test") – Darlyn Mar 30 '16 at 18:05 — Darlyn, Mar 30 '16 at 18:05

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-30T18:13:30.173

4

The inner function should not contain any parameter,

var giveFunction = function(text) {
    return function() {
        console.log(text)
    }
}

Let it create a closure. If it has a parameter then that would be read during execution and undefined would be printed as you are not calling that function with any arguments.

If you want your code to be working then you have to use bind for that,

var giveFunction = function(text) {
    return function(text) {
        console.log(text)
    }.bind(null, text)
}
var test = giveFunction('this is a test');
test();  //'this is a test'

edited Mar 30 '16 at 18:13

answered Mar 30 '16 at 18:03

Rajaprabhu Aravindasamy

66,513
17
101
130

What is the significance of using bind vs closure in this case? Seems like using closure is the smarter choice here. – Elliot Mar 30 '16 at 18:08
@Elliot I don't understand what you are asking. Closure and bind works in a different way. – Rajaprabhu Aravindasamy Mar 30 '16 at 18:11
@downvoter: Care to comment? Am i missing anything here? Thanks – Rajaprabhu Aravindasamy Mar 30 '16 at 18:12
I was wondering if there is any particular reason to go with the bind instead of using closure here, but perhaps that is a whole other stack question in itself. Thank you for the help understanding this! – Elliot Mar 30 '16 at 18:12
@Elliot Glad to help! :) – Rajaprabhu Aravindasamy Mar 30 '16 at 18:14

score 1 · Answer 2 · edited May 23 '17 at 11:45

Lets go one step further and ask why?

var outerFunction = function(outerParameter) {
   return innerFunction function(innerParameter) {
     // in here we have access to anything in this function and the outer function
     // all the way to out the the global scope
     // therefore, we dont need to pass innerParameter in again as a parameter! ( in your case we 'next')
   }
  /// now over here, outside of innerFunction, we do NOT have access to innerParameter!
}

So applying the above principles to your code we have:

var giveFunction = function(text) {
    return function() {
        console.log(text)
    }
}
var test = giveFunction('this is a test');
test()

which now works!

Finally, checkout the most upvoted post under the javascript tag: How do JavaScript closures work?

JS Function returning function for later use - arguments undefined

2 Answers2