자바스크립트는 항상 동기식 처리다. (synchronous)

동기식 처리란? 한번에 코드 한줄씩 차례차례 실행된다는 뜻이다.

웹 브라우저는 stack이라는 코드 실행 공간에서 코드를 한줄한줄 차례로 실행시킨다.

하지만 자바스크립트는, 비동기처리 (asynchronous)라는 것도 가능하다.

setTimeOut()같은 특수한 코드들을 발견하면 제쳐두고 다른 코드부터 실행시킨다.

중요한것은 이런 특수한부분은, 자바스크립트 언어 자체의 기능이아닌 자바스크립트 실행을 도와주는 웹브라우저 덕분이라는것이다.

콜백함수

콜백함수는 간단히, 함수안에 들어가는 함수를 전부 콜백함수라고 생각하면 된다.

자바스크립트는 비동기상황 등에서 코드를 순차적으로 실행하고 싶을때 콜백함수를 적극활용한다.

콜백함수 디자인

예를들어 이런 함수가있다고 하면,

function first(){
  console.log(1)
}

function last(){
  console.log(2)
}

first();
last();

콜백함수를 만들어서 first(last());
이런식으로 실행시킬 수 있게 만들어놓으면 순차적으로 실행할 수 있겠다.

function first(){
  console.log(1)
}

function last(){
  console.log(2)
}

first(last());

또 다른 방식으로는

first(function(){
console.log(2)
});

이렇게 직접 함수선언문을 집어넣을 수도 있겠다.

근데 이런 방식들은, 콜백함수를 여러개 사용하게되면 코드가 길어지고 지저분해지고, 알아보기 힘들어진다는 단점이있다.

first(function(){
  last(function(){
    one(function(){
      .....
    });
  });
}):

이런 코드를 리팩토링의 방법으로 ES6에 새로나온 Promise라는거를 사용하면 된다.

first().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});

이런식으로 사용하면, then이라는 키워드 덕분에 뭘 하는지 파악이 쉬워진다.