13 - 스코프
13.3 스코프 체인
스코프가 계층적으로 연결된 것을 스코프 체인이라 한다.
변수를 참조할 때 JS 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프로 이동하며 선언된 변수를 검색한다.
스코프 체인은 물리적 형태로 존재한다.
JS 엔진은 코드 실행에 앞서 위 그림과 유사한 자료구조인 렉시컬 환경을 실제 생성한다.
13.5 렉시컬 스코프
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo();
bar();
두 가지 패턴을 예측한다.
- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정 - 동적 스코프
- 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정 - 정적 스코프, 렉시컬 스코프
JS를 포함한 대부분의 언어는 렉시컬 스코프를 따른다.
즉 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다.
생성된 bar 함수 객체는 자신이 정의된 스코프를 기억한다.
호출되면 호출된 곳에 관계 없이 자신이 기억하고 있는 전역 스코프를 상위 스코프로 사용한다.
실행 결과는, 전역 변수 x의 값 1이 두 번 출력된다.
14 - 전역 변수의 문제점
14.1 변수의 생명주기
호이스팅은 스코프 단위로 동작한다.
var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.
14.3 전역 변수의 사용 억제
모듈 패턴 - 클로저를 기반으로 동작한다. 전역 변수의 억제와 캡슐화까지 구현 가능한 것이 특징.
모듈 패턴은 전역 네임스페이스 오염을 막고 한정적이지만 정보 은닉을 구현하기 위해 사용된다.
var Counter = (function () {
// private 변수
var num = 0;
// 외부로 공개할 데이터, 메서드를 프로퍼티로 추가한 객체를 반환
return {
increase() {
return ++num;
},
decrease() {
return --num;
},
};
})();
console.log(Counter.num); // undefined
ES6 모듈은 있다는 것만 알고 넘어가면 될 듯.
15 - let, const와 블록 레벨 스코프
대부분 익숙한 내용이었음.
let과 const는 변수 호이스팅이 실제로 발생하지만 초기화가 되지 않아서 호이스팅이 발생하지 않는다는 것
스코프 시작 지점부터 초기화 지점까지 변수 참조가 불가능한 구간을 일시적 사각지대(Temproal Dead Zone)라고 부른다.
'모던자바스크립트-DeepDive' 카테고리의 다른 글
08 ~ 12 챕터 (2) | 2024.07.24 |
---|---|
04 ~ 07 챕터 (3) | 2024.07.24 |