2. DB 연결 웹 앱

19) 자바스크립트 Call stack

---

이번 포스팅에서는 자바스크립트 callstack 에 대해서 공부해보도록 하겠습니다.

---

자바스크립트에서 함수는 연속적으로 불려질 수 있습니다. 이러한 연속적인 함수들이 어떻게 처리되어지는 지를 이해해 보는 시간을 갖겠습니다.

---

함수의 선언

함수는 여러 개의 인자를 받아서, 그 결과를 출력합니다.

파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않습니다.

만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 됩니다.

이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문입니다.

function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}

---

함수 호출

예시의 코드를 실행하면, 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

아래의 링크로 이동하여 내용이 변경 되는 것을 이해해 보세요. 한번에 콜스택에 대한 개념이 이해되는 마법입니다. 이해가 힘들다면 여러번 돌려보면서 천천히 따라가보세요 :)

콜스택 단번에 이해하는 마법

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 오류를 발견해도 너무 놀라지 말고, 대처하도록 하세요.

---