[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #1.Call Stack

최근에 github에서 핫한 게시물이었던, 자바스크립트 개발자라면 알아야 하는 핵심 컨셉 33개라는 repository를 보게 되었다.

그것에 대해 공부하고, 정리할 겸 남기는 포스팅이다.

아직 js를 접한지 얼마 되지 않은 나로선 혼자 번역하면서 공부까지 하기에는 힘든감이 있어서

Nomad Coders의 동영상 강의 및 다른 번역본들을 참조하여 정리한다.

---

js 핵심 컨셉의 첫 번째는 call stack이다.

사실 call stack이란게 js만의 컨셉은 아닌데, 뭐 핵심 컨셉이라고는 하니 짚어보자.

 

위키백과에서 가져온 call stack의 의미는 다음과 같다.

   -콜 스택(call stack) : 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조.

 

쉽게 얘기하자면 프로그램의 함수를 처리하기 위한 공간이라고 생각하면 되겠다.

역시 직접 해보는 것이 조금 더 구체적으로 다가올 것 같다.

 

callstack.js파일을 만들어 다음과 같이 작성한다.

function three(){
  console.log("I love js");
}
function two(){
  three();
}
function one(){
  two();
}
function zero(){
  one();
}
zero();

실행해보면..

콘솔에 I love js가 출력된다.

알고 있겠지만, zero가 one을, one이 two를, two가 three를, three가 console.log를 호출한 결과이다.

이것을 조금 더 시각적으로 탐구해보기 위해 크롬 개발자도구의 Sources를 클릭해보자.

다음 화면을 볼 수 있을 것이다.

개발자도구에서는 함수의 실행 과정을 하나하나 지켜볼 수 있는 기능을 제공한다.

빨간 네모박스의 숫자를 클릭하면 break points를 지정할 수 있다.

zero();가 있는 14행에 break point를 설정하고 새로고침 버튼을 눌러주면, 14행이 실행되기 직전의 순간에 프로그램이 일시 정지된다.

14행에서 코드가 일시 정지되었고, 오른쪽 화면을 보면 Breakpoints에 callstack.js:14 zero();가 설정되어 있는 것이 보인다.

빨간 네모 박스의 버튼을 눌리면 바로 다음 단계로 이동할 수 있다.

1회 눌려보자.

중요한 순간이다.

Call Stack에 zero가 적재되었고(anonymous 생략), 컴퓨터는 14행을 읽고 function zero를 탐색하여 one();을 실행할 준비를 하고 있다.

next step을 1회 더 클릭해보자.

이번엔 11행의 one();을 읽어 8행을 탐색하려 하고 있고, call stack에는 zero, one이 적재되었다.

같은 방식으로 two, three가 차례대로 call stack에 적재될 것이다.

call stack에 zero~three가 적재된 모습

컴퓨터는 stack에 쌓여있는 함수들을 three부터 차례대로 수행해나간다.

계속해서 next step을 클릭해보며 call stack의 함수들이 pop되는 과정을 보면, 어떠한 방식으로 함수가 처리되는지 이해할 수 있을 것이다.

 

코드를 수정하여 에러를 발생시켜보자.

function three(){
  console.log("I love js");
  throw Error("Im an error");
}
function two(){
  three();
}
function one(){
  two();
}
function zero(){
  one();
}
zero();

바로 다음 단계에서 에러가 발생할 것이다.

에러 발생 당시의 콜스택의 내용을 출력했다.

프로그램 흐름상 console.log("I love js")가 먼저 실행되므로 I love js는 출력된 상태이고, 그 후에 에러가 발생했다.

중요한 부분은, three에서 에러가 발생했을 때 콘솔은 모든 해당 에러가 발생한 지점의 콜스택을 모두 출력해준다는 점이다.

에러 내용을 따라가다 보면, 자연스럽게 어디에서 에러가 발생했으며, 문제는 어디서 발생했는지 손쉽게 파악할 수 있다.

---

callstack의 내용은 여기까지이다.

앞서 말했다시피 자바스크립트에만 있는 개념은 아니므로, 찾아보면 더욱 정제된 자료들을 접할 수 있을 것이다.

다음 포스팅에서는 primitive type를 다뤄보겠다.