36

Understanding Closures in JavaScript

 5 years ago
source link: https://www.tuicool.com/articles/hit/BZrYNrj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
3YJ7Jbr.png!webiYzM3ae.png!web
Closure ain’t all that bad!

JavaScript closure is one of those topics that can be hard to wrap your head around, simply because of how it’s often explained. Most tutorials just tell you that it’s a function within a function — but in reality, there is deeper meaning behind it all.

“Writing in ECMAScript language without understanding closure is like writing Java without understanding classes” — Douglas Crockford, father of JSON

Lets look at the code below:

7fQNVff.jpg!webbuErm26.jpg!web
a simple little piece of code

However, the above code is not very efficient. It uses a global scope and there is nothing to protect it against change.

A lot of people often forget that JavaScript is a lexical scoping language. This means, inheritance flows inwards. A variable outside a function is available for usage within a function but not the other way around.

You can’t use a value that’s been declared inside a function outside it.

The code below is a closure because x is a variable that is outside of the function.

FZvqmuI.jpg!webNjAVbqE.jpg!web
The traditional function within a function closure structure example
iUnEjui.jpg!web7jQvaya.jpg!web
Proof that x is a closure in browser console

However, the question then becomes — if closure is the consumption of a variable outside the function, why is the following code not a closure?

MFFnMbI.jpg!webAzi6zqa.jpg!web

The above is not a closure because of how JavaScript evaluates the statement. The scope of the function is created once and memory gets allocated for it. Processing happens until it reaches the end of the function and the memory gets released. There is no permanence gained in the exercise and whatever value created is forever lost.

2aYvumq.png!webaERN3aQ.png!web
Not a closure because variable scope is not external to the function.

However, if you wrap your function within a function, it creates another scope — a sort of ring fence around your code that tells JavaScript not to destroy your function when it ends.

The counter variable in the code below becomes the enclosed variable because it is outside the function being called (i.e. Increment). As a result, you can create an unlimited number of function instances with its own set of unique values.

bamyM3U.png!webFR7VZjn.png!web

The variable counter is therefore the closure in the code snippet above.

In a way, closures are just functions with preserved data. When you create a closure, you’re telling JavaScript to remember the state of things inside your function — and only the variables that are used are considered ‘closures’.

This is particularly useful because closures are stateful functions in that they remember their private variable data after a call. The variables are private because external functions cannot access them with an explicit call for access. This allows for the entire function to be self contained and its variables are protected against unwanted change.

MfiyAv3.png!webj6zYNjM.png!web
Lexical Scoping at work.

Closures in JavaScript are therefore a way to succinctly section off code into a modular and self contained manner without the need to explicitly create a class. The usage of closures allows for replicability in code and reduces the amount of global scopes needed.

Writing closures is more than just the act of putting a function inside another function. It is the technique used to create variables that are protected against external change, truly isolated from the rest of the application and are persistently stateful.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK