220830(화)

🪴 성장일지

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

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

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

JavaScript 실행 컨텍스트

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

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

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

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

렉시컬 환경

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

실행 컨텍스트의 구조

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

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

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

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

반드시 기억할 것

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

JavaScript 클로저

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

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