Javascript -- Closures with Simple Adder Function

Question

I'm a Python coder learning more about Javascript.

I'm having a bit of difficulty understanding Closures for some reason. I've produced the simple Adder function (i.e. Should do something like Add(1) = 1, Add(2) = 3...)

I've been trying to understand what's going on under the hood via console.log/printing everything but I'm confused on how these functions are different, if they are:

var makeAdder = function(num){
  var addNum=num;
  var letsAdd = function(num){
    return addNum+=num;
  };
  return letsAdd;
};

var makeAdder = function(numa){
  var letsAdd = function(numb){
    return numa+numb;
  };
  return letsAdd;
};

var a = makeAdder(2);
console.log(a(5));
// should produce 7 at the end

`var makeAdder` is defined twice... Why ? Works fine [here](https://jsfiddle.net/rgz0vjxs/) — Rayon, Mar 17 '16 at 06:42
See: [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1) — Yogi, Mar 17 '16 at 06:42
@ArunPJohny please check this fiddle https://jsfiddle.net/gurvinder372/c605adxt/2/ they are a little different — gurvinder372, Mar 17 '16 at 06:53

score 1 · Answer 1 · answered Dec 02 '19 at 15:12

Solution for a simple adder function without using closures.

function makeAdder(num){
  if(!this.addNum){
    this.addNum=0;
  }
  return this.addNum+=num;
}

console.log("------------makeAdder----------");

console.log(makeAdder(10)); // output - 10
console.log(makeAdder(20)); // output - 30
console.log(makeAdder(30)); // output - 60

score 1 · Answer 2 · edited Dec 12 '19 at 15:34

1

A little bit simpler and more concise:

function makeAdder(n) { 
    return function(x) {
        return x + n;   // closure over n
    };
};

var add5 = makeAdder(5);    
var add7 = makeAdder(7);    

console.log(add5(10));   // 15
console.log(add7(10));   // 17

edited Dec 12 '19 at 15:34

Community

1
1

answered Dec 12 '19 at 15:10

chessweb

4,613
5
27
32

gurvinder372 · Answer 3 · 2016-03-17T07:35:08.170

0

First makeAdder adds to last added value addNum+=num; which is why you can keep adding to the previously added value

So, first makeAdder will return what you want

var a = makeAdder(2);
a(1);//output 3
a(4);//output 7

However, second makeAdder is not adding to last added value numa+numb; so it is not able to add it to previous value

var a = makeAdder(2);
a(1);//output 3
a(4);//output 6 not 7

edited Mar 17 '16 at 07:35

answered Mar 17 '16 at 06:46

gurvinder372

66,980
10
72
94

1

@RayonDabre try adding another value to a by doing `a(3);` again. In first method, it will add to previously added value, in second one (as in your fiddle), it will added to the original constructor value https://jsfiddle.net/gurvinder372/c605adxt/1/ – gurvinder372 Mar 17 '16 at 06:50
1

@RayonDabre and see the difference with first `makeAdder` https://jsfiddle.net/gurvinder372/c605adxt/2/ – gurvinder372 Mar 17 '16 at 06:52
@Guru, Difference seems to be like `a = a+2` and `a+2` – Rayon Mar 17 '16 at 07:14
1

@RayonDabre yes precisely. – gurvinder372 Mar 17 '16 at 07:15

Saurabh Verma · Answer 4 · 2016-03-17T08:12:46.967

In Javascript when a variable is declared inside a function, it becomes local to that function. So when the function completes the execution, Garbage collector destroys all the local variables. But in case of closures, it cannot. Because a link to those function variables gets created from outside the function.

In the above picture N moves out of the scope of F and becomes available outside. A good read on closure is in Object Oriented Javascript by Stoyan Stefanov

So in closures the local variables are not destroyed and the value is stored for future use.In your case, you are creating a closure by using the local variables addnum and numa in function letsAdd which is then returned outside the function and hence available from outside,creating a link.

The first makeadder has the local variable which has the sum of last two values i.e. addnum is saved. And hence when the next time you are calling, you are getting the sum. While the second function has an external link to numa which is not the sum of last two variable. So the value gets saved is only the value of first parameter. So in the subsequent calls the first parameter to the add is different in both the functions.

Javascript -- Closures with Simple Adder Function

4 Answers4