자바스크립트의 호출 스택 및 호이스팅 정보

콜 스택

단어의 정의로서는 실행중의 코드가 따라온 컨텍스트의 쌓이게 됩니다.

JS

function a() {
}
function b() {
 a();
}
function c() {
 b();
}

c();

이 함수를 실행하면 먼저 글로벌 컨텍스트가 생성됩니다. 그런 다음 c 함수가 호출되면 c 함수 컨텍스트가 생성됩니다. 그런 다음 b의 함수가 호출되므로 b의 함수 컨텍스트가 생성되고 마찬가지로 a의 컨텍스트가 생성됩니다. 일러스트로 확인합시다.



실행 중인 컨텍스트는 항상 호출 스택의 최상위 코드가 됩니다. a의 코드의 실행이 종료하면 a는 소멸하고, 다음에 b, c, 글로벌의 처리까지 진행되어 마지막에는 모두 소멸합니다.


실제로 브라우저에서 확인하면 일러스트와 같은 현상을 확인할 수 있습니다. (※여기에서의 글로벌 컨텍스트는 anonymous가 됩니다.)

호스팅

컨텍스트 내에서 선언한 변수나 함수의 정의를 코드 실행 전에 메모리에 배치하는 것. 구체적인 모습을 브라우저에서 확인합시다.

먼저 함수 a를 준비하고 호출된 타이밍에 콘솔에 출력하도록 합니다.

JS

function a() {
 console.log("called")
}

함수를 호출해 봅시다.

JS

function a() {
 console.log("called")
}
a();

출력을 확인할 수 있습니다.
함수 호출을 선언하기 전에 작성해 봅시다.

JS

a();
function a() {
 console.log("called")
}

마찬가지로 출력을 확인할 수 있습니다.
이 이유는 함수나 변수의 선언이 코드의 실행전(이 경우는 a())에 이미 메모리에 배치되어 있기 때문입니다. 그래서 함수를 선언하기 전에 함수의 실행을 써도 문제없이 함수가 실행됩니다.

이어서 변수의 경우도 살펴보겠습니다. 먼저 var에서 보자.

JS

var a = "called"
console.log(a)

출력을 확인할 수 있습니다.
다음으로 변수 선언을 나중에 가져 갑시다.

JS

console.log(a)
var a = "called"

값이 정의되지 않은 결과입니다. 이것은 console.log에서 값을 호출했을 때, 아직 b에 ​​값이 저장되어 있지 않기 때문에 발생하는 현상이 됩니다.

let,const에 대해서도 보자.

JS

console.log(a)
let a = "called"

에러가 출력되는 결과가 되었습니다. 이것은 a라고 하는 메모리 자체는 확보되고 있습니다만, undefined의 초기화가 JavaScript 엔진으로 행해지지 않기 때문입니다.

참고

Udemy: 【JS】가치에서 배우고 싶은 사람을 위한 JavaScript 메커니즘