heeji.dev

스코프와 스코프체인

2023-11-23
자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다.
스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다.
스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다.
함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다.
  1. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사
  1. 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가
예시 코드를 보자.
실행 결과는 이렇다.
notion image
이 코드의 스코프를 도식화하면 이렇게 된다.
notion image
  1. 전역 컨텍스트 생성, 이 때 스코프 체인에는 전역 객체가 들어간다.
  1. outer 함수가 실행되며 실행 컨텍스트 생성, 스코프 체인은 현재 실행되고 있는 함수인 outer의 변수 객체 -> 상위 컨텍스트의 스코프체인인 전역 객체이다.
  1. inner 함수가 실행되며 실행 컨텍스트 생성, 스코프 체인은 현재 실행되고 있는 함수인 inner의 변수 객체 -> 상위 컨텍스트의 스코프체인인 = outer 변수 객체 -> 전역 객체이다.
여담으로 참고한 책들에서는 대부분 var키워드를 사용했다. 하지만 요즘에는 letconst를 주로 사용한다. 둘의 차이는 var는 함수 레벨에서, letconst는 블록 레벨 스코프를 가진다.
var
  • 함수 내부 외에서 선언된 변수는 전역 변수가 된다. 심지어 for문에서 선언한 var 변수도 전역 변수가 된다.
  • 변수 이름 중복을 허용하는 문제가 있다.
  • 선언과 동시에 할당해 선언문 이전 라인에서 접근이 가능하다.
let과 const
  • 선언 단계와 초기화 단계가 나누어져 있다. 초기화 단계는 변수 선언문에 도달했을 때 이루어진다. 그래서 선언문 이전에 접근하면 reference error가 찍힌다. 초기화 되지 않아 메모리 공간이 확보되지 않은 상태로 일시적인 사각지대라고 부른다.
  • 변수 이름 중복을 허용하지 않는다.
  • const는 한 번 할당된 값을 변경할 수 없다. let은 재할당이 가능하다.

참고자료

  • 인사이드 자바스크립트 5.3장
  • 코어 자바스크립트 2장