자바스크립트 콜스택(call stack)

전체/JS & Jquery

자바스크립트 콜스택(call stack)

effortDev 2019. 3. 9. 14:28

자바스크립트 콜스택(call stack)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function four(){
 console.log("four function execute");
}
 
function three(){
    four();
}
 
function two(){
  three();
}
 
function one(){
  two();  
}
 
one();
Colored by Color Scripter
cs

다음과 같이 javascript에

one() 이라는 함수를 실행하면 two()를 부르고

two()는 three()를 부르고, three()는 four()를 불러서

console.log("four function execute")를 찍는다.

자바스크립트는 함수를 스택 위에 올리고

			four()
		three()	three()
	two()	two()	two()
one()	one()	one()	one()

함수를 다 실행하면 하나씩 pop하면서 제거한다.

four()
three()	three()
two()	two()	two()
one()	one()	one()	one()

스택을 다 처리하면 실행시킬 것이 없는 거다.

실행이 완료되면 함수는 리스트에서 사라진다.

만약 스택에 올라가있는 함수에

다음과 같은 throw 에러문이 있다면

1
throw Error("i am an error");
cs

에러 전에 있던 있던 모든 콜스택을 알려준다.

또한 스택에 함수를 계속 호출한다면 스택에 계속 쌓이게 되고

스택의 사이즈는 한계가 있으므로 다음과 같은 오류가 발생한다.

1. callstack.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <title>js 콜스택 테스트</title>
  <meta charset="utf-8" />
</head>
<body>
  <script type="text/javascript" src="callstack.js"></script>
  <h1>Hello</h1>
  <div>
  </div>
</body>
</html>
Colored by Color Scripter
cs

2. callstack.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function four(){
 console.log("four function execute");
}
 
function three(){
    four();
}
 
function two(){
  three();
}
 
function one(){
  two();  
}
 
one();
Colored by Color Scripter
cs

3. 실행결과 및 동작원리

자바스크립트는 함수를 스택 위에 올리고 함수가 실행되고 끝이 나면 pop하여 없애는 것을 확인할 수 있었다.