[5주차 위클리페이퍼] 렉시컬스코프

 

렉시컬스코프

 

렉시컬 스코프 또는 정적 스코프는 함수가 정의된 위치에 따라 변수의 유효 범위(scope)가 결정되는 규칙을 말한다. 

 

예시 코드를 먼저 보면 다음과 같다.

let a = "global";

const outerFunc = () => {
  let b = "outer";
  
  const innerFunc = () => {
    let c = "inner";
    console.log(a, b, c);  // global, outer, inner
  }
  
  innerFunc();
}

outerFunc();

 

위 코드에서 a는 어디서든 사용할 수 있는 전역변수, b는 outerFunc 내에서만 사용할 수 있는 변수, c는 innerFunc 내에서만 사용할 수 있는 변수이며, innerFunc 함수가 가장 안쪽에 정의되어 있으므로 렉시컬스코프에 의해 innerFunc 함수 내부에서 콘솔로 변수 a, b, c 모두를 사용할 수 있게 된다.

 

또, 위 예시에서도 확인할 수 있는 게 스코프체인이다. 

 

자바스크립트가 변수를 검색할 때 이 스코프체인을 사용하는데, 검색 시 현재 스코프에서 우선적으로 찾고, 찾지 못하면 부모 스코프를 따라 올라가며 검색한다. 이 검색은 전역 스코프에 도달할 때까지 계속된다. 

 

클로저와 렉시컬스코프

 

클로저(closure)는 자바스크립트에서 함수와 함수가 선언된 렉시컬 환경을 함께 묶은 개념이다. 아래 예시에서 클로저에 대해 확인할 수 있다.

const outerFunc = () => {
  let a = "outer";
  
  const innerFunc = () => {
    console.log(a);
  }
  
  return innerFunc;
};

const inner = outerFunc();
inner();   // outer

 

위 예시에서 innerFunc 함수는 outerFunc 함수 내부에 정의되어 있기 때문에 outerFunc 함수가 호출되고 종료되어도 innerFunc 함수는 outerFunc 함수의 스코프에 접근할 수 있다. 즉, 렉시컬 스코프가 구현되어 있는 상태이다.

 

이때 innerFunc 함수는 outerFunc 함수의 변수 a를 기억하고 접근할 수 있다. 

 

렉시컬스코프는 함수와 변수를 함께 사용하다보면 거의 항상 사용하게 되는 중요한 개념이라는 생각이 든다. 사용할 때마다 정확히 인지하고 사용하는 게 면접대비에도 중요할 것 같다.