Javascript - 재귀함수(2) Call stack

재귀함수를 이해하는데 있어서 중요한 부분 중에 call stack 이라는 것이 있다. call stack은 함수를 몇번 호출 했느냐를 뜻하는데, 이부분이 헷갈리면 재귀함수 사용에 있어서 어려움이 있을 것이다. 작일 codestates review 시간에 모르는 개념이 나와서...이해하는데 어려움 있었다.

 

우선 하기 코드를 실행 했을 때(foo(4)), console.log(num)에 의해 console이 어떻게 출력이 될지 추측 한다면...

callstack의 개념을 모르면다면 아마 결과를 4 3 2로 추측을 많이 했을 것이다.

 

하지만, 위의 코드를 실행했을 때 결과는 다음과 같다.

 

Call stack을 모를 때, 이렇게 생각하기 쉽상이다.

Call stack의 개념을 보면...Call stack으로 인해 Call stack이 끝나는 지점으로 돌아가 다시 코드가 실행된다. 이것을 debugger 코드를 넣어서 확인 해 볼 수 있다. 이렇게 debugger 이용하여 code가 어떻게 실행되는지 단계적으로 볼 수 있다.

 

 

debugger로 인해 다음과 같은 화면으로 넘어가고, 빨간색 네모칸에 있는 화살표를 누르면 코드 한줄한줄 어떻게 실행되는지 보여준다. 지금화면은 num===4 화면이다.  이것을 n===1 될 때까지 화살표를 눌렀을 때, call stack 이라는 화면에 어떤 함수가 실행 되었는지 보여준다.

num === 4

num === 1 일때를 보면 Call Strack에는 함수가 4번 실행된 것을 볼수가 있다. 이후 단계적으로 더 실행을 해보면...

num === 1

num === 1 일때 보다 한단계를 더 실행해보면, 재귀함수 호출을 하면서 미쳐 실행하지 않았던, console.log(num)//#2가 실행이 되는 것을 확인 할 수 있다. 그리고 Call Stack의 함수는 실행되지 않았던 코드가 실행 되면서, Call Stack은 줄어 들었다. Call Stack이 돌아가면서 역순으로 실행이 된다. num === 2 일 때, 실행 하지 않았던 console.log(num)//#2가 실행되고, 이후 num === 3일 때, 실행 되지 않았던 console이 실행되고, 이후 num ===4 일 때, 실행되지 않았던, console 실행되어 결과 값이 4 3 2 2 3 4가 나오는 것을 알 수 있다.

num === 1 이후 단계적으로 실행 했을 때!!

현재 코드는 단순 하기 때문에 쉽게 찾을 수 있다. 긴 코드일 수록 debugger의 효과는 매우 뛰어나다.

만약 두번째 if문 안에 return이 있다면, console.log(num)//#2가 실행은 안된다. 그 이유는 return은 함수를 종료하기 때문에 foo 함수가 끝나기 때문이다. if 문에 return을 넣으면 결과는 다음과 같다. 그리고 return이 되면서 return 값을 확인 할 수 있다.

 

#javascript#codestates#callstack#recursion#콜스택#재귀함수