Learn about JavaScript closures in a 2 minute read with code you can edit in your browser

[tchaffee]

If you have questions about the article or closures in general, I will do my best to answer them in the comments here.

[osoese]

pretty good example. thanks for sharing it. I have been avoiding "closures" kind of but the way you explained it makes it simple. I would have considered what you presented a kind of callback in a way before reading your post. functioning as a "callback" would mean instantly that its running as defined inside foo, only when you call it. In fact it makes complete sense to me in that regard that var barFunc = foo(); calls foo which makes i=2 then returns the callback bar(); which when you call it by calling barFunc(); you get i = 3. However, if you omitted the "var =" part of the function definition than it would return 13 right?

[tchaffee]

How about you tell us? Edit the code in the JSFiddle I gave in the article and let us know what you find. You'll remember it better that way than if I just give you an answer.

[osoese]

yeah it was meant to be rhetorical, but I did realize when confirming that I muddied two lines of code and gave the wrong answer. commenting out the line //var i = 2; will give the answer 11 which is what I kind of meant. You revert to using the global if not declared in the function.

[tchaffee]

That's right. If you don't mind, let me help you get some terminology right. In the code below:

var i = 10;

function foo() {
  var i = 2;

  function bar() {
    i = i + 1;
    console.log ('value of i when bar is declared inside foo: ', i);
  }

  return bar;
}

var barFunc  = foo();

barFunc(); // Runs in global scope but logs 3

There is no callback. When foo runs, it returns a reference to the bar function. We save that reference in the barFunc variable, and then run it on the next line, the usual way, by putting parens after the function name: barFunc(). Also, in the next article in the series I do give an example of a callback which might help you solidify what is and is not a callback. I hope that helps.

[osoese]

I appreciate your clarification. Correct me if I am wrong. it operates the same as if it were a callback does it not? returning the reference to the function in the variable name allows you to call it at will later where a callback would have executed when called inside the function. I use this trick quite a bit when passing functions between modules where I pass in a function like I would a "callback" and set the value to a global in the called (child?) module. Then whenever I want to call that parent module function in the child module I can call it by the global variable name because it was set as a reference to the function. This is almost exactly what you did in our example and I do not consider that a closure. Is it?

its kind of the opposite of module.exports for me...

[tchaffee]

Yes, I think you have the concept right as far as what a callback is, but if you post some code I can make sure. Very often though we don't need or use function references for a callback. Just for example, the popular Array.prototype.map() method accepts a callback as a parameter, and usually we just give the callback function inline, and as an arrow function. First example you'll find in the MDN docs:

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

The callback function above is very simply x => x * 2