호출 스택 분석하는 법

호출과 선언 명확히 구분할 줄 알아야 하고, 아래 코드를 실행 하기 전에 어떤 결과가 나오는 지 알 수 있어야 한다.

const x = "x";
function c() { // 선언
	const y = "y";
	console.log("c"); // 호출
    // debugger; // 호출 스택 보는 법
}

function a() { // 선언
	const x = "x";
	console.log("a"); // 호출 
	function b() { // 선언
		const z = "z";
		console.log("b"); // 호출
		c(); // 호출
	}
	b(); // 호출
}

a(); // 호출 - a, b, c
c(); // 호출 - c

호출 스택은 호출할 때만 쓰이는 스택이다.

함수를 호출할 때마다 스택이 밑에서부터 쌓이고 빠져나갈 땐 위에서부터 나간다.

LIFO(Last Input First Out), FILO(First Input Last Out) 방식이라고 부른다. (큐는 FIFO 방식이다.)

 

보통 함수 끝 부분에 도착했을 때 빠져나간다.

위 코드의 호출 스택을 보는 법은 debugger를 사용하는 것이다.

위 코드 5번째 줄에 debugger을 주석을 풀고 브라우저 개발자 모드 콘솔창에서 실행을 해보면 다음과 같이 디버거 창으로 이동하면서 함수 호출 스택을 볼 수 있다. 

(디버거를 통해 여러 유용한 정보를 얻을 수 있으니 잘 활용하자)

호출 스택 맨 아래에 (익명)이 있는데, 이는 해당 코드 파일 자체를 함수라고 생각하면 이해하기 편하다. (영어로는 anonymous라고 뜬다.) 

 

 

함수 호출 순서를 보자면 다음과 같다.

 

호출한게 끝나면 호출 했던 곳으로 돌아가야 함을 잊어선 안된다.(가상의 화살표를 그으면서 생각해보자) 

console.log()도 함수 호출이다. 하지만 js에서 제공해주는 함수이므로 선언해준 부분을 알 수 없다. 이 같은 경우는 어쩔 수 없이 호출한 부분으로 갔다가 바로 왔다고 생각하자.

 

 

아래 그림은 위 코드의 함수 호출 스택 과정을 순서대로 그려본 것이다.

 

 

 

 

 

참고: 제로초 '인간 JS 엔진되기' 강좌를 보고 정리한 글입니다.