javaScript. ES2015 - 실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)

 

 

javaScript. (18) 실행 컨텍스트

- 지난번에 업로드했던 실행 컨텍스트 포스팅은 var을 기준으로 한 설명이였다.

 

• 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김.
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨.
• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾음.
• >>> 만약 변수 객체 안에 없다면, 스코프 체인을 따라 올라가며 찾음.
• 함수 실행이 끝나면 해당 컨텍스트는 사라짐. (단, 클로저는 제외) / 페이지가 종료되면 전역 컨텍스트가 사라짐.

---

ES2015에서 새로운 변수 선언방식인 const와 let이 등장하면서,

실행 컨텍스트에서 블록 스코프를 추가한 개념이 등장했다.

 

 

let name = 'zero';
let age = 28;
const wow = (word) => {
  let name = 'nero';
  if (true) { // (2)
    let name = 'hello';
    console.log(age);
  }
  console.log(word + ' ' + name); // (3)
}
wow('hi'); // (1)

 

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name', 'age', 'wow'],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

실행 컨텍스트를 객체 형식으로 나타낸 것이다.

우선 전역 컨텍스트는 var때와 동일하다.

 

이제, wow함수가 호출되는 상황을 살펴보자. (주석 1번)

wow함수가 호출되어 wow 컨텍스트가 생성된다.

 

❗ 주의> 스코프는 - 선언시 생성 / 컨텍스트는 - 호출시 생성

 

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name': 'zero', 'age': 28, 'wow': 함수],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

'wow 컨텍스트': {
  변수객체: {
    arguments: ['hi'],
    variable: ['name': 'nero'],
  },
  scopeChain: ['전역 변수객체', 'wow 변수객체'],
  this: window,
}

 

 

블록 컨텍스트에서는 다르다.

if문은 블록 컨텍스트를 가지므로, wow 컨텍스트 아래에 블록 컨텍스트가 하나 더 생긴다.

 

블록(block) = { }
while / for / if / function 등에서의 { }. (단, 객체 리터럴의 { }는 제외)

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name': 'zero', 'age': 28, 'wow': 함수],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

'wow 컨텍스트': {
  변수객체: {
    arguments: ['hi'],
    variable: ['name': 'nero'],
  },
  scopeChain: ['전역 변수객체', 'wow 변수객체'],
  this: window,
}

🔻🔻

'if 블록 컨텍스트': {
   변수객체: {
    variable: ['name': 'hello'],
  },
  scopeChain: ['전역 변수객체', 'wow 변수객체', 'if 블록 변수객체'],
}

 

블록 컨텍스트에는 variable과 scope체인만 존재한다. (this나 arguments는 없다)

>> argument는 함수가 아니라 없고 / this는 상위 this를 따라가므로.

 

if문이 끝나면 블록 컨텍스트는 사라진다.

(if문 안에서 name 변수에 접근하면? hello가 된다.

if문 밖에서 name변수는 nero가 된다. - 상위 wow컨텍스트에 따름)

 

 

---

 

정리

 

- let,const 때문에 달라졌다기보다는 블록 스코프의 도입으로 달라짐.

- 블록 스코프가 생길 때 마다 컨텍스트를 하나 더 만들어둠.

- 컨텍스트는 블록이 끝나면 사라짐.

- 함수 컨텍스트도 {} 를 가지므로, 블록 컨텍스트의 일종임.

 

 

var	const, let
함수 컨텍스트	블록 콘텍스트 (블록 스코프)

 

 

---

Ref.

 

(JavaScript) ES2015 이후의 실행 컨텍스트