33 concepts every JavaScript developer should know.

Javascript(이하 'js')를 사용하면서 그리고 공부하면서 우리는 수많은 자료들을 접하게되며 js에 대해 끝없는 학습이 필요하다해도 과언이 아니다.
하지만 이렇게 막연한 범위가 주어진다면 나를 포함한 목표지향적사람들은 너무 멀리있는 목표에 금방 지치고 겁을 먹게 될 것이다.
여기서는 한동안 Github에서 굉장히 핫했던 개발자라면 알아야하는 핵심 컨셉 33개를 살펴보면서 js의 기본소양을 길러보도록 하자.

1. Call stack

Call stack이란 js가 함수 실행을 handle하는 방법 중에 하나이다.
기본적으로 js는 함수를 실행할 때 stack(스택)을 쌓아올리는데 마치 책(혹은 카드)더미를 쌓아 올린다고 상상하면 좀 더 이해가 쉬울 것이다.

그림과 같이 쌓아올릴 때에는 먼저 호출된 함수가 아래쪽에 깔리며 그 후 호출 된 순서대로 쌓아 올려진다.
(여기서의 호출은 함수의 실행을 의미한다.)
함수가 모두 호출되면 맨 마지막에 호출된 함수(맨 위의 함수, 그림에서는 '6')부터 실행이 완료되고 stack에서 사라진다.
이를 Last in First out(LIFO == 선입후출)라고 한다.

글로된 설명이 와닿지 않는다면 여기 예시를 살펴보도록 하자.

function three () {
 throw Error('This is fucking Error !');
}

function two() {
    three();
}

function one() {
    two();
}

function zero() {
    one();
}

zero();

위와 같은 함수에서 함수 zero를 호출했을 때 call stack에는 (anonymous)가 깔리게 된다.
이 후 호출된 zero가 (anonymous)위에 쌓이며, zero위에는 one, one위에는 two, two위에는 three가 쌓이게 된다.
이렇게 쌓인 call stack은 쉽게 생각하면 js가 끝내야하는 함수 리스트인 것이다.

마치 우리가 to do list를 만들고 하나씩 지워나가는 것과 같다.

그렇다면 Uncaught Error: This is fucking Error !는 언제 출력되는 것인가?
함수의 호출은 말 그대로 함수를 불러 함수 내부(function body)가 실행된 상태이지만 아직 실행이 종료되지 않은 상태이다.
따라서 call stack에 쌓이고 나서도 아직 Error message를 출력하지 않는다.

함수 two에 의해 three가 호출되어 call stack에 쌓였지만 아직 Error message를 출력하지는 않음

three까지 call stack에 쌓이고 나면 비로소 three 함수 내부의 것들이 실행되면서 Error message를 출력한다.

그렇다면 아래와 같은 Error message는 언제 출력될까?

function three () {
    return;
}

function two() {
    three();
}

function one() {
    two();
}

function zero() {
    one();
    throw Error('OMG I am an Error !');
}

zero();

무심코 보면 zero를 호출하면서 Error messege가 곧바로 생성될 것 같지만 아니다.
one이 호출된 후 Error messege가 출력되도록 했기때문에 처음과 같이 Call stack에 모든 함수들이 순차적으로 쌓인다.

one에 의해 two가 호출되고 two에 의해 three가 호출되기 때문

그 후 순차적으로 실행이 완료되고 사라지면서 마지막 one함수가 종료되고 그 아래에 있는 throw Error('OMG I am an Error !');가 비로소 실행되어 Error messege가 출력된다.

여기까지 읽었다면 당신은 아마도 Call stack에 대한 개념을 어느정도 익혔을 것이다.
그렇다면 마지막으로 문제를 풀어보며 이글을 마치도록 하자.

function three () {
    return;
}

function two() {
    throw Error('OMG I am an Error !');
    three();
}

function one() {
    two();
}

function zero() {
    one();
}

zero();

위와 같은 코드의 Call stack은 어디까지 쌓이며 Error message는 언제 출력되는가?

Reference

• 33 concepts every JavaScript developer should know.
• (EP 01.) 자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개 | #1. Call Stack - by Nomad Coders
• JS Concept: Call stack