20190523 33-JS-Concepts :: 01. Call Stack & Memory Heap

Call Stack

• 자바스크립트는 기본적으로 싱글스레드 기반의 언어이다. (호출 스택이 하나)
• 그렇기 때문에 한번에 한 작업만 처리할 수 있다.
• 자료구조 STACK 으로 이해하면 수월하며, 함수가 실행되고 리턴된다.
• 호출 스택의 각 단계를 스택 프레임이라고 부른다.
• 그리고 예외가 발생했을 때 콘솔 로그 상에서 나타나는 스택 트레이스가 구성되는데, 에러가 발생했을 때의 콜스택을 의미한다.

Memory Heap

• 메모리의 할당이 이루어지는 공간

예시

function three(){
    console.log("three");
    console.log("finish");
}

function two(){
    console.log("two");
    three();
}

function one(){
    console.log("one");
    two();
}

function zero(){
    console.log("zero");
    one();
}

zero();

 zero() 함수를 기점으로 one() → two() → three() 이렇게 수행됨을 확인할 수 있다. 크롬 창에서 개발자 모드를 통해 해당 함수가 어떻게 실행되고 있는지 콜스택을 살펴보자.

 

 

크롬창에서의 콜스택 모습 (호출)

크롬 개발자도구에서 확인한 결과, 현재 수행되고 있는 라인은 4번째 라인이다. 해당 내용의 값은 순서대로 쌓이는 것을 확인할 수 있다. zero 부터 시작해서 three 에 이르기까지 스택프레임이 다 쌓이고 난 뒤, 차례대로 함수가 반환되면서 스택 프레임의 값은 줄어드는 것을 확인할 수 있다.

 

 

크롬창에서의 콜스택 모습 (반환)

현재 수행되고 있는 라인은 15번째 라인이고, 앞서서 수행이 완료된 함수들은 콜스택에서 반환됨을 확인할 수 있다.

 

 

무한호출 (Stack overflow)

만약에 하나의 함수가 재귀호출로 자기 자신을 호출하게 되면, 콜스택의 스택 프레임을 계속 쌓게 된다. 이 쌓이는 스택프레임의 개수가 브라우저가 가진 최대 스택을 초과하게 되면 스택오버플로우가 되면서 에러가 발생한다.

function recursive(){
    console.log("Hello");
    
    //  recursive
    recursive();
}

recursive();

 

 

결과

Uncaugh RangeError : Maximum call stack size exceeded

 

위의 내용은 실제 콜스택의 크기를 넘어섰기 때문에 브라우저가 조치를 취하는 것이다. 단일, 즉 싱글스레드 언어인 자바스크립트는 데드락 혹은 멀티스레드 기반 환경을 크게 신경쓰지 않아도 된다. 만약 특정 코드의 실행이 늦춰지게 된다면 어떤 일이 벌어날 것인가 ?

 

다시 말해서 콜스택에서 수행하는 함수 중에서 오랜 시간이 걸리는 함수가 있다고 했다면, 브라우저는 아무것도 수행하지 못하게 된다. 이를 블록킹(Blocking) 되었다고 말한다. 이 순간에는 브라우저는 새롭게 화면을 렌더링할 수 없고, 다른 코드를 수행시키지 못한다. 이 때문에 브라우저가 응답할 수 없는 상태에 빠지는 것을 방지하기 위해선 비동기 콜백을 이용하여야 한다. (Asyncronous Callbacks)

 

Call Stack 에러 발생

로그 상에서 스택트레이스가 구성되며, 에러가 발생한 콜 스택을 의미하고 있다.

function three(){
    console.log("three");
    console.log("finish");
}

function two(){
    console.log("two");
    three();

    // 에러 발생
    throw Error("Error !!");
}

function one(){
    console.log("one");
    two();
}

function zero(){
    console.log("zero");
    one();
}

zero();

에러가 발생한 함수와 그에 따른 스택 트레이스를 문구로 차례대로 보여주고 있다.

 

 

reference

자바스크립트는 어떻게 작동하는가?

모든 자바스크립트 개발자가 알아야하는 33가지 개념