Can you explain the order of execution in the code mentioned below?

Question

function makeMultiplier (multiplier){
    var myFunc = function (x){
        return multiplier * x;
    }
    return myFunc;
}

var multiplyBy3 = makeMultiplier(3);
console.log(makeMultiplier(3)(10));

Here, I don't understand why and how does the var multiplyBy3 variable acts as a reference to the myFunc function mentioned above

Answer 1

The return value of executing the function makeMultiplier is function myFunc. This is being assigned to variable multiplyBy3 . Hence it will act as a reference to myFunc function

Answer 2

Order of execution:

1. makeMultiplier is defined

2. makeMultiplier is called with arg 3 and returns a new function and that returned function is stored in a variable named multiplyBy3.

3. console log called with makeMultiplier is called with 3, returns a new function and it is called with argument 10

In JavaScript all the non primitive objects' assignments are stored as reference, but not as value. Example variable assignments, argument passing to functions where it basically assigned to the parameter which is a local variable inside the function.

However, second call to the multiplier with arg 3 is a different function, the references are different.

Also you can test those with Object.is() static method.

Answer 3

In your code, you don't actually use multiplyBy3, but here's your code modified to use it as the reference to the inner myFunc(3):

function makeMultiplier(multiplier) {
  var myFunc = function(x) {
    return multiplier * x;
  }
  return myFunc;
}
var multiplyBy3 = makeMultiplier(3);
console.log(multiplyBy3(10));

When setting the multiplyBy3 variable, we call the makeMultiplier function with 3 as our multiplier argument. This returns a reference to function(x) { return 3 * x; } which is assigned to multiplyBy3.

Calling multiplyBy3(10) then results in the value of 30 due to multiplying 3 by the argument of 10. This is equivalent to your original code makeMultiplier(3)(10)

In the following code snippet, I modified your code to use multiplyBy3 and threw in some console.log statements to show the steps taken both outside and inside the functions.

function makeMultiplier(multiplier) {
  console.log("[enter] makeMultiplier");
  var myFunc = function(x) {
    console.log("[enter] myFunc");
    return multiplier * x;
  }
  return myFunc;
}
console.log("[before] 'var multiplyBy3 = makeMultiplier(3);'");
var multiplyBy3 = makeMultiplier(3);
console.log("[after] 'var multiplyBy3 = makeMultiplier(3);'");
console.log("[before] 'console.log(multiplyBy3(10));'");
console.log(multiplyBy3(10));
console.log("[after] 'console.log(multiplyBy3(10));'");

Additionally, I'll show an alternate example where we multiply by 4:

function makeMultiplier(multiplier) {
  console.log("[enter] makeMultiplier");
  var myFunc = function(x) {
    console.log("[enter] myFunc");
    return multiplier * x;
  }
  return myFunc;
}
console.log("[before] 'var multiplyBy4 = makeMultiplier(4);'");
var multiplyBy4 = makeMultiplier(4);
console.log("[after] 'var multiplyBy4 = makeMultiplier(4);'");
console.log("[before] 'console.log(multiplyBy4(10));'");
console.log(multiplyBy4(10));
console.log("[after] 'console.log(multiplyBy4(10));'");