자바스크립트 호출 스택

유튜브 ZeroCho 인간 JS 엔진 되기 영상을 보고 정리한 내용입니다.

함수 선언과 호출을 명확히 구분하고, 함수 호출이 보이면 리턴값으로 대체해서 생각하면 헷갈리지 않습니다. 이렇게 하면 이후 호출 스택을 이해하기 편합니다. 아래와 같은 코드가 있을 때 최종적으로 어떤 값이 호출되는 것인지 바로 알아야 정확한 코드를 짤 수 있습니다.

const x = "x";
function c() {
	const y = "y";
	console.log("c");
}

function a() {
	const x = "x";
	console.log("a");
	function b() {
		const z = "z";
		console.log("b");
		c();
	}
	b();
}

a(); // a, b, c
c(); // c

기본적으로 코드는 위에서 아래로 왼쪽에서 오른쪽으로 실행됩니다. 1차원적으로 생각할 수 있지만 이를 2차원으로? 머리속으로 그림을 그려서 이해해야 원활한 분석이 가능합니다.

기본적으로 함수를 호출하면 스택이 생깁니다. 일반적으로 명함통에 비유해서 하나씩 명함이 쌓이게 되고, 뺄 때느 위에서부터 빼냅니다. 이를 아래와 같은 용어로 정의합니다. 마지막으로 들어온 것이 가장 첫번째로 나가고 첫번째로 들어온 것이 마지막에 나갑니다.

LIFO - Last in First Out
FILO - First in Last Out

큐라는 것은 양 옆이 뚫려있다고 보면 됩니다. 들어오는 순서대로 쌓이지만 나가는 통로가 옆에도 있기 때문에 첫번재로 들어온 것이 첫번째로 나가게 됩니다. 이를 아래 용어로 정의합니다.

FIFO - First in First Out

이런 스택과 큐에 대한 기본적인 자료구조를 이해하고 있으면 좋습니다.