-
코어 자바스크립트 핵심 정리 (2)자바스크립트 개념 2021. 1. 12. 14:43
- 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
- 자바스크립트는 어떤 실행 컨텍스트가 활성화 되는 시점에 호이스팅, 외부 환경 정보 구성, this 값을 설정하는 등의 동작을 수행한다.
>실행 컨텍스트란?
- 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.
- 최상단은 브라우저에서 자동으로 실행 == 자바스크립트 파일이 열리는 순간 전역 컨텍스트 활성화
- 함수가 호출되면 함수의 실행 컨텍스트가 콜 스택의 가장 상단으로 쌓임 -> 그 함수가 실행된다
- 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점이다. 기존의 컨텍스트는 그 아래에 위치하게 된다. 이렇게 어떤 실행 컨텍스트가 활성화될 댸 자바스크립트 엔진은 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다.
- 실행 컨텍스트 객체는 자바스크립트 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인할 수는 없다. (VariableEnvironment, LexicalEnvironment, ThisBinding)
>environmentRecord
- 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.
- 컨텍스트 내부 전체를 처음부터 끝까지 읽어나가며 순서대로 수집한다.
- 코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고 있게 되는 셈!
- 호이스팅 : 끌어올리다(hoist) + ing : 변수 정보를 수집하는 과정을 이해하기 쉬운 방법으로 대체한 가상의 개념
>호이스팅 규칙
- 변수는 선언부만 끌어올린다. 할당부는 그대로 둔다.
- 함수 선언은 전체를 끌어올린다.
- 함수 선언문 == function 정의부만 존재하고 별도의 할당 명령이 없는 것
- 함수 표현식 == function 정의부 + 변수에 함수를 할당!
- 즉, 함수 선언문은 전체가 호이스팅 되고 함수 표현식은 변수 선언 부분만 호이스팅 됨!
* 상대적으로 함수 표현식이 안전하다.
(전역공간에 이름이 같은 함수가 선언되었을때, 나중에 쓰인 코드로 덮어 쓰여짐. 따로 에러가 발생하지 않아서 디버깅이 어려울 수 있다 => but 함수 표현식을 사용하여 선언한 경우에는 function 정의부는 호이스팅 되지 않기 때문에 코드의 작동은 그대로 함)
>스코프, 스코프 체인, outerEnvironmentReference
- 스코프란 식별자에 대한 유효범위
- 스코프 체인이란 '식별자의 유효범위'를 안에서 바깥으로 차례대로 검색해나가는 것을 의미한다. -> Lexical Environment의 두 번째 수집 자료인 outerEnvironmentReference!
- outerEnvironmentReference는 현재 호출된 함수의 선언될 당시의 Lexical Environment를 참조한다. -> 가장 가까운 요소부터 차례대로만 접근할 수 있고, 다른 순서로 접근하는 것은 불가능하다.
- 전역 공간에서 선언한 변수는 전역변수, 함수 내부에서 선언한 변수는 무조건 지역변수
* 코드의 안전성을 위해서는 가급적 전역변수 사용을 최소화할 것!
>정리
- 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
- LexicalEnvironment(실행 도중 변경 사항 반영), VariableEnvironment(초기 상태 스냅샷) : 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집하는 environmentRecord와 직전 컨텍스트 정보를 참조하는 outerEnvironmentReference로 구성
- 호이스팅 : environmentRecord의 수집 과정을 추상화한 개념. 변수의 경우 선언부만을 끌어올리고 할당부 놔둠!
'자바스크립트 개념' 카테고리의 다른 글
코어 자바스크립트 핵심 정리 (4) (0) 2021.01.26 코어 자바스크립트 핵심 정리 (3) (0) 2021.01.19 코어 자바스크립트 핵심 정리 (1) (0) 2020.12.23