230526) JS 기초 복습 및 실행 컨텍스트

1. 실행 컨텍스트와 호이스팅

 

실행 컨텍스트

- '실행할 코드에 필요한 환경정보들을 모아둔 객체'

 

즉, 함수가 실행되면 그 함수에 해당되는 실행 컨텍스트가 생성되며,

콜스택에 실행 순번대로 차곡차곡 쌓이게 된다.

 

 

호이스팅(Hoisting)이라는 단어는 이미 이전 TIL에서 한 차례 정리한 적이 있다.

 

호이스팅(Hoisting)

- 끌어올리다라는 의미를 가진 언어로, JS에서는 선언문을 해당 스코프의 최상단으로 끌어올려지는 현상을 뜻한다고 정리하였다.

 

하지만 그보다는 조금 메모리 저장의 원리와 연결해서 쉽고 정확히 이해할 수 있을 듯하다.

 

호이스팅이란, 변수와 함수에게 미리 메모리를 할당해 주는 것을 의미한다.

따라서 변수와 함수가 해당 스코프의 최상단으로 올라가게 된다.

 

---

 

이 원리에 대해 배우고 나서, 아래의 예제를 만나게 됐는데 원리는 이해를 했으나 왜 첫 번째 console.log(a)의 값이 undefined 로 처리가 되는지 도저히 이해가 되지 않았다.

 

var a = 1;
var outer = function () {
  var inner = function () {
    console.log(a);
    var a = 3;
  };
  inner();
  console.log(a);
};
outer();
console.log(a);

혼자서 열심히 생각은 해보았고, 원리에 대해서도 다시금 생각해 보았고, 원리는 정확히 깨달은 것 같다는 판단이 들어 이것이 이해가 되지 않는 부분에 대해서는 구글링을 할 방법도 없는 것 같았다.

 

그래서 결국 튜터님께 도움을 요청드렸다.

 

위 코드를 실행하게 되면, 실행 컨텍스트의 시점에서 위와 같은 순서로 코드가 실행되게 된다

 

⑴ var a = 1;
⑶ var outer = function () {
  ⑸ var inner = function () {
    console.log(a);
    var a = 3;
  };
  ⑷ inner();
  console.log(a);
};
⑵ outer();
console.log(a);

(1) 전역 컨텍스트 - (2) outer in - (3) inner in - (4) inner out - (5) outer out

 

그리고 호이스팅의 원리에 따라 변수/함수의 선언문이 해당 스코프의 최상단으로 끌어올려지기 때문에 아래의 순서처럼 호이스팅이 적용되어 실행된다.

var a;
a = 1;
var outer = function () {
  var inner = function () {
    var a;
(1) console.log(a);
    a = 3;
  };
  inner();
(2) console.log(a);
};
outer();
(3) console.log(a);

그리고 실행컨텍스트의 특성상 위 순서처럼 console.log(a)가 찍히게 되므로, 아래와 같이 콘솔이 찍히게 된다.

undefined / 1 / 1

 

여기서 2,3은 왜 1로 찍히는가? 이미 inner의 값은 모두 out됨... 따라서 var a = 3은 꺼내지고 없기 때문에 전역의 a=1 값밖에 남아 있지 않음!

---

복습을 위한 강의 판서

 

오늘도 잘 해냈다!