var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

전역 코드 평가 - Global Execution Context 생성

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference

Global Lexical Environment

BindingObject

Object Environment Record

x undefined
foo <function object>
... ...

window

전역 코드 평가 - Global Lexical Environment 생성

- Object Environment Record 생성

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference

Global Lexical Environment

BindingObject

Object Environment Record

x undefined
foo <function object>
... ...

window

전역 코드 평가 - Global Lexical Environment 생성

- Declarative Environment Record 생성

y <uninitialized>

Declarative Environment Record

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference

Global Lexical Environment

BindingObject

Object Environment Record

x undefined
foo <function object>
... ...

window

전역 코드 평가 - Global Lexical Environment 생성

- this 바인딩

(※ 함수를 호출한 곳을 찾는다.)

y <uninitialized>

Declarative Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

x undefined
foo <function object>
... ...

window

전역 코드 평가 - Global Lexical Environment 생성

- Outer Lexical Environment Reference 결정
(※ 함수를 정의한 곳을 찾는다.)

y <uninitialized>

Declarative Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

전역 코드 실행

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y <uninitialized>

Declarative Environment Record

if 문 코드 블록 평가

x undefined

Block Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

if 문 코드 블록 실행

x 10

Block Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

if 문 코드 블록 실행 종료

x 10

Block Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

foo 함수 호출

x 10

Block Environment Record

[[ThisValue]]

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

LexicalEnvironment

foo Execution Context

foo 함수 코드 평가 - foo Execution Context 생성

x 10

Block Environment Record

LexicalEnvironment

foo Execution Context

[[ThisValue]]

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

Function
EnvironmentRecord
Outer
LexicalEnvironment
Reference

foo Lexical Environment

foo 함수 코드 평가 - foo Lexical Environment 생성
- foo Lexical Environment Record 생성

x 10

Block Environment Record

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);
a undefined
arguments { 0: 200, length: 1, callee: foo}
x undefined
y <uninitialized>

Function Environment Record

LexicalEnvironment

foo Execution Context

[[ThisValue]]

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

Function
EnvironmentRecord
Outer
LexicalEnvironment
Reference

foo Lexical Environment

[[ThisValue]]

foo 함수 코드 평가 - foo Lexical Environment 생성
- this 바인딩

x 10

Block Environment Record

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);
a undefined
arguments { 0: 200, length: 1, callee: foo}
x undefined
y <uninitialized>

Function Environment Record

LexicalEnvironment

foo Execution Context

[[ThisValue]]

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

Function
EnvironmentRecord
Outer
LexicalEnvironment
Reference

foo Lexical Environment

[[ThisValue]]

foo 함수 코드 평가 - foo Lexical Environment 생성
- Outer Lexical Environment Reference 결정

x 10

Block Environment Record

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);
a undefined
arguments { 0: 200, length: 1, callee: foo}
x undefined
y <uninitialized>

Function Environment Record

LexicalEnvironment

foo Execution Context

[[ThisValue]]

실행 컨텍스트

LexicalEnvironment

Global Execution Context

Global
EnvironmentRecord
Outer
LexicalEnvironment
Reference		 null

Global Lexical Environment

BindingObject

Object Environment Record

y 2

Declarative Environment Record

x 1
foo <function object>
... ...

window

EnvironmentRecord
Outer
LexicalEnvironment
Reference

Block Lexical Environment

y 20

Declarative Environment Record

Function
EnvironmentRecord
Outer
LexicalEnvironment
Reference

foo Lexical Environment

[[ThisValue]]

foo 함수 코드 실행

x 10

Block Environment Record

var x = 1;
let y = 2;

if (true) {
  var x = 10;
  const y = 20;
  console.log(
    x + y
  );
}

function foo(a){
  var x = 300;
  const y = 400;
  console.log(
	a + x + y
  );
}

foo(200);
a 200
arguments { 0: 200, length: 1, callee: foo}
x 300
y 400

Function Environment Record

LexicalEnvironment

foo Execution Context

[[ThisValue]]

deep-dive-week03

By Yongki Kim

Made with Slides.com

deep-dive-week03

  • 71

More from Yongki Kim