.

1. Scope
유효범위

2. 변수가 영향력을 끼칠 수 있는
유효한 범위 또는 영역
Scope

3. 식별자 관리
접근성충돌 예방
생명주기
최적화 메모리 관리
변수를 어떻게 찾을 것인가?
언어를 구현하는데 있어 두 가지 큰 문제
변수를 어디에 저장할 것인가?

4. Global Scope
Function Scope
Block Scope
프로그램 전체적으로 접근할 수 있는
최상위 유효범위, 이 유효범위는 host
객체와 연관되며 브라우저는 window
Node.js에는 global로 존재함
함수 내에서만 변수가 저장되고
접근할 수 있는 유효범위
블록 내에서만 변수가 저장되고
접근할 수 있는 유효범위
let, const(ECMAScript 6)

5. Scope의 또 다른 이름
Lexical Scope

6. Why Lexical Scope?
렉싱 타임에 Scope는 확정
(코드를 작성한 시점에 Scope는 이미결정)
Tokennizing Lexing Parsing
Source
code AST Generate
Bytecode
RunLexical
Analysis
Syntax
Analysis

7. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); // 1 + 2 = 3

8. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); // 1 + 2 = 3

9. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); // 1 + 2 = 3

10. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); // 1 + 2 = 3

11. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); // 1 + 2 = 3
Global Scope
Lexical Scope
Lexical Scope

12. 컴파일 단계

13. Global Scope
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

14. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope

15. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(something)

16. Lexical Scope
(something)
Global Scope
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

17. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(something)
Lexical Scope
(print)

18. Global Scope
Lexical Scope
(print)
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Lexical Scope
(something)

19. 평가 및 실행 단계

20. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

21. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

22. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

23. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

24. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

25. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

26. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

27. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

28. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

29. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

30. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

31. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

32. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

33. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

34. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

35. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

36. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

37. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

38. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

39. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

40. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 23
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

41. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

42. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

43. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

44. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

45. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

46. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
3
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

47. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

48. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
3
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

49. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
3
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

50. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
3
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

51. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

52. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

53. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

54. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

55. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

56. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

57. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

58. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

59. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

60. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

61. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

62. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

63. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
1 2 3
Global Scope
Lexical Scope
(print)
Lexical Scope
(something)

64. Scope Bubble(Chain) 변수 참조시 자신의 스코프에 없다면
상위 스코프를 버블링하여 변수를
찾는 과정

65. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

66. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

67. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

68. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

69. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

70. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

71. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

72. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
a = 20;
}
innerFunc();
}
outerFunc();
☛
[Left Hand Side]
* 변수가 Global 스코프에 있다면 전달
* 없다면 Global 스코프에 생성하여 전달
* ’use strict’ 모드에서는 ReferenceError 발생

73. function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)

74. ☛
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

75. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

76. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

77. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

78. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

79. Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛
function outerFunc() {
function innerFunc() {
var a = b + 10;
}
innerFunc();
}
outerFunc();
[Right Hand Side]
* 변수가 Global 스코프에 있다면
변수에 저장된 값 전달
* 없다면 ReferenceError 발생

80. Shadow variable 동일한 식별자의 변수가 하위 스코프에
존재할 때 버블링이 중지되고 상위
스코프까지 탐색하지 않게 만드는 변수

81. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)

82. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

83. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

84. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

85. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

86. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

87. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

88. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

89. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

90. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

91. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

92. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

93. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

94. var a = 20;
var b = 5;
function outerFunc() {
var b = 10;
function innerFunc() {
var c = a + b;
}
innerFunc();
}
outerFunc();
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
Lexical Scope
(outerFunc)
Global Scope
Lexical Scope
(innerFunc)
☛

95. var and let, const 유효범위를 정의하는 변수 선언문

96. function something() {
for(var i = 0; i < 5; i++) {
// do something...
}
console.log(i); // ?
}
something();

97. function something() {
for(var i = 0; i < 5; i++) {
// do something...
}
console.log(i); // ?
}
something();

98. function something() {
for(var i = 0; i < 5; i++) {
// do something...
}
console.log(i); // 5
}
something();

99. function something() {
var a = 20;
if (true) {
var a = 30;
}
console.log(a); // ??
}
something();

100. function something() {
var a = 20;
if (true) {
var a = 30;
}
console.log(a); // ??
}
something();

101. function something() {
var a = 20;
if (true) {
var a = 30;
}
console.log(a); // 30
}
something();

102. function something() {
for (let i = 0; i < 5; i++) {
// do something...
}
console.log(i); // ??????????????
}
something();

103. function something() {
for (let i = 0; i < 5; i++) {
// do something...
}
console.log(i); // ??????????????
}
something();

104. function something() {
for (let i = 0; i < 5; i++) {
// do something...
}
console.log(i); // ReferenceError
}
something();

105. function something() {
const a = 20;
if (true) {
const a = 30;
}
console.log(a); // ??
}
something();

106. function something() {
const a = 20;
if (true) {
const a = 30;
}
console.log(a); // ??
}
something();

107. function something() {
const a = 20;
if (true) {
const a = 30;
}
console.log(a); // 20
}
something();

108. function something() {
const a = 10;
const b = 20;
{
const c = a + b;
console.log(c); // 30
}
console.log(c); // ??????????????
}
something();

109. function something() {
const a = 10;
const b = 20;
{
const c = a + b;
console.log(c); // 30
}
console.log(c); // ??????????????
}
something();

110. function something() {
const a = 10;
const b = 20;
{
const c = a + b;
console.log(c); // 30
}
console.log(c); // ReferenceError
}
something();

111. function something() {
console.log(a); // ?????????
console.log(b); // ?????????
var a, b;
// do something...
}
function something() {
console.log(a); // ??????????????
console.log(b); // ??????????????
let a, b;
// do something...
}

112. function something() {
console.log(a); // ?????????
console.log(b); // ?????????
var a, b;
// do something...
}
function something() {
console.log(a); // ??????????????
console.log(b); // ??????????????
let a, b;
// do something...
}

113. function something() {
console.log(a); // undefined
console.log(b); // undefined
var a, b;
// do something...
}
function something() {
console.log(a); // ReferenceError
console.log(b); // Not running
let a, b;
// do something...
}

114. Hoisting 컴파일 시점에 변수와 함수 선언문만
가장 먼저 해석하는 현상

115. function something() {
var a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(var i = 0, n = a; i < n; i++) {
var b = a * i;
}
}

116. function something() {
var a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(var i = 0, n = a; i < n; i++) {
var b = a * i;
}
}
Lexical Scope
(something)

117. function something() {
var a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(var i = 0, n = a; i < n; i++) {
var b = a * i;
}
}
Lexical Scope
(something)

118. function something() {
var a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(var i = 0, n = a; i < n; i++) {
var b = a * i;
}
}
Lexical Scope
(something)

119. function something() {
var a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(var i = 0, n = a; i < n; i++) {
var b = a * i;
}
}
Lexical Scope
(something)
컴파일 단계에서 변수 선언문을 가장 먼저 해석
연관된 렉시컬 스코프에 변수를 연결

120. function something() {
var a;
var i;
var n;
var b;
a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(i = 0, n = a; i < n; i++) {
b = a * i;
}
}

121. function something() {
var a;
var i;
var n;
var b;
a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(i = 0, n = a; i < n; i++) {
b = a * i;
}
}

122. function something() {
var a;
var i;
var n;
var b;
a = 10;
console.log(a); // 10
console.log(i); // undefined;
console.log(n); // undefined;
console.log(b); // undefined;
for(i = 0, n = a; i < n; i++) {
b = a * i;
}
}
마치 변수를 끌어올려서 실행하는
모양과 같다하여 Hoisting이라고 함

123. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
}
something();
Lexical Scope
(something)

124. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
}
something();
Lexical Scope
(something)

125. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
}
something();
Lexical Scope
(something)
함수 선언문은 항상 가장 먼저
끌어올린다.

126. Lexical Scope
(something)
function something() {
console.log(innerFunc); // ????????
innerFunc(); // ??????????????
var innerFunc = function() {
// do something...
};
}
something();

127. Lexical Scope
(something)
function something() {
console.log(innerFunc); // undefiend
innerFunc(); // ReferenceError
var innerFunc = function() {
// do something...
};
}
something();

128. Lexical Scope
(something)
함수 표현식일때는 변수 선언만
끌어올린다. 함수는 값으로써 실행
시점에 대입된다.
function something() {
console.log(innerFunc); // undefiend
innerFunc(); // ReferenceError
var innerFunc = function() {
// do something...
};
}
something();

129. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();

130. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)

131. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
innerFunc는 이미 Scope 내에
존재하므로 무시

132. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

133. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

134. function something() {
console.log(innerFunc); // ????????
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

135. function something() {
console.log(innerFunc); // function
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

136. function something() {
console.log(innerFunc); // function
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

137. function something() {
console.log(innerFunc); // function
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

138. function something() {
console.log(innerFunc); // function
innerFunc(); // ?
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

139. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

140. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)☛

141. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)☛

142. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)☛

143. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)☛

144. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

145. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

146. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // ?
}
something();
Lexical Scope
(something)
☛

147. function something() {
console.log(innerFunc); // function
innerFunc(); // 1
function innerFunc() {
console.log(1);
}
var innerFunc = function() {
console.log(2);
}
innerFunc(); // 2
}
something();
Lexical Scope
(something)
☛

148. Execution Context
실행문맥

149. 현재 평가되고 실행 중인 코드와
연결된 Record 집합으로 코드를
실행하기 위해 필요한 환경으로써
실행 시점에 생성
Execution Context

150. 특정 장소에 변수를 저장하고 나중에
그 변수를 찾는 잘 정의된 규칙
Execution Context and Lexical Scope
“
”- 카일 심슨의 Scope에 대한 정의 -

151. Execution Context and Lexical Scope
“
”
Execution Context는 그 규칙을 포함하는 명세
또는 실제로 구현돼 동작하는 실체

152. “
”http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts
A stack is used to track execution contexts.
The running execution context is always the top element of this stack.

153. “
”http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts
A new execution context is created whenever control is transferred
from the executable code associated with the currently
running execution context to executable code that
is not associated with that execution context

154. From the executable code associated with the
currently running execution context to executable code that
is not associated with that execution context.

155. code evaluation
From the executable code associated with the
currently running execution context to executable code that
is not associated with that execution context.

156. code evaluation
Global Code
Function Code
Eval Code
From the executable code associated with the
currently running execution context to executable code that
is not associated with that execution context.

157. code evaluation Initializing execution context
Initializing execution context
Initializing execution context
Global Code
Function Code
Eval Code
From the executable code associated with the
currently running execution context to executable code that
is not associated with that execution context.

158. Execution Context
(Global)
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
⚑

159. ☛
Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(something)

160. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(something)
Execution Context
(Global)
⚑

161. ☛ function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(something)
Execution Context
(Global)
⚑

162. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(something)
Execution Context
(Global)
⚑

163. ☛
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(something)
Execution Context
(Global)
⚑

164. ☛
Execution Context
(something)
Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

165. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

166. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

167. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

168. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

169. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

170. ☛
Execution Context
(something)
Execution Context
(Global)
⚑function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
Execution Context
(print)

171. ☛
Execution Context
(something)
Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

172. ☛
Execution Context
(something)
Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

173. ☛
Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

174. Execution Context
(Global)
⚑
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);

177. Components of ExecutionContext

178. http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts
ExecutionContext { … }

179. http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts
ExecutionContext {
LexicalEnvironment,
VariableEnvironment
}

180. ExecutionContext {
LexicalEnvironment,
VariableEnvironment
}
http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts

181. http://www.ecma-international.org/ecma-262/6.0/#sec-execution-contexts
ExecutionContext {
LexicalEnvironment : LexicalEnvironment,
VariableEnvironment : LexicalEnvironment
}

182. http://www.ecma-international.org/ecma-262/6.0/#sec-resolvethisbinding
ExecutionContext {
LexicalEnvironment : LexicalEnvironment,
VariableEnvironment : LexicalEnvironment
}

183. ExecutionContext {
LexicalEnvironment : LexicalEnvironment,
VariableEnvironment : LexicalEnvironment
}
http://www.ecma-international.org/ecma-262/6.0/#sec-resolvethisbinding

184. ExecutionContext {
LexicalEnvironment : LexicalEnvironment,
VariableEnvironment : LexicalEnvironment,
this : ResolveThisBinding()
}
http://www.ecma-international.org/ecma-262/6.0/#sec-resolvethisbinding

185. ExecutionContext {
LexicalEnvironment : LexicalEnvironment,
VariableEnvironment : LexicalEnvironment,
this : ResolveThisBinding()
}
http://www.ecma-international.org/ecma-262/6.0/#sec-resolvethisbinding

186. 특정 코드의 식별자와 연관이 있는
변수 및 함수와의 관계를 나타내는
명세 타입
Lexical Environment

187. LexicalEnvirontment { … }

188. LexicalEnvirontment { … }

189. LexicalEnvirontment {
EnvironmentRecord,
OuterLexicalEnvironment
}
http://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments

190. LexicalEnvirontment {
EnvironmentRecord,
OuterLexicalEnvironment
}
http://www.ecma-international.org/ecma-262/6.0/#sec-declarative-environment-records

191. LexicalEnvirontment {
EnvironmentRecord,
OuterLexicalEnvironment
}
http://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments

192. EnvironmentRecord
Declarative GlobalObject
Function Module
Composition of EnvironmentRecord

193. EnvironmentRecord
Declarative GlobalObject
Function Module
Composition of EnvironmentRecord

194. DeclarativeEnvironmentRecords {
num: 10,
str: “abc”,
func: FunctionReference
}
http://www.ecma-international.org/ecma-262/6.0/#sec-declarative-environment-records

195. ObjectEnvironmentRecords {
bindingObject: Object
}
http://www.ecma-international.org/ecma-262/6.0/#sec-object-environment-records

196. GlobalEnvironmentRecords {
bindingObject: window
}
http://www.ecma-international.org/ecma-262/6.0/#sec-global-environment-records

197. ExecutionContext { ... }

198. ExecutionContext {
LexicalEnvironment : LexicalEnvironment { ... },
VariableEnvironment : LexicalEnvironment { ... },
this : ResolveThisBinding()
}

199. ExecutionContext {
LexicalEnvironment : LexicalEnvironment {
EnvironmentRecord : EnvironmentRecord { ... },
OuterLexicalEnvironment : outerEnvironmentReference
},
VariableEnvironment : LexicalEnvironment { ... },
this : ResolveThisBinding()
}

200. ExecutionContext {
LexicalEnvironment : LexicalEnvironment {
EnvironmentRecord : EnvironmentRecord { ... },
OuterLexicalEnvironment : outerEnvironmentReference
},
VariableEnvironment : LexicalEnvironment { ... },
this : ResolveThisBinding()
}

201. ExecutionContext {
LexicalEnvironment : LexicalEnvironment {
EnvironmentRecord : EnvironmentRecord { ... },
OuterLexicalEnvironment : outerEnvironmentReference
},
VariableEnvironment : LexicalEnvironment { ... },
this : ResolveThisBinding()
}

202. ExecutionContext {
LexicalEnvironment : LexicalEnvironment {
EnvironmentRecord : EnvironmentRecord { ... },
OuterLexicalEnvironment : outerEnvironmentReference
},
VariableEnvironment : LexicalEnvironment {
EnvironmentRecord : EnvironmentRecord { ... },
OuterLexicalEnvironment : outerEnvironmentReference
},
this : ResolveThisBinding()
}

203. Execution Context
(Global)
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); ⚑

204. Execution Context
(Global)
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2); ⚑☛
Execution Context
(something)

205. Execution Context
(Global)
function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
⚑
☛
Execution Context
(something)

206. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)

207. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
this : ResolveThisBinding()

208. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
this : ResolveThisBinding()

209. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
this : global

210. const foo = {
a: 10,
b: 20,
bar() {
return this.a + this.b;
}
};
foo.bar();☛
Execution Context
(something)
this : ResolveThisBinding()

211. const foo = {
a: 10,
b: 20,
bar() {
return this.a + this.b;
}
};
foo.bar();☛
Execution Context
(something)
this : ResolveThisBinding()

212. const foo = {
a: 10,
b: 20,
bar() {
return this.a + this.b;
}
};
foo.bar();☛
Execution Context
(something)
this : foo

213. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
LexicalEnvironment : { … },
VariableEnvironment: { … },
this : global

214. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

215. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);☛
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
outerEnvironmentReference GlobalEnvironmentRecord➠

216. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛ Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

217. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛ EnvironmentRecord
(something)
print: FunctionReference
a: undefined,
b: undefined,
c: undefined

218. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛ EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: undefined

219. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: 3

220. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: 3

221. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(something)
Execution Context
(Global)
⚑

222. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(something)
Execution Context
(Global)
⚑
Execution Context
(print)

223. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(something)
Execution Context
(Global)
⚑ Execution Context
(print)

224. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

225. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
outerEnvironmentReference LexicalEnvironmentRecord of something
Execution Context
(print)
➠
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

226. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
EnvironmentRecord
(print)
z: undefined

227. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
EnvironmentRecord
(print)
z: undefined

228. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
EnvironmentRecord
(print)
z: 3

229. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

230. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

231. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

232. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
`a` variable is not in EnvironmentRecord of print
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

233. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

234. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
outerEnvironmentReference LexicalEnvironmentRecord of something
Execution Context
(print)
➠
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

235. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: 3

236. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: 3
Execution Context
(print)

237. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
print: FunctionReference
a: 1,
b: 2,
c: 3
Execution Context
(print)

238. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

239. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(print)
z: 3

240. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
print(c);
}
something(1, 2);
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(print)
z: 3
Execution Context
(print)

241. var a = 10;
function outerFunc() {
function innerFunc() {
console.log(a);
}
innerFunc();
}
outerFunc();
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
Execution Context
(innerFunc)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
Execution Context
(outerFunc)
EnvironmentRecord
(global)
a: 10

242. 어떤 함수가 선언된 환경을 벗어나
실 행 돼 도 선 언 된 시 점 의 상 위
환경(스코프)에 접근할 수 있게
되는 기능
Closure

243. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛

244. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛

245. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛

246. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
[[closure]] :
print Function

247. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
print Function
[[closure]] : LexicalEnvironment
(something)

248. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
print Function
[[closure]] : LexicalEnvironment
(something)

249. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
print Function
[[closure]] : LexicalEnvironment
(something)

250. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
print Function
[[closure]] : LexicalEnvironment
(something)

251. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
☛
print Function
[[closure]] : LexicalEnvironment
(something)

252. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
☛
print Function
[[closure]] : LexicalEnvironment
(something)

253. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛

254. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)

255. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
print Function
[[closure]] : LexicalEnvironment
(something)

256. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
print Function
[[closure]] : LexicalEnvironment
(something)

257. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
print Function
[[closure]] : LexicalEnvironment
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}

258. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
print Function
[[closure]] : LexicalEnvironment
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}

259. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)

260. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)

261. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)

262. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

263. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)
`a` variable is not in
EnvironmentRecord of print
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

264. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

265. function something(a, b) {
var c = a + b;
function print(z) {
console.log(`${a} + ${b} =`, z);
}
return print(c);
}
const log = something(1, 2);
log();
☛
Execution Context
(print)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
LexicalEnvironment
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

268. innerFunc Function
[[closure]] : LexicalEnvironment
(outerFunc)
Execution Context
(outerFunc)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(outerFunc)
EnvironmentRecord : {
a: 10,
b: 20,
c: 30
}

269. innerFunc Function
[[closure]] : LexicalEnvironment
(outerFunc)
Execution Context
(outerFunc)
EnvironmentRecord
(outerFunc)
EnvironmentRecord : {
a: 10,
b: 20,
c: 30
}
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

270. innerFunc Function
[[closure]] : LexicalEnvironment
(outerFunc)
Execution Context
(outerFunc)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
EnvironmentRecord
(outerFunc)
EnvironmentRecord : {
a: 10
}

271. innerFunc Function
[[closure]] : LexicalEnvironment
(outerFunc)
Execution Context
(outerFunc)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
}
EnvironmentRecord
(outerFunc)
EnvironmentRecord : {
a: 10
}

274. 새로 생성된 Lexical로 환경을 변경 후
다시 기존 Lexical 환경으로 되돌릴때
사용되는 Record의 상태를 보관
및 유지하는 환경
VariableEnvironment

275. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
a : 10

276. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
a : 10

277. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

278. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
New created
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

279. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

280. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

281. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

282. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}

283. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment
(with)
LexicalEnvironment : {
ObjectEnvironmentRecord : {
b: 20
}
OuterLexicalEnvironment
}
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

284. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

285. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment,
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global

286. function something() {
const a = 10;
with({b: 20}) {
console.log(a);
console.log(b);
}
}
something();
☛
Execution Context
(something)
LexicalEnvironment : {
EnvironmentRecord,
OuterLexicalEnvironment
},
VariableEnvironment: {
EnvironmentRecord,
OuterLexicalEnvironment
}
this : global
EnvironmentRecord
(something)
a : 10

287. http://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments
When will a New lexical environment be created?

288. http://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments
When will a New lexical environment be created?

289. 감사합니다.