자바스크립트 콜스택(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(); | 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> | 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(); | cs |
3. 실행결과 및 동작원리
자바스크립트는 함수를 스택 위에 올리고 함수가 실행되고 끝이 나면 pop하여 없애는 것을 확인할 수 있었다.
'전체 > JS & Jquery' 카테고리의 다른 글
| js value와 reference (0) | 2019.03.12 |
|---|---|
| js primitive type (0) | 2019.03.10 |
| 버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트 (0) | 2018.10.31 |
| 시작페이지 설정, 즐겨찾기 설정 JS 소스 (0) | 2018.10.31 |
| JS Function Definitions Variable 자바스크립트 함수 선언방법 (0) | 2018.10.28 |