2021년07월10일
수정하기
문서 생성 2021-07-10 15:37:11 최근 수정 2021-07-10 22:06:47
Note
JavaScript
- 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
- 자바스크립트 엔진은 실행 컨텍스트를 모아 콜 스택(call stack)에 쌓아올렸다가 가장 위에 있는 컨텍스트와 관련있는 코드들을 실행하는 방식 → 전체코드의 환경과 순서를 보장한다.
- 하나의 실행 컨텍스트는 전역공간, eval() 함수, 함수 등으로 구성되어있다.
- 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것
- ES6에서는 블록(
{}
)에 의해서도 새로운 실행 컨텍스트가 생긴다.
- ES6에서는 블록(
- 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것
- 실행 컨텍스트에 담기는 정보
- VariableEnvironment: 현재 컨텍스트 내 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷.
- environmentRecored (snapshot)
- outerEnvironmentReference (snapshot)
- LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영.
- environmentRecored
- outerEnvironmentReference
- ThisBinding:
this
식별자가 바라봐야 할 대상 객체
- VariableEnvironment: 현재 컨텍스트 내 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷.
LexicalEnvironment
environmentRecord & hoisting
- environmentRecord
- 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
- 함수에 지정된 매개변수 식별자, 선언한 함수면 그 함수 자체,
var
로 선언된 변수의 식별자 등
- 함수에 지정된 매개변수 식별자, 선언한 함수면 그 함수 자체,
- 변수의 정보를 수집하는 과정을 마쳐도 코드들이 실행되기 전이다. 마치 식별자를 최상단으로 끌어올려(hoisting) 코드를 실행한다는 것으로 간주한 것
- 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
- 호이스팅 규칙
- 변수가 최상단으로 선언만 되고 할당은 해당 코드가 실행되어야 할당된다. 그 전까지
undefined
이다. - 함수 선언문은 함수 전체를 끌어올린다.
- 함수가 선언만 해놓으면 선언 전에 호출해도 오류 없이 실행되기 때문에 자바스크립트를 좀 더 쉽게 접근할 수 있게 해주는 측면이 있으나, 혼란을 야기할 수 있다. 선언 후에 호출되는 것이 훨씬 자연스럽기 때문이다.
- 원활한 협업을 위해서 전역공간 함수 선언이나 동명의 함수 중복 선언은 없어야 한다. 만약 이 경우에 함수가 선언문이 아닌 표현식으로 정의되어 있다면 중복으로 인한 큰 문제가 있지는 않을 것이다.
- 변수가 최상단으로 선언만 되고 할당은 해당 코드가 실행되어야 할당된다. 그 전까지
스코프체인 & outerEnvironmentReference
- 스코프는 식별자에 대한 유효범위
- A의 외부에서 선언한 변수는 A의 외부 뿐 아니라 A 내부에서도 접근가능하지만, A내부의 변수는 오직 A내부에서만 접근 가능하다. 이해하기 쉬운 개념이지만 ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생긴다.
- ES6에서는 블록에 의해서도 스코프가 생긴다.
- A의 외부에서 선언한 변수는 A의 외부 뿐 아니라 A 내부에서도 접근가능하지만, A내부의 변수는 오직 A내부에서만 접근 가능하다. 이해하기 쉬운 개념이지만 ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생긴다.
- 식별자의 유효범위를 안에서부터 바깥으로 탐색해가는 것을 스코프 체인(scope chain)이라고 한다. 이것을 가능케 하는 것이 LexicalEnvironment의 outerEnvironmentReference이다.
- 여러 스코프에서 동일한 식별자를 선언했을 경우 스코프 체인 상 가장 먼저 발견된 식별자에만 접근 가능하다.
this
- 실행 컨텍스트의
thisBinding
에는this
로 지정된 객체가 저장된다. - 실행 컨텍스트 활성화 당시
this
가 지정되지 않은 경우this
에는 전역 객체가 저장되는데 그밖에 함수를 호출하는 방법에 따라this
에 저장되는 대상이 다르다.
reference
log
- 홈트 5일차를 완료하고 결혼식을 갔다왔더니 시간이 훅 지나버렸다. 에너지 충전을 위해 자몽에이드를 흡입하는데 곧 잠이 들 것 같다. 잠이오면 차라리 30분이라도 자는게 낫다고 생각한다..
- 함께-자라기를 읽었다.
- 분명히 몇해 전 출근길에 읽었다. 초반 부분에 실천할 것이 있어 해본 기억이 있는데 (업무의 난이도 조절하기) 다시 읽어보니 더 많이 생겼다. 우선 피드백 주기를 짧게 해보는 것! 업무 뿐 아니라 현재 공부하고 있는 것도 달마다 피드백을 해보려 했는데 시간도 많으면서 이것저것 핑계로 진행하지 못했다. 반년이 지났으니 다시 되돌아볼 수 있도록 해야겠다.