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

• 들어가기 전에 함수는 연속적으로 불려질 수 있습니다. 자바스크립트에서 이를 처리하는 방법을 이해해봅니다.

---

학습 목표

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

핵심 개념

• call stack

학습하기

함수 호출

자바스크립트 함수 호출은 이렇게 불려집니다. 이 함수를 실행해보세요. 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 오류를 발견해도 너무 놀라지 말고, 대처하도록 하세요.

생각해보기

1. 여러분들이 구글 검색창에 'JavaScript Call Stack'을 찾아서 노출되는 글을 살펴봅니다.
2. 함수를 연속적으로 호출하는 샘플코드를 꼭 직접 구현해보고, 크롬 개발자도구의 콘솔창에서 실행한후에, source 탭에서 call stack을 확인해보세요.

참고 자료

[참고링크] Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more  https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec