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

• 들어가기 전에

함수는 연속적으로 불려질 수 있다. 자바스크립트에서 이를 처리하는 방법을 이해해보자.

• 학습 목표

1. 자바스크립트의 call stack을 이해한다.

• 핵심 개념

- call stack

• 함수 호출

- 함수 하나에 모든 로직을 다 넣지 않는다. 함수는 연속적으로 호출가능하다.

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

function printName(firstname) {
    var myname = "hzoou";
    return myname + "," + firstname;
}
 
//13→7→8→9→{1→2→3→4}→9{result}→10→11
function run(firstname) {
    firstname = firstname || "Youn";
    var result = printName(firstname);
    console.log(result);
}
 
run('WOO'); //hzoou, WOO

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

· {1→2→3→4} : call stack 부분

- run함수에 파라미터 값을 주지 않는다면, undefined가 되어서 "Youn"이 출력

· 자바스크립트에서 false가 되는 경우 : null, undefined, 공백 문자

• 함수 호출과 stack

- 메모리에서는 우측의 call stack에서와 같이 순서대로 쌓이게된다.

· return 값은 28이 아니라 100이다.

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

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

- 다시말해 call stack이 없어지는 것이다.

· main 함수는 전역(global) 공간, 전체가 다 메인함수라고 생각하면 된다.

- 함수가 반환될 때까지 아래 함수에서 위에 스택으로 쌓여서 실행된다.

- call stack은 이렇게 동작하지만 함수를 연속적으로 계속 호출하면 call stack이 꽉 차버리면서 더이상 실행되지 못하고 오류가 발생한다. 브라우저에서는 대부분 지정된 횟수만큼만 call stack을 쌓게 미리 설정해둔 경우가 많다.

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