JavaScript - 동기와 비동기

JavaScript는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리하는 동기식 언어이다.
사용자들은 느린 웹 사이트를 원하지 않는다. 따라서 자바스크립트가 웹 사이트에서 동작할 때 비동기적으로 동작할 수 있어야 한다.

• 브라우저에서의 자바스크립트 실행 환경(Runtime)에서는 자바스크립트 엔진 자체가 제공하지 않는 일부 기능인 DOM 조작이나 AJAX 같은 비동기 처리를 위한 web API를 제공

동기(syncronous) : 코드 한줄, 한줄 실행이 끝난 뒤 다음 코드로 넘어가는 처리 방식

비동기(asyncronous) : 코드 실행 후, 완료 여부와 관계없이 다음 코드로 넘어가는 처리 방식

비동기 방식이 효율성 측면에서는 큰 장점이지만, 코드의 실행 순서를 보장받아야 하는 경우에는 동기 방식으로 처리해야한다.

JS 비동기 처리

1. 콜백함수

// 1
console.log("1등!");
// 2
setTimeout(function () {
  console.log("2등!");
  // 3
  setTimeout(function() {
	console.log('3등!');
}, 2000);
}, 2000);

2. promise 객체

promise는 총 3가지의 상태값이 존재

1. 대기(pending): promise 객체를 새로 생성한 상태
2. 이행(fulfiled): `resolove` 가 실행된 상태. 비동기 로직이 완료된 상태
3. 거부(rejected): `reject`가 실행된 상태. 비동기 로직에서 에러가 난 경우

• resolve 호출 : 이행상태 - promise 객체의 then() 메서드 호출
• reject 호출 : 거부 상태 - promise 객체의 catch() 메서드 호출

const helloPromise = new Promise((resolve, reject) => {
  // 생성 자체는 pending
  let isSuccess = false;

  if (!isSuccess) {
    reject(false); // catch 호출
    return;
  }

  console.log("1등");
  setTimeout(() => {
    resolve(); // then 호출
  }, 2000);
});

helloPromise
  .then((res) => {
    console.log("2등");
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(), 2000);
    });
  })
  .then((res) => {
    console.log("3등");
  })
  .catch((err) => {
    console.log(err);
  });

3. async, await

• 이 방법 역시 Promise를 활용, 사람이 읽기 쉬움

async function asyncFunction() {
  console.log("1등");
  await second();
  await third();
}

function second() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("2등");
      resolve();
    }, 2000);
  });
}

function third() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("3등");
      resolve();
    }, 2000);
  });
}

asyncFunction();

• 예외처리 방법
  aync/await 구문에서 try-catch문을 이용해서 에러를 처리

async function asyncFunction() {
  try {
    console.log(1);
    const result = await getResult();
    console.log(result);
    console.log(3);
  } catch (err) {
    console.log(err);
  }
}

function getResult() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("에러발생 예시"));
    }, 500);
  });
}

asyncFunction();