실행 컨텍스트
소스코드를 실행하는데 필요한 환경을 제공하고, 실행 결과를 관리한다.
식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.
실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.
렉시컬 환경은 EnvironmentRecord와 OuterLexicalEnvironmentReference 두개의 컴포넌트로 구성된다.
스코프는 실행 컨텍스트의 렉시컬 환경이다.
코드의 평가와 실행
전역객체 생성 > 전역 코드 평가와 실행 > 함수1 평가와 실행 > 중첩함수2 평가와 실행 > 함수1로 복귀 > 전역코드로 복귀
* 함수1이 실행되면 전역코드의 실행을 일시중단하고 함수내부로 코드제어권이 이동하고, 코드를 평가하기 시작한다.
* 함수의 렉시컬 환경이 완성된 다음 실행 컨텍스트 스택에 푸시된다.
전역 코드 평가의 흐름
전역 실행 컨텍스트 생성 > 전역 렉시컬 환경 생성 > 전역 환경레코드 생성 > 객체 환경레코드 생성 및 선언적 환경 레코드 생성 > this 바인딩 > 외부 렉시컬 환경에 대한 참조
렉시컬 환경과 렉시컬 스코프
자바스크립트 엔진은 함수의 정의를 평가해 함수 객체를 생성할 때,
현재 실행중인 실행 컨텍스트의 렉시컬 환경(함수의 상위 스코프)을, 함수 객체의 내부슬롯 [[Environment]]에 저장한다.
=> 함수는 자신의 내부슬롯 [[Environment]]에 상위 스코프의 참조(자신이 정의된 환경)를 저장한다.
이걸 참조하는게 외부 렉시컬 환경에 대한 참조 (OuterLexicalEnvironmentReference)이다.
렉시컬 스코프(정적 스코프)는, 함수를 어디에 정의했는지에 따라 상위스코프를 결정한다.
실행 컨텍스트와 블록 레벨 스코프
let const 키워드는 모든 코드블록(함수, if, for, while , try/catch 등등)을 지역스코프로 인정하는 블록 스코프를 따른다.
if문이 실행되면, if문의 블록레벨 스코프를 생성하고, 렉시컬환경을 새롭게 생성하여 기존의 전역 렉시컬 환경을 교체한다.
let 키워드를 사용한 for문은 코드블록이 반복 실행될때마다, 코드블록을 위한 독립적인 렉시컬 환경을 새롭게 생성한다.
클로저
자바스크립트 고유 개념이 아니므로 ECMAScript 사양에는 없다.
함수A 내에 선언된 함수B(중첩함수)의 실행 컨텍스트가 종료되어 생명주기가 끝났음에도, 함수 A(외부 함수)에 선언된의 변수를 참조할수 있어 함수A의 변수가 가비지컬렉팅 되지 않는 현상(또는 이러한 함수)를 클로저 라고 한다.
=> A의 실행 컨텍스트가 제거되어도, A의 렉시컬 환경은 소멸하지 않기 떄문이다. (A의 변수가 참조되고 있기 때문)
=> 중첩함수가 외부함수 변수를 참조하고있고, 외부함수보다 생명주기가 길면 클로저다.
클로저는 상태를 은닉하고, 특정함수에게만 상태변경을 허용한다.
const increase = function(){
let count = 0;
return function(){ // 상위스코프인 즉시실행함수의 렉시컬환경을 기억한다
return ++count;
}
}(); //즉시실행함수는 한번만 실행되므로 increase가 호출될때마다 count가 초기화되지않는다
console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3 따라서 let이 상태를 유지할수있는것이다
캡슐화
객체의 상태를 나타내는 프로퍼티와, 프로퍼티를 참조하고 조작할수있는 메서드를 하나로 묶는것
특정 프로퍼티나 메서드를 감출 목적으로 만들기도 하는데, 이를 정보은닉 이라고 한다.
자바스크립트는 Private를 구현할수있지만 완벽하지 않다. (표준사양이 제안되어있지만 쓰는건 접하지못했음)
'[STUDY] 스터디 > Deep Dive JS' 카테고리의 다른 글
ES6 함수의 추가기능 / ES6 화살표 함수, ...rest (0) | 2022.12.31 |
---|---|
js의 빌트인 객체 3종류 (0) | 2022.12.17 |
js this (0) | 2022.12.17 |
js strict mode / ESlint (0) | 2022.12.06 |
생성자 함수로 객체 생성하기 / new Object (1) | 2022.11.28 |