자바스크립트 함수 호출 스택

함수 호출

자바스크립트 함수 호출은 이렇게 불려집니다. 

이 함수를 실행해보세요.

run이 호출되고 그 다음에 printName이 호출됩니다.

// 함수의 호출.
function printName(firstname) {
    var myname = "jisu";
    return myname + " ," +  firstname;
}

function run(firstname) {
   firstname = firstname || "Youn";
   var result = printName(firstname);
   console.log(result);
}

함수호출과 stack

아래 그림을 마우스로 클릭해서, 내용이 변경되는 것을 차분히 이해해보세요.

한 번에 보기 어렵다면 여러 번 돌려보며 이해해보세요. 

함수 호출 스택

출처 https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec

function foo(b){
    var a = 5;
    return a * b + 10;
} 

function bar(x){
    var y = 3;
    return foo(x * y);
}

console.log(bar(6));

함수 호출 관계는 다음과 같습니다.

bar() → foo()

메모리에서는 우측의 Call Stack에서와같이 순서대로 쌓이게 됩니다.

bar 함수에서 foo를 호출한 후 foo 함수의 결과를 받아올 때까지 bar함수는 메모리 공간에서 사라지지 못하고 기다리고 있는 것이죠.

이를 당연히 생각할 수 있습니다.

foo의 경우에는 실행이 끝나고 return문이 실행되면 메모리 공간에서 사라집니다.

다시 말해서 Call Stack에서 없어지는 것이죠. 

call stack은 이렇게 동작하지만, 함수를 연속적으로 계속 호출하면 call stack이 꽉 차버리면서 더 실행되지 못하고 오류가 발생할 겁니다.

브라우저에서는 대부분 지정된 횟수만큼만 call stack을 쌓게 미리 설정해둔 경우가 많다고 합니다.

따라서 혹시 개발 중에 Maximum call stack size exceeded 오류를 발견해도 너무 놀라지 말고, 대처하도록 하세요.