동기 / 비동기처리와 콜백함수

⭐️자바스크립트는 항상 동기식 처리를 합니다(synchronous)

이전 포스트에 언급한 것처럼 한 번에 코드 한 줄씩 차례대로 실행되는겁니다.

하지만 자바스크립트는 비동기처리(asynchronous)도 가능한 언어입니다.

setTimeout처럼 특정 코드를 지정한 초 뒤에 실행할 수 있습니다.

자바스크립트를 실행하는 머신인 웹브라우저는 이러한 특수 코드를 발견하면 대기실로 보내고

실행이 바로바로 가능한 코드부터 실행합니다.

이런 처리 방식을 비동기라고 합니다.

잠깐 대기실로 보내는 코드들은 이미 정해져있습니다. setTimeout, addEventListener, ajax 관련 함수들입니다.

이런 코드들은 읽는 시점과 동작 시점의 차이가 존재합니다.

그렇다면 코드를 순차적으로 실행하고 싶을 때 어떡할까요? 콜백함수를 적극 활용하면 됩니다.

function firstFunc(callback){
    console.log(1);
    callback();
  }

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

  firstFunc(secondFunc);

//위 방식이 아니면 함수선언문을 직접 넣는 아래 방법도 있습니다.
    firstFunc(function(){
        console.log(2)
    });

콜백함수를 여러개 사용하면 단점이 발생합니다. 바로 코드의 가독성이 나빠집니다.

이 가독성 문제를 해결하려면 ES6 신문법인 Promise를 사용하면 됩니다.

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

자세한 내용은 다음 글에 작성하겠습니다.