[ 자바스크립트 ] 프로그램의 평가와 실행 과정

Frontend Dev Diary·2020년 9월 18일
0

다음 내용은 '모던 자바스크립트 입문'의 8.5단원을 요약 · 정리한 것입니다.

실행 가능한 코드

실행 가능한 코드의 유형

  • 전역 코드 - Window 아래에 정의된 함수, 호출 스택에서 가장 먼저 실행되는 코드
  • 함수 코드
  • eval 코드

실행 문맥(Execution Context)

실행 가능한 코드가 실제로 실행되고 관리되는 영역, 실행에 필요한 모든 정보를 컴포넌트 여러 개가 나누어 관리하도록 만들어져 있다. 실행 문맥은 스택이라는 구조로 관리되는데, 이를 호출 스택(call stack)이라고 부른다.

1. 렉시컬 환경(LexicalEnvironment) 컴포넌트 / 변수 환경(VariableEnvironment) 컴포넌트

자바스크립트 엔진이 코드를 실행하기 위해 자원을 모아둔 곳으로, 함수 또는 블록의 유효 범위 안에 있는 식별자와 그 결과값이 저장되는 곳

  • 환경 레코드 - 유효 범위 안에 포함된 식별자를 기록하고 실행
  • 외부 렉시컬 환경 참조 - 유효 범위 너머의 유효 범위도 검색하기 위해서 함수를 둘러싸고 있는 코드가 속한 렉시컬 환경 컴포넌트의 참조가 저장됨

2. 디스 바인딩(This Binding) 컴포넌트

그 함수를 호출한 객체의 참조가 저장되는 곳으로, 함수가 호출되어 실행되는 시점에 결정되어 이것이 가리키는 값이 곧 해당 실행 문맥의 this가 된다.

this 값: 함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조

자바스크립트 함수는 특정 객체에 묶여 있지 않고, 객체 여러 개가 함수 하나를 가리킴 -> 호출될 때의 상황에 따라 this가 가리키는 객체가 바뀜.

다양한 상황에서 this가 가리키는 객체

  1. 최상위 레벨 코드의 this - 전역 객체
  2. 이벤트 처리기 안에 있는 this - 이벤트 처리기가 등록된 객체
  3. 생성자 함수 안에 있는 this - 그 생성자로 생성한 객체
  4. 생성자의 prototype 메서드 안에 있는 this - 그 생성자로 생성한 객체
  5. 직접 호출한 함수 안에 있는 this - 함수를 최상위 레벨의 코드에서 호출한 경우 전역 객체
  6. apply와 call 메서드로 호출한 함수 안에 있는 this - this가 가리키는 객체를 명시적으로 설정 가능

식별자 결정: 유효 범위 체인

식별자 결정: 변수가 어디에서 선언된 변수인지 결정하는 작업, 자바스크립트에서는 현재의 유효 범위 안에 없는 식별자를 찾을 때 바깥쪽 범위로 호출자의 렉시컬 환경에 속한 외부 렉시컬 환경의 참조를 따라 찾아가는 방식을 취한다. (유효 범위 체인)

속박 변수: 함수의 인수와 지역 변수
자유 변수: 그 외 변수

닫힌 함수: 속박 변수만을 포함한 함수
열린 함수: 자유 변수를 포함하고 있는 함수

가비지 컬렉션

사용하지 않는 객체의 메모리 영역을 가비지 컬렉터가 자동으로 해제하는 것을 의미한다.
이전에는 참조 카운터 방식을 사용했지만 순환 참조가 발생했을 때 메모리 누수가 발생한다는 단점이 있었다. 최근의 주요 웹 브라우저는 이를 보완하여 마크 앤 스윕(Mark-and-Sweep) 알고리즘을 사용한다. 전역 객체가 참조할 수 없는 객체를 검색하고 해당 객체를 메모리에서 해제하는 작업이다.

profile
성장하는 프론트엔드 개발자

0개의 댓글