[JavaScript] 실행 컨텍스트

zmin·2022년 3월 27일
0
post-thumbnail

코어 자바스크립트, 정재남

주절주절...
전체적인 느낌은 사람이 코드를 위에서부터 쭉 읽을 때 함수의 호출 등과 같은 일들로 다시 위로 돌아가 코드를 읽어야하는 상황이 올 때,
중단점을 찍은 것 마냥 현재 상태를 저장해두고,
돌아가서 코드를 읽은 뒤 나올 상태를 저장할 공간을 마련해주는...느낌...?

실행 컨텍스트?

실행할 코드에 필요한 환경 정보들을 저장해둔 객체

이들을 콜 스택에 쌓아올리며 가장 위에있는 컨텍스트에 대한 처리를 진행
그러니까, 어떤 컨텍스트와 관련된 코드의 실행 중에 새로운 컨텍스트가 생성되어 콜 스택에 담기게 되면 해당 작업을 중지하고 스택에 새로 쌓인 컨텍스트에 관련된 코드 처리부터 실행하게 됨

실행 컨텍스트는 기본적으로 전역공간이 생성되고 보통 우리는 함수를 실행하여 컨텍스트를 생성

아래는 실행 컨텍스트의 구성 요소

  • VariableEnvironment
  • LexicalEnvironment
  • ThisBinding : 해당 컨텍스트에서 this 식별자를 사용할 때 바라봐야 할 대상 객체, 지정되지 않을 경우 전역객체가 저장

VariableEnvironment

간단히 말하면 LexicalEnvironment의 초기 스냅샷
실행 컨텍스트가 생성될 때 초기화되며 그 때의 환경 정보를 저장
변하지 않는 스냅샷이라는 것만 빼면 구성은 LexicalEnvironment와 동일

LexicalEnvironment

초기화 될 때 VariableEnvironment가 먼저 만들어지고 이를 복사하여 계속 변화시켜가며 환경정보를 저장

environmentRecord

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장 (매개변수 식별자, 선언한 함수 자체, var로 선언된 변수의 식별자 등)
헷갈리지 말야아 할 것은 오로지 식별자 정보들에만 관심이 있음
그 식별자를 가지는 변수에 어떤 것이 할당 되었고 안되었는지는 모름
컨택스트 내부 전체를 순서대로 훑으며 정보를 수집 후 실제 코드 실행 → Hoisting 호이스팅

호이스팅은 오로지 해당 스코프의 선언부에 대해서만 작동
일반적인 변수 선언의 경우 크게 문제될 것이 없으나 함수 선언시 복잡해짐

  • 함수 선언문 : 함수명이 곧 변수명 function a () { /* 함수 내용 */ }
  • 익명 함수 표현식 : 변수명이 곧 함수명 var b = function () { /* 함수 내용 */ }
  • 기명 함수 표현식 : 변수명, 함수명 따로 존재 → 변수명으로 함수 실행 가능/잘 사용되지 않는 듯

함수 선언문의 경우 선언문 자체가 호이스팅 되어 해당 컨텍스트의 코드가 실행되기 전에 작동하지만
함수 표현식은 var b의 변수 선언부만 호이스팅되어 이후의 함수 할당부는 남겨짐
이후 코드가 위에서부터 실행될 때 순서에 맞추어 할당

따라서...함수 표현식을 사용하는 편이 개발자가 이해하기도 편리하고 안전

outerEnvironmentReference

보통 실행 컨텍스트의 생성은 어떠한 함수가 호출될 때 이루어짐
그때 그 함수가 선언됐을 시점에 함수를 선언하는 컨텍스트의 LexicalEnvironment 를 참조할 수 있도록 도와주는 것이 outerEnvironmentReference

정말 함수가 선언된 시점의 LexicalEnvironment만을 참조하기 때문에 그 이외의 컨텍스트들에 대해서는 직접적으로 참조할 수 없고 체인형태로 순서대로 참조하게 됨 → 스코프 체인

스코프 체인에서 스코프라는 것을 간단히 살펴보면
식별자의 유효 범위를 말하며 오로지 함수에 의해서만 생성 (전역 공간은 그냥 생성)
함수가 정의되는 시점에 결정
간단히 생각해서 함수 안에서 선언한 식별자는 외부에선 접근X 내부에서만 접근O
그런데 함수 밖에서 선언한 식별자는 외부에서도 접근O 내부에서도 접근O

이런 스코프의 특징을 이용하여 내부에서부터 외부로 식별자를 탐색해 나가는 것을 스코프 체인

지금 실행 컨텍스트가 활성화 됐다는건 어디선가 함수가 실행이 됐다는 것이고 그건 또 어디선가 함수가 선언이 됐다는 것이고 그건 실행 컨텍스트가 활성화되어 코드가 실행이 됐다는 것이고 실행 컨텍스트가 활성화 됐다는건...

이렇게 체인처럼 각 스코프를 탐색하여 요소들에 접근

만약 안쪽에 동일한 이름의 식별자가 있다면 동명의 외부 식별자는 사용 불가 → 정보 은닉화

profile
308 Permanent Redirect

0개의 댓글