javascript 호출스택 call stack

call stack ! 

자바스크립트 공부하다보면 많이 들어봤으셨을 텐데요,

자바스크립트는 단일호출스택이 있습니다.

호출할 함수를 스택으로 쌓아놓고 위에서 하나씩 순차적으로 처리해나간다는 거죠 

하나의 함수가 실행되면 다른 함수는 못쓴다! 이겁니다

함수를 실행시키면 call stack에 함수가 push 되고 그 함수의 실행이 끝나면 함수가 pop되는데요

밑에 코드를 보며 알아볼까요

	
function one(){
	console.log('1')
}

function two(){
	function three(){
		console.log('3')
	}
	three()
	console.log('2')
}

one()
two()
	

위의 코드를 실행시켜보겠습니다.

자 먼저 one 함수를 불러오겠죠?

그럼 스택에 one 함수가 호출이 됩니다

call stack에 one 함수가 호출되어있습니다.

그럼 console에 1이 찍히고

one함수는 실행이 끝났으니 스택에서 나가고

그다음에 two함수를 불러옵니다.

two함수에 three함수를 같이 불러오니 call stack에 같이 쌓이겠죠

그럼 three함수의 실행이 끝나면 어떻게 될까요

two함수랑 같이 스택에서 사라질까요 ..?

아닙니다.three 함수는 지 역할 다 끝났으니 

console에 3을 찍고 사라집니다.

이것이 바로 호출스택의 원리이죠

함수는 실행이 끝나면 pop 된다!

그럼 남은 two함수는 console에 2를 찍고 사라지겠죠 ?

볼까요

call stack이 비워져 있는 걸 확인할 수 있습니다.

stack overflow

스택에 사이즈를 초과하면 maximum call stack size exceeded 라고 오류가 발생합니다. 스택도 용량이 있거든요

함수안에서 자기 자신을 반복적으로 호출할때 즉, 재귀함수를  호출할때 발생하는데요 이 오버플로우가 발생하면

브라우저는 함수를 종료시킵니다.

그럼 어떻게 해결할 까요?

바로 비동기콜백을 사용하여 해결하는 방법이 있습니다.

비동기함수는 바로 호출되지 않고 로직에 따라 실행 될 시점에 실행되기 때문에

call stack 에 쌓이지 않고 실행이 끝나면 바로 나가거든요.

호출스택에 간단하게 알아봤는데요

자바스크립트에서 중요한 부분이니 꼭 알아둡시다!!