search
HomeWeb Front-endJS TutorialUnderstanding closures in javascript functional programming_javascript skills

Closure is a concept in functional programming that appeared in the 1960s. The earliest language to implement closure was Scheme, which is a dialect of LISP. Since then, closure features have been widely adopted by other languages.
The strict definition of a closure is "a set consisting of a function (environment) and its enclosed free variables." This definition is a bit obscure for everyone, so let's first explain it through examples and a less strict explanation. is a closure, and then gives examples of some classic uses of closures.

What is closure

In layman’s terms, every function in JavaScript is a closure, but in general, nested functions can better reflect
To show the characteristics of closure, please see the following example:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter = generateClosure();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

In this code, there is a local variable count in the generateClosure() function, with an initial value of 0. There is also a function called get, which increases the count variable in its parent scope, the generateClosure() function, by 1, and returns the value of count. The return value of generateClosure() is the get function. Externally, we called the generateClosure() function through the counter variable and obtained its return value, which is the get function. Then we repeatedly called counter() several times, and we found that the returned value was incremented by 1 each time.
Let's take a look at the characteristics of the above example. According to the usual understanding of imperative programming thinking, count is a variable inside the generateClosure function. Its life cycle is the period when generateClosure is called. When generateClosure returns from the call stack, the count variable The applied space will be released. The problem is that after the call to generateClosure() ends, counter() refers to the "already released" count variable, and not only does no error occur, but count is modified and returned each time counter() is called. What's going on?
This is exactly the characteristic of so-called closure. When a function returns a function defined within it, a closure is generated. The closure not only includes the returned function, but also the environment in which the function is defined. In the above example, when the internal function get of the function generateClosure() is referenced by an external variable counter, the local variables of counter and generateClosure() are a closure. If it’s not clear enough, the following example may help
You understand:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter1 = generateClosure();
var counter2 = generateClosure();
console.log(counter1()); // 输出 1
console.log(counter2()); // 输出 1
console.log(counter1()); // 输出 2
console.log(counter1()); // 输出 3
console.log(counter2()); // 输出 2

The above example explains how closures are generated: counter1 and counter2 call the generateClosure() function respectively, generating two instances of closures, and the count variables they reference internally belong to their respective operating environments. We can understand that when generateClosure() returns the get function, the internal variables of the generateClosure() function that get may refer to (that is, the count variable) are also returned privately, and a copy is generated in the memory, and then generateClosure( ) The two instances of the returned function, counter1 and counter2, are independent of each other.

The purpose of closure

1. Nested callback function
Closures have two main uses, one is to implement nested callback functions, and the other is to hide the details of an object. Let's first look at the following code example to understand nested callback functions. The following code uses MongoDB in Node.js to implement a simple function of adding users:

exports.add_user = function(user_info, callback) {
var uid = parseInt(user_info['uid']);
mongodb.open(function(err, db) {
if (err) {callback(err); return;}
db.collection('users', function(err, collection) {
if (err) {callback(err); return;}
collection.ensureIndex("uid", function(err) {
if (err) {callback(err); return;}
collection.ensureIndex("username", function(err) {
if (err) {callback(err); return;}
collection.findOne({uid: uid}, function(err) {
if (err) {callback(err); return;}
if (doc) {
callback('occupied');
} else {
var user = {
uid: uid,
user: user_info,
};
collection.insert(user, function(err) {
callback(err);
});
}
});
});
});
});
});
};

If you are not familiar with Node.js or MongoDB, it doesn’t matter. You don’t need to understand the details, just understand the general logic. This code uses layers of nesting of closures, and each layer of nesting is a callback function. The callback function will not be executed immediately, but will be called back by the requested function after the corresponding request is processed. We can see that there is a reference to callback in each layer of nesting, and the innermost layer also uses the uid variable defined by the outer layer. Due to the existence of the closure mechanism, even if the outer function has been executed, the variables applied in its scope will not be released, because the inner function may still reference these variables, thus perfectly realizing the nested asynchronous callback. .

2. Implement private members
We know that JavaScript objects have no private properties, which means that every property of the object is exposed to the outside world. This may cause security risks, for example, if the user of the object directly modifies an attribute, causing the consistency of the internal data of the object to be destroyed, etc. JavaScript uses the convention to put an underscore before all private properties (such as _myPrivateProp) to indicate that this property is private and external objects should not read or write it directly. But this is just an informal agreement. Assuming that the user of the object does not do this, is there a more strict mechanism? The answer is yes, it can be achieved through closure. Let’s look at the previous example again:

var generateClosure = function() {
var count = 0;
var get = function() {
count ++;
return count;
};
return get;
};
var counter = generateClosure();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
console.log(counter()); // 输出 3

We can see that only calling counter() can access the count variable in the closure and increment it by 1 according to the rules. It is impossible to find the count variable in other ways. Inspired by this simple example, we can encapsulate an object with a closure and only return an "accessor" object to hide the details.

The above is the entire content of this article. I hope it can help everyone better learn and understand JavaScript closures.

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools