Check my and books. Discover Functional JavaScript Functional React Closure is a nested function that has access to the parent variables, even after the parent has executed. Consider the following code: function init(){ let state = 0; return state; function increment(){ state += 1; } increment();} init(); The function is a closure. increment() is a nested function. is its parent. accesses the variable from its parent. increment() init() increment() state Closure becomes important when the nested function survives the invocation of the parent. : Look at these examples Timer callback function initTimer(){ let state = 0; setTimeout( return state; , 60000);}initTimer(); function increment(){ state += 1; } Event callback function initEvent(){let state = 0; $("#btn").on("click", return state; );}initEvent(); function increment(){ state += 1; } AJAX callback function initFetch(){let state = 0; fetch(url).then( return state; );}initFetch(); function increment(){ state += 1; } In all these cases survives the invocation of the parent. is a closure. increment() increment() Encapsulation Function with private state Closure can be created as a function with private state. : Consider the folowing code let types = ["History", "Travel", "Biographies"];function createRandomItem( ){return let index = Math.floor(Math.random() * arr.length);return [index]; } arr function randomItem(){ arr } let randomType = createRandomItem(types);randomType();randomType(); is a nested function that has access to the variable from its parent. lives after execution. is a closure. randomItem() arr randomItem() createRandomItem() randomItem() points to the same function as . is a closure. It gives a random book type. randomType() randomItem() randomType() Object with private state As you’ve seen, we can create a function with private state. At the same time, we can create many functions sharing the same private state. By doing so, we create an object with private state. : Look at the next code function BookStore(){let books = []; function add(book){books.push(book);} function toViewObject(book){return Object.freeze(book);} function get(){books.map(toViewObject).slice(0);} return Object.freeze({add,get});} let bookStore = BookStore();bookStore.add({title : "JS The Good Parts"});bookStore.add({title : "Functional-Light JS"});bookStore.add({title : "JS Allongé"}); console.log(bookStore.get()); The function creates an object with private state. The variable is private, it can’t be access from the outside. and are two closures sharing the same private state. BookStore books add get is a factory function. BookStore For an in-depth comparison between factory function and class take a look at Class vs Factory function: exploring the way forward Closure in Functional Programming Functions taking a function as argument an returning a variation of that function use closure. like : Let’s look at a simple decorator not() function not( ){return return ! .apply(this, args); } fn function decorator(...args){ fn } The function has access to parameter from its parent. decorator() fn is a closure. decorator() Closures are highly used in functional programming. For example, all functions from create closures. underscore function section For more decorators take a look at . Here are a few function decorators you can write from scratch Closure vs Pure Functions To make things easier to reason about we can split nested functions in two: closures and pure functions. don’t use variables from the outer functions. Besides, they return a value and have no side effects. Pure functions use variables from the outer functions. Closure functions Variables lifetime The parent variables live as long as the closure function lives. Let’s analyze some situations: : variables live the time setInterval interval : variables live forever, till is called setTimout clearTimeout event : variables live forever, till the remove handler is called AJAX : variables live till the response gets back from the server and the callback is executed If a variable is shared by many closures, all closures should be garbage-collected before the variable is garbage-collected. Conclusion Closure is a nested function. It has access to variables from the parent functions. Variables used by the closure function live as long as the closure lives. Closure make it easy to work with async tasks like timers, events, AJAX calls. You can find more on Functional and Object Oriented Programming in JavaScript in my book . For more on applying functional techniques in React take a look at . Discover Functional JavaScript Functional React You can find me on . Twitter
