실행 컨텍스트 (Execution Context)
실행할 코드에 제공할 환경정보를 모아놓은 객체이다.
호이스팅 (hoisting) 에 대한 이해
hoist : 변수 선언부(record 혹은 식별자) 및 함수 선언부를 맨 위로 끌어올리는 것을 의미
호이스팅의 개념을 모른다면,
코드를 실행을 했을 때 결과값이 예상한 것과 다르게 나올 때 그 원인을 파악하지 못할 것이다.
실제 코드가 어떤 방식으로 동작하는지 이해하는 것은 디코딩을 할 때 큰 도움이 될 것이다.
VE(Variable Environment), LE(Lexical Environment)
LE
-> record(environmentRecord) -> 이 record의 수집과정이 hoisting이다.
outer(outerEnvironmentReference)
함수를 정의하는 방법 2가지
- 함수 선언문
function 함수이름 () {
함수 내용
}- 함수 표현식
let 변수 = function () {
함수 내용
}두 방법은 hoisting 과정에서 완전히 다르다.
1번은 함수 전체가 hoisted
2번은 변수 선언부 (let 변수;)만 hoisted
만약 협업 과정에서 같은 이름의 함수를 두 번 이상 1번 방식으로 선언하게 된다면 둘 다 위로 hoisted 되어서 충돌하게 된다.
하지만 2번 방식을 사용하면, hoisted 되어도 그 함수가 변수에 할당되는 부분 이후로만 영향을 주기 때문에 충돌의 여지가 더 적다고 볼 수 있다.
따라서 2번, 즉 함수 표현식이 협업과정에서 더 유용하다.
하지만 역시 가장 권장되는 건, 같은 이름의 변수 혹은 함수가 쓰였는지 확인해보고 겹치지 않게 이름을 정하는 것이다.
scope
변수의 유효 범위
콜스택 (call stack)
컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다.
아래는 스택(stack)과 큐(queue)의 차이를 보여주는 그림이다.
간단히 말하자면,
stack은 LIFO(Last In First Out)이고
queue는 FIFO(First In First Out)이다.
stack과 queue의 차이에 대해서는 나중에 자세히 글을 써보겠다.
outer
현재 호출된 함수가 '선언될 당시의' LE를 참조한다.
해당 함수가 선언될 때의 외부 환경, 즉 콜스택에서 해당 함수가 생성될 때의 자신의 바로 아래에 있는 스택의 LE가 자신의 outer에 저장된다.
예를 들어, 위 그림에서 콜스택에 B가 생성될 때는 (함수 B가 선언될 때는) 그때의 외부환경, 즉 A의 LE가 B의 outer에 저장된다.
// 아래 코드를 여러분이 직접 call stack을 그려가며 scope 관점에서 변수에 접근해보세요!
var a = 1;
var outer = function() {
var inner = function() {
console.log(a); // 이 값은? 이유? scope 관점에서!
var a = 3;
};
inner();
console.log(a); // 이 값은? 이유는? scope 관점에서!
};
outer();
console.log(a); // 이 값은? 마찬가지로 이유도!각각의 실행 컨텍스트는 LE 안에 record와 outer를 가지고 있고, outer 안에는 그 실행 컨텍스트가 선언될 당시의 LE정보가 다 들어있으니 scope chain에 의해 상위 컨텍스트의 record를 읽어올 수 있다.
this
this는 실행 컨텍스트가 생성될 때 결정된다 (binding 된다)
