[JavaScript] 함수호출 스택

함수 호출

run이 호출되고, 그 다음에 printName이 호출된다.

function printName(firstName) {
    var myName = "hh_lin";
    return myName + " " + firstName;
}
 
function run(firstName) {
    var firstName = firstName || "Kim";
    var result = printName(firstName);
    console.log(result);
}

Call Stack

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에는 다음과 같이 순서대로 쌓이게 된다.

foo(18)

bar(6)

console.log(bar(6))

main()

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

각각의 함수는 실행이 끝나고 return문이 실행되면 메모리 공간에서 사라진다.(Call Stack에서 사라진다.)

함수를 연속적으로 계속 호출하게 되면 Call Stack이 꽉 차버리면서 더 실행되지 못하고 오류가 발생하게 된다.

(Maximum call stack size exceeded)

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

참고자료

https://www.edwith.org

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