스코프란?
The current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa. - MDN
MDN의 정의에 따르면 스코프는 현재 실행되는 컨텍스트를 의미 합니다. 여기서 컨텍스트는 값이나 표현식이 표현되거나 참조되는 것을 의미 합니다.
쉬운 이해를 위해 다시 생각해 보면 스코프는 식별자가 포함된 범위로 이해할 수 있을 것 같습니다. 다시 말해 정의된 식별자가 표현되거나 참조할 수 있는 범위를 말합니다.
스코프의 위치
전역 스코프(Global Scope)
전역 스코프는 코드 어디에서든지 참조할 수 있습니다. 변수가 전역 스코프를 가지면 전역 변수라 구분지어 부릅니다.
지역 스코프(Local Scope)
지역 스코프는 스코프의 유효 범위 내에서만 참조되거나 해당 지역 스코프의 하위 스코프에서만 참조할 수 있습니다.
함수 레벨 스코프
대부분의 C 계열 언어들은 블록 레벨 스코프를 따릅니다. 블록 레벨 스코프는 코드 블록({...})내에서 유효한 스코프를 의미 합니다. 자바스크립트는 이와 다르게 함수 레벨 스코프를 따릅니다.
자바스크립트에서도 블록 레벨 스코프를 구현하기 위한 변수가 ECMAScript 6에서 도입되었습니다. let, const 선언자는 변수가 블록 레벨 스코프를 적용 받도록 합니다.
Lexical Scope
자바스크립트는 기본적으로 Lexical scope를 따르고 있습니다. Lexical Scope는 식별자가 선언된 위치에 따라 상위 스코프를 결정합니다. 여기서 중요한 것은 선언된 위치 입니다.
식별자는 Lexical Scope에서 상위 스코프에 접근할 수 있지만 하위 스코프에는 접근할 수 없습니다. Lexical Scope의 특성과 함수 레벨 스코프의 특성을 활용하면 클로저를 구성할수 있습니다.
Dynamic Scope
Dynamic Scope는 식별자가 호출된 위치에 따라 상위 스코프가 결정 됩니다. Lexical Scope와의 가장 큰 차이점은 식별자가 선언될때 상위 스코프가 결정되지 않고 호출될때 결정된다는 점입니다.
자바스크립트는 기본적으로 Lexical scope를 따르고 있습니다. 다만 예외 사항이 존재 합니다.
This 키워드
this 키워드는 자기참조변수 입니다. this의 중요한 특성 중 하나가 바로 this가 호출될 때 가리키는 실행함수가 결정된다는 점입니다.
'호출될 때 결정된다'는 점은 Dynamic Scope의 특성과 유사해 보입니다.
this가 결정되는 순간은 4가지로 구분할 수 있습니다.
- 함수 호출
함수를 호출할 때 this는 비 엄격 모드에선 전역객체(window, global)를 참조하며 엄격 모드에선 undefined가 할당됩니다. - 메서드 호출
메서드를 호출할 때 this는 메서드가 정의된 객체를 참조합니다. - 생성자 호출
생성자를 호출할 때 this는 생성자로 인해 새로 생성된 객체를 참조합니다. - call, apply, bind
call의 this는 메서드 호출에 해당됩니다. 따라서 원형 객체를 참조합니다.
apply는 call과 동일하게 작동되지만 두번째 인자에 배열을 받는 차이가 있습니다.
bind는 새로운 함수를 생성합니다. 함수도 객체의 일종이기 때문에 bind는 생성자 호출과 같이 새로 생성된 '함수'를 참조합니다.
