🌱 스코프란?
- 정의 : 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위가 결정되는데, 즉, 식별자가 유효한 범위를 스코프라고 한다.
- 필요성 : 스코프라는 개념이 없다면, 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다.
function add(x, y) {
// 매개변수의 스코프는 함수 몸체 내부다.
console.log(x, y); // 2, 5
return x + y;
}
add(2, 5);
console.log(x, y); // ReferenceError: x is not defined🌱 스코프의 종류
전역(global): 코드의 가장 바깥 영역으로, 전역에 선언한 변수는 전역 스코프를 가져 어디서든지 참조할 수 있다.지역(local): 함수 몸체 내부 영역으로, 지역에 선언한 변수는 지역 스코프를 가져 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있다.
🌱 스코프 체인(scope chain)
- 정의 : 스코프가 계층적으로 연결된 것. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프 방향으로 이동하며 선언된 변수를 검색(identifier resolution)한다. (스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다.)
🌱 함수 레벨 스코프 & 블록 레벨 스코프
함수 레벨 스코프: var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정한다. (코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.)var x = 1; if (true) { // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에 선언되었어도 전역 변수이다. // 이는 의도치 않게 변수 값이 변경되는 부작용이 있다. var x = 10; } console.log(x); // 10블록 레벨 스코프: C나 Java등 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만든다. (ES6에서 도입된 let, const 키워드는 블록 레벨 스코프를 지원한다.)
🌱 다이나믹 스코프 & 렉시컬 스코프
다이나믹(동적) 스코프: 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하는 방식.렉시컬(정적) 스코프: 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 방식.var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1
자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.
🌿 알게된 점 & 느낀 점
바로 위의 예제에서 10과 1이 출력될 것이라고 예상했는데, 함수가 호출된 위치는 상위 스코프 결정에 아무런 영향이 없다는 것을 깨달았다. 함수 선언문으로 정의된 함수들은 런타임 전에 먼저 평가되어 함수 객체를 생성하고, 자신이 정의된 스코프(전역 스코프)를 기억해서 상위 스코프로 사용한다는 점을 잊지말자!
| 참고자료 |
모던 자바스크립트 Deep Dive
FE developer