js개발자라면 알아야할 핵심컨셉 33개 1탄 call stack

33 Concepts Every JavaScript Developer Should Know : https://github.com/leonardomso/33-js-...

불러오는 중입니다...

 

원문 참조는 이곳이며 일단 최대한 간결하게 이해할 수 있도록 적어보겠습니다만

 

주 목적은 사실 내 공부임 ㅎㅎ

 

그럼 오늘은 1탄 call stack이라는 것.

 

컴퓨터전공이거나 좀 공부 해봤다 하면 꼭 나오는것이 바로 stack이라는 것인데

 

call stack은 말 그대로 스텍에 관한 js만의 개념인것!

 

그럼 js에서 call stack이란 무엇인가!? 바로 javascript가 함수 실행을 핸들하는

 

방법중 하나임. 즉 함수 컨트롤로 보면 될듯.

 

그럼 이것이 무엇이냐! js가 함수를 호출하면 stack방식으로 올림

 

혹시나 stack을 모르는 사람을 위해 설명을 하자면

 

네모난 상자가 있고 그 위에 딱 맞는 블럭을 넣는다고 생각하면 됨.

 

그러면 당연히 첫번째가 제일 밑에 깔리고 마지막에 들어간것이

 

제일 위로 오며 꺼내는 순서는 당연히 제일 위쪽부터 꺼내게 되는

 

방식임. 이것이 메모리와도 높은 연관이 있지만 일단 

 

아 순서대로 쌓이는구나를 생각하면 됨!

 

그러면 call stack으로 다시 넘어와서

 

js에서 함수를 호출하면 함수를 스텍위에 올리고 

 

다 실행하면 올린 함수를 스텍에서 제거함

 

그리고 stack을 다 실행하 면 끝! 이게 바로 call stack인데

 

하지만 단순히 함수를 실행하고 종료하면 끝인가?

 

이건 그냥 기본적인거고 이 실행 순서와 제거하는 순서에 관련이 있다는것

 

이것은 나중에 오류를 찾거나 로직상의 오류를 제거하는대 알아두면 요긴하게

 

쓰일 수 있음.

 

자 그럼 예를 하나 들어보자면

 

js 함수로 zero()함수 one()함수 two()함수 three()함수가 있다고 가정하며

 

zero()함수에서는 one()함수를 one()함수에서는 two()함수를 two()함수에서는

 

three()함수를 호출하며 three함수에서는 간단한 콘솔 로그를 띄우게끄럼 하자!

 

function three() {
   console.log("test");
}

function two() {
   three();
}
function one() {
   two();
}
function zero() {
   one();
}

zero();

 

그러면 이런 형식!

 

이것을 실행하면 결과는 당연히 three()에 있는 test라는 로그가 출력 된다.!

 

이걸 크롬으로 보면 함수 실행 중간중간마다 멈출 수 가 있으며 

 

디버거 창에 call stack이러는 것을 볼 수 있음.

 

즉 실행하면 이곳에 차례대로 올라가는것!

 

그러면 순서가 zero() one() two() three()순으로 위로 올라가며 

 

쌓이게 된다.그리고 three()의 test를 실행하고 실행이 끝났으니

 

사라지는데 그 순서가 zero() one() two()순이 아닌 stack처럼

 

three() two() one() zero() 순으로 제거가 됨 그러면 정상 실행은 아무 문제 없지만

 

에러가 났을때 우리는 에러 메시지를 보고 문제를 잡을 수 있음.

 

function three() {
   console.log("test");
}

function two() {
   three();
}
function one() {
   two();
}
function zero() {
   one();
throw Error("error");
}

zero();

 

이렇게 있다고 가정 했을때 먼저 zero()를 실행함 여기까지 정상

 

그런데 이런 에러가! 자 그러면 zero()에서 멈추느냐? 아님 왜냐

 

위에 one();이 있음. js는 컴파일러가 아닌 인터프리터이기때문에

 

소스 실행이 위에서부터 차례대로 실행됨 즉

 

one()을 다 실행하고

 

그다음줄에 있는걸 실행해서 에러가 나타나는거임

 

그러니 당연히 two()는 실행되지 않음. 그리고 콘솔창에서 에러를 보면

 

zero()함수에서 에러가 났다는걸 볼 수 있음. 

 

이런 순서대로 함수가 진행되는게 바로 call stack인것!

 

function three() {
   console.log("test");
   throw Error("error");
}

function two() {
   three();
}
function one() {
   two();
}
function zero() {
   one();
}

zero();

 

그러면 이렇게 에러가 났다면 어떻게 될까? 이걸 보면 call stack이 

 

어떤 컨셉인지 알 수 있음

 

실행은 zero() one() two() three()까지 순차대로 실행을 함

 

그리고 three()에서 로그를 찍고 그다음 에러를 출력하는데!

 

여기서 에러 전에 있던 모든 call stack을 알려줌

 

즉 zero() one() two() three()를 에러에서 전부 볼 수 있음.

 

이것은 실제 오류가 났을때 이 함수를 실행하는 사이클중 어느부분에서

 

참조를 하고 어디서 오류가 났는지를 알 수 있게 해줌

 

해석하자면 에러는 three()에서 났으며 three()는 two()에 의해 물려졌고

 

two()는 one() 순으로 연관이 있다는걸 알 수 있는것!

 

이 call stack의 컨셉을 알아두면 실제 개발을 할때 로직과

 

에러를 검출하며 찾아가는데 도움이 언젠간 될거임 ㅋㅋㅋㅋㅋㅋ

 

즉 call stack은 리스트가 존제하며 함수는 이 리스트에 stack형식으로 쌓이고

 

실행이 완료되면 리스트에서 제거된다! js의 to do list라고 보면됨 할일목록같은거!

 

아 그러면

 

function one() {
zero();   
}
function zero() {
one();

}

zero();

 

이런식으로 되면 어떻게 될까? 정답은 에러가 납니다!

 

왜냐면 서로가 서로를 무한으로 호출을 하는데 이렇게 계속 호출하다보면

 

maximum call stack size exceeded라는 에러가 뜸

 

이것은 js stack에 올릴 수 있는 제한이 있어서 나타나는거임.

 

뭐 사실 그럴일은 별로 없겠지만 미친듯이 함수를 호출하고 호출하고

 

물려들어가는게 많으면 저런 에러도 뜰 수 있구나! 라는거니 

 

참고하도록!

 

그럼 다음시간은

 

Primitive type에 대해 정리해서 올려보겠음!