동기 비동기

동기

하나의 작업이 실행되고 완료될 때까지 다음 작업이 실행되지 않고 대기하는 것이다.
다음 작업이 실행하려면 이전 작업이 완료되어야 함.

console.log(1);
(() => console.log(2))();
console.log(3);
// 1
// 2
// 3

위 코드는 순서대로 실행하는 코드이다.

만약, 동기적으로 실행되는 순서를 유지한다면 콜백함수를 사용하면 된다.

const a = (callback) => {
    setTimeout(() => {
        console.log(1);
        callback();
    }, 1000);
};
const b = () => console.log(2);

a(() => {
    b();
});

지금은 간단해 보이지만, 함수가 늘어나면 코드가 길어져 들여쓰기를 사용하면 콜백지옥에 빠지게 된다.

비동기

현재 실행중인 태스크가 종료가 되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식
setTimeout, setInterval, HTTP요청, 이벤트 핸들러가 비동기 처리방식으로 동작한다.

비동식 코드를 작성할 땐 크게 두 패턴으로 나눌 수 있다.

• 콜백
• Promise패턴

Promise 패턴에서는 .then() 메소드를 사용하거나, async , await 키워드를 사용하는 방식으로 나뉜다.

console.log(1)
setTimeout(() => console.log(2), 0)
console.log(3)
// 1
// 3
// 2

Promise 클래스

콜백방식으로 원하는 순서로 코드를 작성할 수 있지만 최신의 방식으로 Promise 를 사용해보자!

Promise 클래스를 생성자 함수로 호출하면, 비동기 함수를 랩핑한 promise 인스턴스를 반환.
이 promise 인스턴스는 .then() 메소드나 await 키워드로 사용하며, 이때 비동기 함수의 실행부터 완료까지의 각 상태를 가지게 된다.

// resolve 매개변수, then()으로 실행
const c = () => {
    return new Promise((resolve) => {
        // promise를 반환하고있음
        setTimeout(() => {
            console.log(1);
            resolve();
        }, 1000);
    });
};
const d = () => console.log(2);

c().then(() => {
    d();
}); // then 메소드의 콜백함수가 resolve로 들어가서 실행됨

c()
    .then(() => b())
    .then(() => c());
// 메소드체이닝형식으로 사용가능

//위 방식을 줄여서
c().then(b).then(c); // 함수를 호출하지 않고 함수자체를 넣어서 사용

.then() 메소드를 사용하면 간결하게 사용할 수 있다.

async / await

영화예제에서 async 와 await 를 사용했었는데 이 예제를 참고하면 이 키워드를 사용하면 동기적인 코드처럼 작성할 수도 있다.

;(async () => {
  console.log('시작!')
  await getMovies('avengers')
  await getMovies('frozen')
  console.log('종료!')
})()
// 1. '시작!'
// 2. Avengers[]
// 3. Frozen[]
// 4. '종료!'

비교

// then메소드사용
a()
  .then(() => b())
  .then(() => c())
  .then(() => d())
  .then(() => {
    // ...
  })
// async,await사용
;(async () => {
  await a()
  await b()
  await c()
  await d()
  // ...
})()