🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 실행 컨텍스트

자바스크립트는 컴파일 언어의 장점을 취한 인터프리터 언어이다.<br/> 자바스크립트 코드는 평가(컴파일) 단계와 실행(인터프리터) 단계로 나누어져있는데, 평가 단계 후 코드 실행을 위한 환경 정보를 모아놓은 객체를 형성한다.<br/> 즉, 코드 실행을 위한 환경 정보를 모아놓은 객체가 실행 컨텍스트이다.

기본적으로 전역 코드에 대한 전역 실행 컨텍스트를 생성하고, 함수의 호출 시 함수의 선언부를 기준으로 실행 컨텍스트를 생성한다.

콜스택(실행 컨텍스트 스택)

스택 자료구조 형태로 실행 컨텍스트가 저장되는 구조이다. 최상단에 위치한 실행 컨텍스트부터 처리하며 콜스택을 비워나간다.<br/> 즉, 코드의 실행 순서를 관리한다.

렉시컬 환경

현재 실행 컨텍스트에서 선언된 식별자(변수, 함수, 클래스 등의 이름)를 등록한다.<br/> 즉, 식별자와 스코프를 관리한다.

실행 컨텍스트의 구조

• VariableEnvironment: LexicalEnvironment와 같은 구조로 초기값을 snapshot 형식으로 갖고 있다.
• LexicalEnvironment(중요)
  • EnvironmentRecord: 현재 스코프에 대한 식별자 정보를 담고 있는 객체(호이스팅관련)
    • Object Envioronment Record: var, 함수 선언문에 의한 변수에 대한 정보를 담고 있는 객체
    • Declarative Environment Record: let, const에 의한 변수 및 함수에 대한 정보를 담고 있는 객체
  • OuterEnvironmentReference: 함수가 정의되기 직전 스코프(외부 스코프)에 대한 LexicalRecord를 참조하는 객체(스코프 체인관련)
  • ThisBinding: 객체 내부에서 객체를 가리키는 this를 binding하는 객체

실행 컨텍스트 생성 -> 렉시컬 환경 생성 -> 환경 레코드 생성(객체 환경 -> 선언적 환경) -> this 바인딩 -> 외부 렉시컬 환경 참조 결정

블록 레벨 스코프와 렉시컬 환경

if문과 같은 블록이 형성되었을 때, 해당 코드 블록을 위한 새로운 렉시컬 환경이 생성되며 기존의 렉시컬 환경과 교체한다.<br/> var는 함수 레벨 스코프, let/const는 블록 레벨 스코프를 갖는다.

반드시 기억할 것

실행 컨텍스트의 생성은 함수를 호출할 때이다. 하지만 그 함수의 실행 컨텍스트에서 OuterEnvironmentReference는 함수를 정의한 시점을 기준으로 상위 스코프를 결정한다는 점은 꼭 기억하자!

JavaScript 클로저

클로저란 어떤 외부함수의 변수를 참조하는 내부함수(중첩함수)가 외부로 전달되어 실행될 수 있을 때 일어나는 현상이다.<br/> 외부함수의 실행 컨텍스트는 이미 종료가 되었음에도 외부로 전달되 내부함수가 호출 가능하기에 외부함수의 렉시컬 환경이 GC(가비지 콜렉터)에 의해 메모리에서 제거되지 않게 된다. 이와 같은 현상이 곧 클로저이며 이런 클로저 현상을 이용하여 콜백함수에서 외부 데이터 참조, 정보 은닉, 부분적용함수, 커링함수 등으로 이용할 수 있다.

클로저 현상 시 개념적으론 외부함수의 렉시컬 환경 전부가 메모리에서 지워지면 안되지만, 자바스크립트 엔진에서는 그 렉시컬 환경 내에서 실제 내부함수가 참조하는 변수에 대해서만 제거되지 않도록 구현되어있다.

undefined