💡 13. 스코프
자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위. 즉, 스코프는 식별자가 유효한 범위
- 렉시컬 환경 : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지
- 실행 컨텍스트 : 렉시컬 환경을 구현한 것
만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다는 문제점이 발생한다. 쉽게 말하여, 스코프란 컴퓨터의 폴더(디렉터리) 같은 개념
📌 스코프의 종류
- 전역 스코프 : 코드의 가장 바깥 영역
- 지역 스코프 : 함수 몸체 내부
📌 스코프 체인
- 스코프가 함수의 중첩에 의해 계층적으로 구조를 갖는다는 것
- 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것
- 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다. 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.
- 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다.
- 변수를 참조할 때 JS 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
- 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.
📌 함수 레벨 스코프
- 함수 레벨 스코프 : 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다. (var 키워드)
- 블록 레벨 스코프 : C나 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다.
- var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
var x = 1;
if(true) {
// 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
// 따라서 x는 전역 변수다.
// 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
var x = 10;
}
console.log(x); // 10
📌 동적/정적 스코프
- 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
- 정적 스코프 (렉시컬 스코프) : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
JS를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
JS에서 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.
var x = 1;
function foo () {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1
함수 정의한 위치에서 상위스코프 방향으로 식별자 검색
반응형
'📝 Javascript > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[Javascript] 모던 자바스크립트 Deep Dive - 15장 let, const 키워드와 블록 레벨 스코프 (0) | 2023.08.20 |
---|---|
[Javascript] 모던 자바스크립트 Deep Dive - 14장 전역 변수의 문제 (0) | 2023.08.16 |
[Javascript] 모던 자바스크립트 Deep Dive - 12장 함수 (0) | 2023.08.15 |
[Javascript] 모던 자바스크립트 Deep Dive - 11장 원시 값과 객체의 비교 (0) | 2023.08.12 |
[Javascript] 모던 자바스크립트 Deep Dive - 10장 객체 리터럴 (0) | 2023.08.12 |