📌JavaScript는 비동기가 아닌, 동기적 언어이다.

그렇다면 동기와 비동기가 무엇일까?

• 동기(Syncronous) : 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식
• 비동기(Asynchronous) : 요청을 보낸 후 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식

1. 동기

function func1() {
    console.log('첫번째');
    func2();
}

function func2(){
    console.log('두번째');
    func3();
}

function func3() {
    console.log('세번째');
}

func1();

// 출력 순서
// 첫번째
// 두번째
// 세번째

2. 비동기

function func1(){
    console.log('첫번째');
    func2();
}

function func2(){
    setTimeout(function(){
        console.log('두번째');
    }, 0);
    func3();
}

function func3(){
    console.log('세번째');
}
func1();

// 출력 순서
// 첫번째
// 세번째
// 두번째

---

📌 JavaScript는 동기적이고, blocking(블로킹)이며, single-threaded(싱글 스레드)한 언어이다. 그러나 모든 것에서의 특성을 의미하지 않고 오직 한 연산에서의 특성을 의미한다.

- JavaScript에서 비동기 처리가 필요한 이유

자바스크립트는 네트워크 상 웹 브라우저에서 사용하는 언어이다. 그러므로 자바스크립트는 통신이라는 개념을 가지고 있다. 통신 중 어떤 함수가 일 처리가 길어지면, 웹 브라우저는 계속 멈춤 상태가 되고 기다려야 된다. 통신 중 계속 기다려야 되는 상황을 방지하기 위해 비동기 방식을 가지게 된다.

👉 비동기 처리 방법

1. 비동기적 Callback

function Callback(callback){
    console.log('콜백 함수');
    callback();
}
Callback(function(){
    console.log('콜백 받는곳');
})

• 비동기적 처리를 할 때에 가장 간단한 해결책
• 특정 함수에 매개변수로 전달된 함수를 의미한다. 그 콜백함수는 함수를 전달받은 함수안에서 호출된다.
• 많은 중첩 함수가 생겨 코드가 복잡해지는 일명,콜백 지옥에 빠질 수 있다.
• 그래서 ES7에서는 promise를 ES8에서는 async, await를 지원한다.

2. Promise

• 콜백 함수를 해결하기 위해 Promise를 나왔으며 이는 동기적으로 보이는, 비동기 처리 방식이다.
• promise는 기본적으로 콜백이 하는일과 같지만 차이점은 promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 promise자체 메소드인 .then()을 호출한다.
• 결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있게 된다.
• 작업이 실패했을 경우 자동으로 .catch()메소드를 호출되게 한다. 기존 try-catch를 이용해서도 예외처리가 가능하지만 자바스크립트에서는 promise의 catch를 사용하라는 warning message를 출력한다.(예외처리)
• 보다 module 지향적이다.

Promise에는 3가지 상태가 있다.

• Pending (대기)
  
• Fulfilled (이행)
  
• Rejected (실패)
  

비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

const condition = true;
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('resolved');
  } else {
    reject('rejected');
  }
});

promise
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.error(error);
  });

3. Async/Await

• Node.js 7.6버전부터 구현된 기능이며 Async/Await를 사용하면 promise에 비해 보다 쉽게 비동기 처리를 할 수 있다.
• Await를 통해 Promise 반환 값을 받아 올 수 있다.
• 위의 Promise 사용 코드를 익명 함수 패턴을 활용하여 async/await를 사용하는 코드로 변경했다.
• 주의할 점은 async/await 은 Promise 와는 다르게 에러를 핸들링 할 수 있는 기능이 없기 때문에 try-catch() 문을 활용하여 에러를 핸들링 하여 주어야 한다.(예외처리)

(async () => {
  const condition = true;
  const promise = new Promise((resolve, reject) => {
    if (condition) {
      resolve('resolved');
    } else {
      reject('rejected');
    }
  });

  try {
    const result = await promise;
    console.log(result);
  } catch (err) {
    console.error(err);
  }
})();