호출 스택(Call Stack)
The mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions.
How JS knows what function is currently being run and what functions are called from within that fuction, etc.
Call Stack이란, 그 함수 내에서 어떤 함수가 현재 실행되고 그리고 어떤 함수가 호출되는지를 JavaScript가 알고 있는 방식이라고 할 수 있습니다.
1. 작동 원리
When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
함수를 호출하면, JS의 interpreter는 이를 Call Stack에 넣고 해당 함수를 실행합니다.
Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
해당 함수로 호출된 모든 함수는 Call Stack으로 들어가게 되고, 그들의 요청이 충족되면 실행하게 됩니다.
When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
현재의 함수가 끝나면, interpreter는 스택을 시작하고 마지막 코드열에서 남겨둔 곳에서 실행을 재개하게 됩니다.
이러한 글로는 한 번에 이해하는 것이 거의 불가능하기 때문에 아래의 예시와 함께 보도록 합시다.
2. 코드 예시
const multiply = (x, y) => x * y
const square = x => multiply(x, x)
const isRightTriangle = (a, b, c) => (
square(a) + sqaure(b) === sqaure(c)
)위와 같이 피타고라스의 정리인, 정삼각형 여부를 반환하는 코드를 예시로 봅시다. isRightTriangle이라는 함수 내에서 call-back function으로 square가 그리고 square 내부에선 또 다른 함수인 multiply가 들어있습니다.
isRightTriangle 함수를 실행하기 위해서는 JavaScript는 multiply와 square의 함수를 기록해두어야만 합니다. 왜냐하면, 해당 함수들은 값을 바로 반환하지 않기 때문입니다.
isRightTriangle(3,4,5) // 호출
square(3)+square(4) === square(5) // 실행
위와 같이 함수를 호출하면, square(3)을 먼저 실행합니다.
square(3) // 호출
multiply(3, 3) // 실행
isRightTriangle(3,4,5) // Call Stack에 기록중
square(3)+square(4) === square(5)
또 square(3) 함수 내에는 multiplay(3, 3)이라는 콜백 함수가 들어있기 때문에 해당 함수를 호출하여 실행합니다. 물론, 이를 통해서도 아직 값을 얻어내지 못했습니다.
multiply(3. 3) // 호출
9 // 실행
square(3) // 기록중
multiply(3, 3)
isRightTriangle(3,4,5) // Call Stack에 기록중
square(3)+square(4) === square(5)
이렇게 multiply(3, 3) 함수를 실행해서야 드디어 9라는 값을 얻어냈습니다. 아래의 함수들은 기록하며 기다리고 있는 중입니다. 그리고 Call Stack의 원리로 위에서부터 아래로 실행하게 됩니다.
square(3) // 호출
9
isRightTriangle(3,4,5) // 기록중
square(3)+square(4) === square(5)
이처럼 값을 얻어냈습니다.
isRightTriangle(3,4,5)
9+square(4) === square(5)
그리고 드디어 위와 같이 기록해두었던 함수에 첫 번째 값으로 9가 입력되게 됩니다. 이러한 과정을 동일하게 2번 더 반복하게 되겟죠?
isRightTriangle(3,4,5)
9+16 === 25 // return true
그렇게 진행해서야 정삼각형의 여부를 판단해주는 함수에 필요한 값이 모두 들어가게 되었습니다. 그리고 일치하므로 true가 반환되게 됐습니다.
3. 직접 확인해보기
실제로 위의 코드가 어떻게 진행되는지 눈으로 확인해볼 수 있습니다. 물론 다른 Call Stack 함수도 확인이 가능하겠죠? Loupe 이 링크를 클릭해서 들어가보시면 직접 확인해보실 수 있습니다.
또한, 아직 이해가 잘 가지 않는다면 유튜브에서 제가 참 좋아하는 제로초님께서 설명하시는 강의가 있으니 참고해주시면 좋을 것 같습니다.
Call Stack(호출 스택)은 매우 중요한 개념으로 이를 기반으로 비동기 프로그래밍에 대해 알 수 있으므로 완벽하게 마스터하는 것을 추천합니다 :D
