1. 실행 컨텍스트(Execution Context)

  • 코드를 실행하기 위해 필요한 정보들을 가진 범위를 객체 형태로 나타낸 것입니다. 코드의 실제 진행 상황을 추적하는데 도움이 됩니다.
    • 전역 공간에서 자동으로 생성되는 전연 컨텍스트
    • 함수 실행에 의한 컨텍스트
    • eval함수
  • 자바스크립트가 로드되고 이를 엔진이 처리하면서 실행 컨텍스트를 만듭니다. 어떤 코드를 실행하고 이 컨텍스트에는 어떤 변수들이 있는지 알기 위한 정보들이 있습니다.
  • 실행 컨텍스트를 구성하는 LexicalEnvironment는 현재의 실행 컨텍스트가 실행되기 위한 여러 정보를 담고 있습니다. LexicalEnvironment는 식별자들에 대한 정보를 담은 EnvironmentRecord와, 상위 LexicalEnvironment를 참조해 스코프 체인을 가능하게 하는 OuterEnvironmentReference 정보로 구성되어 있습니다. EnvironmentRecord는 식별자 바인딩을 관리하고, binding object라 불리는 특정 객체의 속성으로 선언된 식별자들을 관리합니다. OuterEnvironmentReference는 현재의 실행 컨텍스트를 구성한 함수가 선언되는 시점에서의 상위 LexicalEnvironment를 참조하기 때문에 식별자의 유효 범위를 상위로 거슬러 올라가 찾게 되는 스코프 체인이 가능합니다.
    • 실행 컨텍스트 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집합니다.
    • 실행 컨텍스트를 생성할 때 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성됩니다.
    • VariableEnvironment는 스냅샷 유지를 목적으로 사용합니다.
    • LexicalEnvironment는 함수 실행 도중에 변경되는 사항이 즉시 반영됩니다.
    • LexicalEnvironment와 VariableEnvironment는 다음과 environmentRecord와 outerEnvironmentReference로 구성되어 있습니다.
    • environmentRecord는 매개변수 식별자, 변수 식별자, 선언한 함수의 식별자 등을 수집합니다.
    • 이것 때문에 호이스팅이라는 개념이 사용됩니다.
    • 호이스팅은 코드 해석을 좀 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념입니다.
    • 변수 선언부와 함수 선언문에 호이스팅이 발생합니다. 함수 표현식을 사용할 경우 함수의 선언부만 호이스팅이 발생합니다.
    • outerEnvironmentReference는 상위(직전) 컨텍스트의 LexicalEnvironment 정보를 참조한다.

이것 때문에 스코프가 형성되고, 스코프 체인을 통해 상위 컨텍스트에 접근할 수 있다. 스코프는 변수의 유효범위를 말한다.

실행 컨텍스트 구성

  • 전역공간은 자동으로 컨텍스트로 구성됩니다.
  • 함수가 ()를 붙여 실행하면 서브루틴이 호출되면 실행 컨텍스트가 새롭게 만들어집니다. 함수가 종료되면 실행 컨텍스트는 사라집니다. 실행 컨텍스트엔 함수 실행에 필요한 정볼들이 모여 있습니다.
  • eval()함수를 실행할 경우도 동일합니다.
  • ES6+ 이상 부터는 block을 만들어도 컨텍스트가 만들어 집니다.

자바스크립트의 함수 객체

  • 서브루틴으로 수행될 수 있는 객체입니다.
  • 동작을 나타내는 실행 코드가 있으면서, (Don’t Notation을 통해) 일반 객체와 동일하게 동작할 수 있습니다.
  • 서브루틴으로 실행 예) sum()
  • 일반 객체처럼 동작 예) sum.a =1;

2. 콜 스택(Call stack)

  • 현재 실행되고 있는 실행 컨텍스트를 추적하기 위한 구조체입니다.
  • 콜 스택의 바닥엔 전역 컨텍스트가 존재합니다.
  • 함수가 호출될 때 해당 함수의 실행 컨텍스트가 Push되고 함수가 종료되면 Pop됩니다.

3. 스코프(Scope)

  • 현재 접근할 수 있는 변수들의 범위입니다.
  • 현재 실행 중인 컨텍스트에서 변수를 찾을 수 없다면, 이전 컨텍스트로 탐색 범위를 옮깁니다.
  • 이를 스코프 체인(Scope Chain)이라고 합니다.

4. 클로저(Closure)

  • 함수가 함수를 반환할 때, 반환되는 함수는 자신이 둘러싼 메모리 환경을 가지고 반환됩니다.
  • 함수의 호출이 아닌 정의된 위치에 결정되는 스코프이며 이를 렉시컬 스코프라 합니다.
  • 상위 실행 컨텍스트로 스코프 체인을 이어가기 전 클로저 변수가 있는 먼저 확인합니다.
  • 클로저 변수는 함수가 호출이 되어야만 접근이 가능하기 때문에 정보 은닉에 활용됩니다.
  • 함수 호출 간 공유 메모리로도 활용이 가능합니다.
  • 일반적으로 함수가 종료되면 메모리 환경이 사라져, 각 호출 간 연결 고리가 없습니다.

5. 비동기 자바스크립트(Asynchronous JavaScript)

  • 브라우저 API에서 콜백을 스레드 큐에 등록시킵니다.
  • 엔진이 콜백을 실행할 준비가 되면 스레드 큐에서 콜 스택으로 콜백 함수를 넘겨줍니다.
  • 콜백을 실행할 준비가 되는 시점은 콜 스택이 비어 있고 전역 실행 컨텍스트에서 실행할 코드가 없을 때 입니다.
  • 이렇게 조건을 계속 체크하고 콜백 함수를 큐에서 스택으로 옮겨주는 걸 이벤트 루프라 합니다.
  • 이벤트 루프 조금 더 알아보기

6. 자바스크립트 프로토타입(JavaScript Prototype)

  • 인스턴스 생성을 위해 빈 객체를 만들고 프로토타입을 연결해준 뒤 속성 값들을 할당해주고 반환합니다.
  • 이게 new가 내부적으로 해주는 일입니다.

7. 추가적인 개념들

참고