Java Script

[javaScript] 스코프 체인과 클로저

은선은 2024. 4. 25. 12:56
스코프란?

 

스코프(scope)란 변수와 함수의 접근성과 유효범위를 나타내는 개념입니다. 쉽게 말해, 변수나 함수를 사용할 때 그것이 어디서 유효한지를 결정짓는 것입니다.

자바스크립트에서는 전역 스코프(global scope)와 지역 스코프(local scope)로 구분됩니다.

  • 전역 스코프: 전역 스코프는 코드의 모든 곳에서 접근할 수 있는 범위를 가리킵니다. 전역 스코프에 선언된 변수는 어디서든 참조할 수 있습니다.
  • 지역 스코프: 함수 내에서 선언된 변수는 그 함수의 지역 스코프에 속합니다. 즉, 해당 변수는 그 함수 내부에서만 접근할 수 있습니다. 함수 안에서 선언된 변수는 외부에서는 접근할 수 없습니다.

스코프는 코드의 가독성과 유지보수성을 높이는 데 중요한 역할을 합니다. 변수와 함수의 스코프를 명확하게 구분하여 사용함으로써 의도치 않은 변수의 변경이나 충돌을 방지할 수 있습니다.

 

스코프 체인이란?

 

스코프 체인은 변수를 찾을 때 사용되는 메커니즘입니다. 코드를 실행할 때 변수에 접근하면 자바스크립트 엔진은 현재 실행 중인 함수의 스코프부터 시작하여 변수를 찾습니다. 만약 변수를 현재 스코프에서 찾지 못하면 외부 함수, 전역 스코프로 이동하여 검색합니다. 이렇게 중첩된 함수 또는 블록 내에서 변수를 찾을 때까지 스코프 체인을 따라가며 검색합니다.

 

클로저란?

 

클로저는 함수가 생성된 스코프를 기억하고 해당 스코프의 변수에 접근할 수 있는 메커니즘입니다. 함수 내부에서 선언된 변수가 외부 함수의 범위에서도 유지되는 것을 의미합니다. 이를 통해 클로저를 사용하면 함수가 반환된 후에도 함수 내부의 변수에 접근할 수 있습니다. 클로저는 주로 외부 함수의 변수를 보호하고 함수 간의 데이터를 공유하는 데 사용됩니다.

 

스코프 체인과 클로저의 관계는?

 

스코프 체인과 클로저는 자바스크립트에서 변수의 범위와 접근성을 결정하는 중요한 개념입니다.

간단히 말하면, 스코프 체인은 변수를 찾는 방법을 정의하고, 클로저는 함수가 생성된 스코프를 기억하여 해당 스코프의 변수에 접근할 수 있게 합니다. 이를 통해 함수는 외부 변수에 접근할 수 있고, 클로저를 사용하여 변수를 보호하고 데이터를 공유할 수 있습니다.

 

스코프 체인에 따르면 함수 내에 선언된 변수는 그 함수 내부에서만 접근 할 수 있는데.
클로저는 함수 내에 선언된 변수를 외부 함수에서도 접근할 수 있도록 하는건가요?
 

네, 맞습니다. 스코프 체인에 따르면 함수 내에 선언된 변수는 해당 함수의 지역 스코프에 속하므로 함수 외부에서는 접근할 수 없습니다. 하지만 클로저를 사용하면 함수 내에서 선언된 변수를 외부 함수에서도 접근할 수 있도록 할 수 있습니다.

클로저는 함수가 생성될 때 해당 함수 내에서 사용되는 변수들을 기억하는 메커니즘입니다. 함수 내에서 선언된 변수들은 함수가 종료된 후에도 해당 변수들을 사용할 수 있습니다. 이를 통해 외부 함수에서 내부 함수의 변수에 접근할 수 있으며, 이러한 동작을 통해 외부 함수의 변수를 보호하거나 함수 간에 데이터를 공유할 수 있습니다. 클로저를 사용하면 함수의 스코프가 유지되며, 외부 함수의 변수를 내부 함수에서 계속해서 사용할 수 있게 됩니다.

 

클로저는 외부함수 returen 값으로 익명함수를 반환하는 건가요?
 

네, 맞습니다. 일반적으로 클로저는 외부 함수가 내부 함수를 반환하는 경우에 발생합니다. 외부 함수가 내부 함수를 반환하면서, 내부 함수가 외부 함수의 스코프에 접근하는 경우를 클로저라고 합니다.

클로저가 발생하는 일반적인 패턴은 다음과 같습니다.

function outerFunction() {
    let outerVariable = 'I am outer';

    function innerFunction() {
        console.log(outerVariable); // 외부 함수의 변수에 접근
    }

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

const closureExample = outerFunction(); // 내부 함수를 변수에 할당

closureExample(); // 클로저를 통해 외부 함수의 변수에 접근

위 코드에서 outerFunction은 외부 함수로, innerFunction은 내부 함수입니다. outerFunction 내부에 있는 innerFunction이 외부로 반환됩니다. 반환된 innerFunction은 클로저가 되며, 외부 함수의 변수에 접근할 수 있습니다. 이러한 구조를 통해 클로저는 외부 함수의 변수를 보호하고 내부 함수가 외부 함수의 변수에 계속 접근할 수 있도록 합니다.