[CS 기초] 렉시컬 스코프, 스코프 체인, 클로저의 관계

상관관계

렉시컬 스코프(Lexical Scope), 스코프 체인(Scope Chain), 클로저(Closure)는 서로 밀접한 관련이 있는 프로그래밍 개념들

 

이들 간의 관계를 이해하려면 자바스크립트와 같은 렉시컬 스코프를 가지는 언어의 함수가 어떻게 실행되고, 변수가 어떻게 조회되는지를 알아야 함

- 렉시컬 스코프(Lexical Scope)

렉시컬 스코프는 함수를 처음 작성할 때 결정됨

함수가 어디서 호출되었는지가 아니라 어디에 작성되었는지에 따라 상위 스코프가 결정됨
이 스코프 결정 방식은 코드를 예측 가능하게 만들고, 어디서 변수를 찾아야 할지 명확하게 함

대부분의 현대 프로그래밍 언어들은 렉시컬 스코프를 사용하여, 코드를 작성한 그 형태에 따라 스코프를 결정

 

렉시컬 스코프(정적 스코프)는 함수가 정의된 위치에 따라 그 스코프가 결정된다는 특징을 말함

함수의 실행 컨텍스트가 아니라 선언될 때의 환경이 스코프를 결정함

function outerFunc() {
  var lexicalVar = 'I am lexical';

  function innerFunc() {
    console.log(lexicalVar); // 'I am lexical', 선언 시점의 스코프를 참조
  }

  return innerFunc;
}

var myInnerFunc = outerFunc(); // innerFunc는 outerFunc의 렉시컬 스코프를 '기억'
myInnerFunc();                 // 'I am lexical' 출력

 

 

- 스코프 체인(Scope Chain)

함수가 실행될 때, 자바스크립트 엔진은 변수를 찾기 위해 스코프 체인을 사용함

이 체인은 현재 스코프에서 시작하여 상위 스코프로 올라가면서 필요한 변수를 찾음
스코프 체인은 렉시컬 스코프의 개념에 기반

각 함수는 자신이 정의된 렉시컬 환경을 참조하고, 그 환경은 해당 함수가 정의된 위치의 상위 스코프 정보를 포함함

 

스코프는 일종의 계층 구조를 이루며, 내부 스코프에서 외부 스코프로 변수를 검색할 수 있는 링크가 형성

스코프 체인은 프로그래밍 언어, 특히 자바스크립트에서 변수 또는 함수의 스코프가 결정되는 방식을 설명하는 개념

각각의 함수 또는 블록 스코프는 자신만의 스코프를 가지며, 이는 해당 함수나 블록 내에서 선언된 변수들에 대한 접근성을 정의

var globalVar = 'global';

function outerFunction() {
  var outerVar = 'outer';

  function innerFunction() {
    var innerVar = 'inner';

    console.log(innerVar);  // 'inner', 현재 스코프에서 찾음
    console.log(outerVar);  // 'outer', 바로 바깥 스코프에서 찾음
    console.log(globalVar); // 'global', 글로벌 스코프에서 찾음
  }

  innerFunction();
}

outerFunction();

 

 

- 클로저(Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합

클로저를 통해, 함수는 자신이 생성될 때의 환경을 "기억" 할 수 있음
함수가 자신의 외부 스코프에 접근할 수 있는 것은 스코프 체인을 통해서이고, 이 스코프 체인은 렉시컬 스코프 규칙에 따라 형성
클로저는 내부 함수가 외부 함수의 스코프에 있는 변수에 접근할 수 있게 하며, 이는 외부 함수의 실행이 끝난 후에도 지속됨

 

함수가 자신이 선언될 당시의 외부 변수들에 대한 참조를 유지하는 경우, 그 함수를 클로저라고 함

이를 통해 렉시컬 스코프 밖에서도 해당 변수에 접근할 수 있음

function createCounter() {
  var count = 0;
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    }
  };
}

var counter = createCounter();
counter.increment(); // 1 출력, count 변수에 접근
counter.increment(); // 2 출력, 동일한 count 변수에 접근하여 값을 변경
counter.decrement(); // 1 출력, 동일한 count 변수에 접근하여 값을 변경

 

 

정리

1. 렉시컬 스코프가 정의되면, 함수는 그것을 기반으로 자신의 스코프 체인을 형성

2. 이 체인은 함수가 어떻게 외부 스코프의 변수에 접근할지를 결정
3. 스코프 체인은 함수가 실행될 때 실제로 변수를 조회하는 메커니즘

4. 현재 스코프에서 변수를 찾지 못하면 체인을 따라 올라가면서 계속 찾음
5. 클로저는 이러한 스코프 체인의 "스냅샷"을 활용하여 외부 함수가 종료된 후에도 그 스코프의 변수에 접근할 수 있는 기능을 제공
6. 이 관계를 통해 자바스크립트에서 함수는 렉시컬 스코프에 따라 정의되고, 실행될 때 스코프 체인을 통해 변수를 찾으며, 클로저를 통해 외부 스코프의 변수를 기억할 수 있게 됨