understanding crockford's function that returns a function with a variable value

Question

i was just watching Douglas Crockford videos and he gave the following exercise to do :

write a function, that when passed a variable, returns a function that if called , returns the value of the variable.

so i wrote the following function :

function funcky(o) {
    return function send(o){ // notice the o in send
      return o;
    }
  }

  var x = funcky(3);

  console.log(x()); // i get undefined why ??

notice the o in send. i have been programming javascript for a while now , but i still don't understand why i get undefined ??

crockfords solution was as follows :

  function funcky(o) {
    return function send(){
      return o;
    }
  }

  var x = funcky(3);

  console.log(x()); // get 3 now .

now how come this solution works and mine does't ? i don't see much of a difference in my solution and nothing is obviously wrong that i see. can anybody explain please ?

Crockford is returning a function that takes no parameters. It gets it's parameters from the outer function. Your function takes parameters which you'd have to supply. — Matt Burland, Jul 09 '15 at 16:57

score 4 · Answer 1 · answered Jul 09 '15 at 16:59

The o in the send(o){ is where you are making a mistake. It is not 'inheriting' the o from the original parent's arguments. Putting it inside that function declaration is creating a new o, inside a new scope of that function.

send isn't passed anything when called, and it returns its first argument so it returns undefined.

Your code, annotated:

function funcky(o) {
    return function send(o){ // DECLARES NEW VARIABLE, happens to have same name
      return o; //returns the first argument passed to send
    }
  }

var x = funcky(3); //nothing is passed to the inner function send

console.log(x()); // undefined due to lack of arguments

A slightly clearer example of what is actually occuring:

function funcky(o) {
   return function send(someArgument){
     return someArgument; //return o; here would find the correct o, the first arg of funcky
   }
}

score 3 · Accepted Answer · edited May 23 '17 at 11:51

This has to do with the scope of o. When you write:

return function send(o){ // notice the o in send
  return o;
}

The scope of o is local to the function send. But, if you write:

return function send(){
  return o;
}

The scope of o is not local to the function send, but is local to the scope of funcky.

So, when you write function send(o){/*...*/} what is really happening is that o becomes an argument, and would need to be called like this: funcky()(10), but what you want to be able to do is funcky(10)().

EDIT:

For more information about variable scope in JavaScript, please see this very detailed answer on SO.

so basically javascript has function scope but no block scope i guess ! — Alexander Solonik, Jul 09 '15 at 17:23

score 2 · Answer 3 · answered Jul 09 '15 at 17:02

function funcky(o) {
    return function send(o){ // notice the o in send
      return o;
    }
}

Your inner function's o parameter shadows the o originally passed to funcky. So when you write var x = funcky(3);, x is just a send function which expects a parameter to return, there's nothing captured in a closure.

(In other words, x doesn't have a reference to the original o - 3 in your case, because by the name o it calls the parameter that x itself is called with).

score 2 · Answer 4 · answered Jul 09 '15 at 17:04

Because of scope.

The function send overwrites the var o in its inner scope.

function funcky(o) {
// o here is whatever you passed in funcky
  return function send(o){
  // now o here is whatever you pass in send
  // since you didn't pass anything the result is undefined
    return o;
  }
}

Check this other example

function funcky(o) {
  return function send(a){
    console.log(a);
    console.log(o); // this o is the parent o
    return o;
  }
}

var x = funcky(3);

console.log(x());

understanding crockford's function that returns a function with a variable value

4 Answers4