CODEWITHSUNDEEP
javascriptclosures
3lm 3lm
3lm 3lm

Reputation: 49

Where does the parameter of a returned function get its value?

I don't know if I chose the right title for this question, and maybe this is why I cannot also find an answer to this question.

While reading a javascript book, I found this example while talking about closures. 

function multiplier(factor){
    console.log('factor:'+factor);
    return function(number){
        console.log('number:'+number)
        return number * factor;
    };
}

var twice = multiplier(2);
console.log('twice:'+twice(5));

And in console I get this output:

factor:2
number:5
twice:10

I understand what a closure is meant to be, but I do not understand how the variable number, that by my knowledge I expected to be undefined, get the value 5.

My reasoning is the following:

When I call the function multiplier(2) the local variable factor is assigned the value 2, so the first output is correct. But when it reaches the line return function(number){ it shall assign number undefined, since no value has been previously assigned to such a name.

So it shall crash at all, and not doing correctly the output I got.

May anyone help me understand why calling twice(5) it get the output number: 5?

Thank you all, excuse me again If i did not post the question in the right way, feel free to modify anything to make this question more intelligible.

Upvotes: 0

Views: 53

Answers (3)

John Fisherman
John Fisherman

Reputation: 13

But when it reaches the line return function(number){ it shall assign number undefined, since no value has been previously assigned to such a name.

Here's the misunderstanding. Remember: In Javascript, almost everything is an Object. Some will say that many things that you interact with regularly (strings, numbers, booleans (Notice how I put these types/primitives/words first letter in lowercase. I usually use uppercase for Classes and lowercase for primitives)) are primitives, not objects. This is true, but for the purpose of this thread let's consider (almost) everything is an Object.

Let's get back on this sentence you wrote:

when it reaches the line return function(number){ it shall assign number undefined

Here's the issue: when it reaches the line "return function(number){}", it actually returns a function, which is an object.

It does not execute this function, it only declares it, and returns it, as an Object.

You could have wrote "return 666", it would have returned an Object. A Number.

Let's continue. Your variable "twice" now contains a function. Guess which one. This one:

function(number){ console.log('number:'+number) return number * factor; }

Remember, you've declared it and returned it in only one statement: "return function(number){...}"

Your "twice" variable is now equivalent to a named function you could've declared this way :

function twice(number){ console.log('number:'+number) return number * factor; }

Yes, functions are Objects, named functions are like named variables, and variables can be functions.

You can call it this way for example: twice(9), or this way: twice(5). That's what you've done.

Now let's answer your question:

why calling twice(5) it get the output number: 5?

Because:

var twice = function(number){ console.log('number:'+number) return number * factor; }

And you've executed "twice(5);" which in turn executed console.log this way:

console.log('number:'+5);

As far as I've understood, in your "function multiplier()", you do not want to return a function but rather the result of this function itself. I advise you to read about IIFE (Immediately-invoked function expression). With this you will be able, in only one statement, to: - declare a function - execute that function - (and eventually return its result)

Have fun playing with Javascript. Javascript is great, only when you know what's going behind.

Upvotes: 0

Carcigenicate
Carcigenicate

Reputation: 45806

I think the key thing that you're missing here is that the returned function acts just like any other function. The function isn't entered until it's called. 

return number * factor;

doesn't run until you call twice. It's just like how

console.log('factor:'+factor);

doesn't run until you call multiplier. The body of the function isn't entered until the function is called. number doesn't have a value until twice is called, but the code that uses number also doesn't run until twice is called.

Upvotes: 0

deceze
deceze

Reputation: 522451

return function (number) { ... } returns a function. number is not a variable, it's a function parameter. The same way that factor in function multiplier(factor) is a parameter. It is neither undefined nor does it cause anything to crash either.

In essence, multiplier(2) returns this function:

function (number) {
    console.log('number:' + number)
    return number * 2;
}

...which you assign to twice, so twice is now the above function.

Upvotes: 3

Related Questions