JavaScript Closures example and explanation

Question

I have found this example of a closure on codeproject but it does not explain how it works.

    function getMultiplier(multiplyBy){
       function multiply(num){
          return multiplyBy * num;
       }
 
       return multiply;
    }
 
    var multiplyByTwo = getMultiplier(2);
    var multiplyByTen = getMultiplier(10);
    var twoIntoFive = multiplyByTwo(5); 
    var tenIntoSix = multiplyByTen(6);  

    console.log(twoIntoFive); // 10
    console.log(tenIntoSix); // 60

Now i am going to assume, with my C brain what is happening. Please correct me or give your explanation.

1. functions in javascript can also be objects, so the inner function multiply(num) is a method of getMultiplier, looking from outside.
2. var multiplyByTwo is assigned the return value of function getMultiplier when invoked with argument 2.
3. when you call getMultiplier(2), javascript interpreter creates an object in memory based on the definition of getMultiplier().
4. that object has a method multiply and it's address is assigned to variable multiplyByTwo.
5. var twoIntoFive = multiplyByTwo(5); calls the getMultiplier(2) object's method multiply(num) with argument 5.
6. that returns simple numeric 10 into variable twoIntoFive
7. multiplyByTwo = 0; will make the garbage collector of javascript delete object getMultiplier(2) from memory.

Answer 1

Actually multiply is just a function and not a method in terms of OOP.

Basically function are objects, but callable. In this case, it is not a question if a function is an object, but more if you can hand over a reference to a function. This is possible and done with return multiply.

After calling getMultiplier with a value for the parameter, the value is stored and a function is returned (and assigned).

Then you need to call the function, which reference is stored in multiplyByTwo.

The local variable multiplyBy is used to return a result. No object is created.

Answer 2

Interesting questions.

1. Almost correct, except that on a basic level, in javascript in fact all functions are objects. Also, looking at the latter two variables, twoIntoFive and tenIntoSix, multiply() is a standalone Function in the scope of getMultiplier() (meaning it also holds a reference to variables inside that function).

2. Exactly

3. Correct, but keep in mind that it still differs from getMultiplier.

4. As explained in this article, rather than a object, javascript creates an interface with a reference to the already declared variables inside the function.

5. This is how it seems to work. But twoIntoFive actually calls the returned interface that references the getMultiplier() function parameter

6. Correct.

7. This is correct. Since you removed the reference to the interface, it will be deleted.

Further Reading

It's generally a good idea to refer to MDN when having questions about javascript. It's the most complete documentation I have read so far.

• Closures on MDN
• Stackoverflow question linked by commenter @Yordan Nikolov
• Memory Management (Garbage Collection on MDN)

Feel free to correct me or give some feedback if you find errors in my answer or have further questions

Answer 3

Basically a function is a function. I wouldn't say multiply(num) is a getMultiplier's method, it is just declared in its body.

Maybe this way it would be easier to understand?

var x = function getMultiplier(multiplyBy){
   var y = function (num){
      return multiplyBy * num;
   }

   return y;
}

Anyways. The way it works is: calling getMultiplier returns a function "multiply". The multiply function returns multiplyBy * num, but getMultiplier returns sort of a pre-made multiply function which has multiplyBy already substituted by getMultiplier's parameter.

Thus, when you called getMultiplier(2), what you get under multiplyByTwo variable is:

function multiply(num){
   return 2 * num;
}

Since getMultiplier(num) simply substitutes a parameter inside returned multiply function, you can pass it literally anything and nothing will be deleted.