Learn about Closures in JavaScript (Japanese)

Closures in JavaScript refer to the concept where functions have references bundled to their surrounding state (lexical environment).

In other words, closures enable inner functions to access the scope of outer functions. In JavaScript, a closure is created every time a function is created, and this happens during the function’s creation.


Example of Closure

Closures have a structure where inner functions can access variables from outer functions.

In this example, outerFunction takes the external variable outerVariable and returns an inner function defined inside it. The closureExample variable stores the returned innerFunction when outerFunction is called.

Closures enable access to the external variable outerVariable even after outerFunction has already finished execution. When calling closureExample, both the external and internal variables are output.

In this code, closureExample is a closure that can access outerVariable. Closures maintain references to variables from outer functions, allowing their continued use within inner functions.

closure example

function outerFunction(outerVariable) {
    // 외부 함수의 변수를 참조하는 내부 함수 정의
    function innerFunction(innerVariable) {
        console.log("외부 변수: " + outerVariable);
        console.log("내부 변수: " + innerVariable);
    }

    // 내부 함수 반환
    return innerFunction;
}

// outerFunction을 호출하여 클로저 생성
var closureExample = outerFunction("외부 변수 값");

// 클로저 호출
closureExample("내부 변수 값");


Additional Explanation

When outerFunction is called and innerFunction is returned, outervariable is included as part of the closure. Even after outerFunction has finished executing, innerFunction can still access outervariable. This is because closures maintain references to the necessary variables in the outer scope. Closures enable access to external variables even after the function has completed its execution.

Closures, a fundamental concept in JavaScript, refer to situations where functions remember and have access to variables from their lexical scope (the position where they were declared in the source code). This allows outer functions to access their variables even after the outer function has finished executing. Closures allow functions to continuously access the surrounding state, creating a "closed" environment.

Lexical Environment is an environment determined by the position where a function is defined. When a function is defined, its lexical environment is composed of the variables from the place where the function was created. This lexical environment plays a crucial role in enabling closures to access external variables.

Scope Chain is a mechanism used when functions search for variables. When a function tries to access a variable, JavaScript starts searching for the variable from the current function's lexical environment and goes up the chain to the lexical environments of outer functions. Through this process, closures can access external variables.

scope

// Global Scope
const dataVar = "Kakao.GG";

function outerFunction() {
    // Parent Scope

    function innerFunction() {
        // Local Scope
        console.log(dataVar);
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // Output: Kakao.gg