[JavaScript 33가지 지식] 호출스택(Call Stack)

 

 

호출스택(Call Stack)??

자바스크립트가 함수실행을 핸들링하는 방법중 하나이다.

이를 좀 더 쉽게 이해 하기위해서는 스택(Stack)을 먼저 이해 하면 편하다.

---

 

스택(stack)??

할일들을 쌓아두고 가장 위에 쌓여있는 일부터 실행하는 방식이라고 생각하면 편하다 이해가 안가도 괜찮다.

아래 내용들을 진행하면서 스택은 계속 활용되니 말이다.

---

호출스택 작동방식

우선, 자바스크립트는 단일스레드 프로그래밍 언어이다.

(단일스레드: 일을 처리하는 곳이 하나 인것라고 간단히 우선 생각)

그렇기에 단일 호출스택이 있으며, 즉 한 번에 하나의 일(Task)를 처리 할 수있다는 뜻이다.

 

호출스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터구조이다.

함수를 실행하면 해당함수의 기록을 스택에 추가한다.

그리고 가장 최근에 추가된 함수를 실행하여 결과값을 반환하여 실행된 함수는 제거된다.

 

예시1)

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

아래 이미지는 위 코드를 실행하는 과정을 호출스택이미지로 나타낸것이다.

 

예시2)

function foo() {
    throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
    foo();
}
function start() {
    bar();
}
start();

위 코드가 크롬 개발 창에서 실행이되면 아래와 같은 결과 값을 내보낸다.

함수 실행과정

1)start()함수 스택에 기록

2)bar()함수 스택에 기록

3)foo()함수 스택에 기록

4)foo()함수 실행

5)에러 발생 throw new Error('SessionStack will help you resolve crashes :)');

 

---

스택오버플로우(Stack Over Flow)

말 그대로 스택의 사이즈를 초과했을때 발생하는 오류이다.

스택오버플로우경우를 가장 쉽게 볼수있는 방법은 재귀를 하는것이다

*재귀: 자기가 자기자신을 호출

 

예시)

function foo() {
    foo();
}
foo();

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차

 

 

참고자료

콜스택 (Call Stack)

자바스크립트 호출 스택(Call Stack) 이해하기