스코프와 스코프체인

자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다.

 

스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다.
스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다.

 

함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다.

1. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사
2. 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가

 

예시 코드를 보자.

const a = 1;
const outer = function () {
  const b = 2;
  const inner = function () {
    console.log(b);
    console.dir(inner);
  };
  inner();
};

outer();

 

실행 결과는 이렇다.

 

이 코드의 스코프를 도식화하면 이렇게 된다.

1. 전역 컨텍스트 생성, 이 때 스코프 체인에는 전역 객체가 들어간다.
2. outer 함수가 실행되며 실행 컨텍스트 생성, 스코프 체인은 현재 실행되고 있는 함수인 outer의 변수 객체 -> 상위 컨텍스트의 스코프체인인 전역 객체이다.
3. inner 함수가 실행되며 실행 컨텍스트 생성, 스코프 체인은 현재 실행되고 있는 함수인 inner의 변수 객체 -> 상위 컨텍스트의 스코프체인인 = outer 변수 객체 -> 전역 객체이다.

여담으로 참고한 책들에서는 대부분 var키워드를 사용했다. 하지만 요즘에는 let, const를 주로 사용한다. 둘의 차이는 var는 함수 레벨에서, let, const는 블록 레벨 스코프를 가진다.

 

var

• 함수 내부 외에서 선언된 변수는 전역 변수가 된다. 심지어 for문에서 선언한 var 변수도 전역 변수가 된다.
• 변수 이름 중복을 허용하는 문제가 있다.
• 선언과 동시에 할당해 선언문 이전 라인에서 접근이 가능하다.

 

let과 const

• 선언 단계와 초기화 단계가 나누어져 있다. 초기화 단계는 변수 선언문에 도달했을 때 이루어진다. 그래서 선언문 이전에 접근하면 reference error가 찍힌다. 초기화 되지 않아 메모리 공간이 확보되지 않은 상태로 일시적인 사각지대라고 부른다.
• 변수 이름 중복을 허용하지 않는다.
• const는 한 번 할당된 값을 변경할 수 없다. let은 재할당이 가능하다.

 

참고자료

• 인사이드 자바스크립트 5.3장
• 코어 자바스크립트 2장
• https://olaf-go.medium.com/%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-ef3c8e8584d4
• https://www.howdy-mj.me/javascript/var-let-const