JavaScript 개발자가 알아야할 33개 컨셉 01.Call Stack

 

01.Call Stack 

 

자바스크립트에서 호출 시, 호출 순서가 내부적으로 어떻게 동작하느냐에 대한 것이다.

 

예를 들어  Function1, 2, 3 이 있는데, Function 1에서 2를 부르고 2에서는 3을 부른다면

그 동작에 대한 처리 순서는 1 > 2 > 3을 순서대로 호출할 것이다. 

 

function three(){
	console.log('Baaam~');
}

function two(){
	three();
}

function one(){
	two();
}

one();

 

실행순서는 anonymous Function에 의해 one()이 제일 먼저 호출 될 것이다. 

그런다음 one에선 two를 호출하고, two에선 three가 호출될 것이다. 그 다음 로그가 출력되고, 

다시 three > two > one 순서로 더 이상 수행할 라인이 없으면, 위 소스의 실행 로직은 종료가 된다. 

 

Stack은 '쌓다'라는 의미를 가지고 있고, 후입선출(Last in First out) 의 자료구조다.

Javascript에서 특정 작업을 호출할 때, 해야 할 일을 마치 Stack에 쌓는 것과 마찬가지로 동작한다는 것이다. 

 

하지만, 이러한 콜스택이 붕괴되는 경우도 있다.

서로다른 두개의 Function이 각자 다른 하나를 호출하도록 실행해보면,

 

위와 같이 Maximum call stack size exceede로인한 에러가 발생한다. 

자바스크립트의 스택에 올릴 수 있는 사이즈에 제한이 있다는 것이다. 

 

자바스크립트의 Maximum call stack 사이즈는 아래 URL에서 확인할 수 있다. 

브라우저 마다 다르며 브라우저의 버전마다 상이하다. 

https://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit

Browser Javascript Stack size limit