[4주차] 위클리 페이퍼 - 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명해 주세요.

 

렉시컬 스코프란?

변수와 블록의 스코프(범위)가 코드의 구조에 따라 결정되는 것을 의미한다. 이는 함수나 블록이 정의된 시점의 외부 환경을 기준으로 결정한다. 즉, 함수가 실행될 때가 아니라, 선언될 때 결정되는 것을 의미한다.

렉시컬 스코프의 작동 방식

1. 스코프 결정 시점
   • 함수가 정의된 위치를 기준으로 스코프가 결정한다.
2. 스코프 체인
   • 함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾는다.
   • 이 과정을 스코프 체인이라고 한다.
3. 상위 스코프 참조
   • 내부 함수는 자신이 정의된 외부 환경(상위 스코프)을 참조 가능하다.
   • 이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지.

렉시컬 스코프의 예시

• outerFunction은 outerVar 변수를 참조할 수 있으며, innerFunction은 outerVar와 innerVar 변수를 모두 참조할 수 있다.
• innerFunction이 outerFunction 내부에서 정의되었기 때문에, innerFunction은 outerFunction의 스코프를 참조할 수 있기 때문이다.

const outerVar = 'I am outside!';

function outerFunction() {
    const innerVar = 'I am inside!';

    function innerFunction() {
        console.log(outerVar); // 'I am outside!'
        console.log(innerVar); // 'I am inside!'
    }

    innerFunction();
}

outerFunction();

클로저와 렉시컬 스코프

• 클로저란?
  • 함수와 함수가 선언될 당시의 렉시컬 환경의 조합으로, 외부 함수의 변수를 내부 함수에서 접근할 수 있도록 함.
  • 렉시컬 스코프와 같은 기능을 통해, 클로저와 같은 기능을 활용할 수 있게 됨
• 클로저의 예시
  • makeCounter 함수는 count 변수를 가지고 있으며, 내부에 count 변수를 증가시키는 함수를 반환
  • 반환된 함수는 makeCounter 함수의 렉시컬 환경을 기억하고 있어, count 변수를 계속해서 증가

function makeCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    }
}

const counter = makeCounter();
counter(); // 1
counter(); // 2

참고자료

• MDN Web Docs - Lexical Scoping
• Lexical Environment In JavaScript
• 코드잇 문서