javascript 33가지 기본 컨셉: 1. CallStack

javascript 33가지 기본 컨셉: 1. CallStack

항상 애용하고 있는 노마더코드 니콜라스 선생님이 새로운 강의를 시작하셨는데 나름 흥미가는 주제라 하루에 하나씩( 진짜 특별한 일이 없으면 이를 지킬려고 노력할 것이다.) 포스팅할 것이다. 나도 다른 사람의 강의 혹은 깃을 보고 하는 거라서 url을 첨부해놓는다. 

youtube: https://www.youtube.com/watch?v=QkFkFqg-J04
git: https://github.com/leonardomso/33-js-concepts

자바스크립트에서는 함수를 실행할 때 Stack에 저장하여 실행한다. 그래서 CallStack이라고 부르는 것 같습니다.

Stack 이란?

바닥이 막혀있고 윗 구멍을 통해 차곡 차곡 쌓이는 구조이다. 쌓아놓은 무언 가를 윗 구멍을 통해 하나씩 꺼낼 수 있다. 

여기서는 함수를 stack에 넣어 두었다가 실행되면서 stack에서 빠지게 된다. 스택이 비게 되면 실행시킬 함수가 없게된다.  

예제 1. 기본적인 예제

function third() {

console.log("hi I am three");

}

function second() {

third();

}

function first() {

second();

}

function zero() {

first();

}

zero();

이 코드를 실행시키면 그냥 단순한 hi I am three가 실행된다. 그럼 크롬 관리자 도구를 사용하여 코드가 어떻게 실행되는지 디버깅을 해보자!!

1. zero()를 stop point로 설정하고 실행하면 

Call Stack에 zero가 추가되어있다. 

2. 한개의 함수를 차례대로 실행하면 최종적으로 아래와 같이 stack에 쌓여있을 것이다.

아직까지 실행된 것이 아니라 stack에 저장만 되어 있는 것이기 때문에 함수가 실행되면 어떻게 되는지 보자 

3,. three는 더 이상 호출하는 함수가 없기 때문에 드디어 실행될 시간이다!!

함수 three가 실행되어서 출력이 되었고

stack에 함수 three가 빠져나간 것을 볼 수 있다. 

4. 차례대로 모두 실행시키면 callStack이 비게 되어서 실행 시킬 함수가 없게된다. 

예제 2. 에러 발생 버전 1

function third() {

console.log("hi I am three");

}

function second() {

third();

}

function first() {

second();

}

function zero() {

first();

throw Error("making Error By My Hand");

}

zero();

아래와 같은 상황이 되면 어떻게 될까?? 우선 한번 실행해보자!!

1. 첫 실행 

2. 차례대로 실행 

첫 예제와 같이 별문제 없이 실행되었다. 

3. throw Error를 실행시키기 전 

4. throw Error를 발생

이 부분을 보면 기존의 zero()가 호출하는 first 함수가 다 실행된 후 error가 발생했다. 

그리고 error가 발생되도 zero함수는 끝나지 않았는데 stack에 모든 값들이 없어졌다. 그리고 에러에 stack에 담겨있던 위치 정보들이 나타났다. 

그렇다 이부분을 보면 error가 발생하면 stack에 들어있던 값들이 차례대로 반환되며 에러가 발생한 부분을 알려주고있다. 

다른 예시를 들어 보겠다.

예제 3. 에러 발생 버전 2

function third() {

console.log("hi I am three");

throw Error("making Error By My Hand");

}

function second() {

third();

}

function first() {

second();

}

function zero() {

first();

}

zero();

함수를 이런식으로 바꾸어 실행해보겠다. 

당연히 third에 있는 console.log를 출력한다. throw Error에서 에러를 발생시킨다. 

버전 1과 다르게 상황이 어떻게 다른지 확인해보자!!

당연히 에러가 발생한다. 하지만 위와 다르게 에러가 발생한 위치가 third이기 때문에 third, second, first ... stack에서 나오는 순서대로 에러에 표시되는 것을 알 수 있다. 

추가 내용 

call Stack size exceeded 

이런식의 코드가 실행되면 front랑 back이 계속 호출될 것이다. 그렇게 되면 stack에 제한되어 있는 사이즈가 초과되어 오류가 발생하게 된다.

이와 같이 오류가 발생한다. 이를 통해 자바스크립트의 stack에는 제한된 크기라는 것을 알 수 있다. 

Summary

이번글을 통해서 크게는 두가지의 중요한 정보를 얻었다고 생각합니다. 

1. 자바스크립트의 함수 실행방식이 stack에 저장하여 차례대로 하나씩 불러 온다는 것

2. error가 발생하면 stack에 들어있던 값들이 차례대로 반환되며 에러가 발생한 위치를 알려주고있다. 

자바스크립트에서 보는 대부분의 에러 형태가 이런 모양으로 이루어 져있다. 이제부터는 당황하지 않고 저 정보들은 서로를 호출된 위치를 알려주는 거구나 라고 알 수 있다.

그럼 내일 2번째 내용으로 돌아오겠습니다. 감사합니다~~