[js] 스코프

스코프란?

스코프는 식별자가 유효한 범위를 말한다. 또 다른 말로는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

전역 스코프 / 지역 스코프

• 전역 스코프 : 전역 코드에 변수를 선언하면 전역 변수가 되고 어디서든 참조가 가능하다.
• 지역 스코프 : 함수 몸체 내부에 선언된 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

스코프 체인

함수가 중첩되면 스코프도 중첩된다. 이렇게 중첩으로 인해 계층적으로 연결된 구조를 가지게 되는데 이를 스코프 체인이라 한다.

어떻게 연결이 되냐면, 실행 컨텍스트가 생성되면 렉시컬 환경이 만들어진다. 렉시컬 환경에는 outer 참조 값이 있다. 이 outer가 상위 스코프를 참조하게 되고 연결이 되게 된다.

스코프 체인은 단방향으로 연결되어 있다. 어떤 변수를 참조할 때 참조하고자 하는 변수의 스코프를 시작으로 등록된 식별자를 찾기 시작한다. 스코프가 동작하는 과정을 살펴보면

1. mozzi라는 변수를 참조하려 한다.
2. 현재 mozzi를 참조하려는 스코프에 식별자가 있는지 찾는다.
3. 없다.
4. 상위 스코프로 올라가서 mozzi 식별자가 있는지 찾는다.
5. 없다.
6. 한 단계 더 올라가서 찾는다.
7. 없다.
8. 한 단계 더 올라가서 찾는다.
9. 찾을 때까지 반복
10. 찾았으면 찾은 변수를 참조하고 검색을 종료한다.

이렇게 스코프 체인은 단방향으로 이루어져 있다. 상위 스코프로는 올라가서 탐색할 수 있지만 하위 스코프로 내려가서 탐색할 순 없다.

블록 레벨 스코프 / 함수 레벨 스코프

자바스크립트의 var 키워드는 함수 레벨 스코프만 인정한다. 블록 레벨 스코프를 지원하지 않는다.

const, let 키워드는 블록 레벨 스코프를 지원한다.

• 함수 레벨 스코프: 함수 몸체에 생성된 지역 스코프
• 블록 레벨 스코프 : if 문, for 문 등 코드 블록이 만드는 지역 스코프

렉시컬 스코프

스코프는 함수가 호출한 위치에 따라 또는 정의된 위치에 따라 정해질 수 있다.

• 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
• 렉시컬 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정

자바스크립트는 렉시컬 스코프를 따른다. 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 결국 자신이 정의된 스코프가 상위 스코프가 된다.