Q. Async/Await와 Promise의 차이

❓Promise

- Promise는 JavaScript에서 비동기 작업의 완료 또는 실패를 대표하는 객체
- then(), catch(), finally()와 같은 메서드를 통해 비동기 작업의 결과를 처리를 할 수 있음
- Promise 생성자를 사용하여 직접 Promise를 만들 수 있음

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data fetched!");
    }, 2000);
});

myPromise.then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});

❓Async/Await

- Async / Await는 Promise를 더 간결하고 가독성 높게 쓸 수 있게 도와주는 ES8(ES2017)의 기능
- 함수 앞에 async 키워드를 붙이면 해당 함수는 항상 promise를 반환
- await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise의 완료를 기다림
- Async/Await는 코드의 흐름을 더욱 명확하게 하며, 복잡한 연속된 Promise의 체이닝을 피할 수 있게 도와줌

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
}

fetchData();

차이점 요약
- 문법과 가독성 : Async/Await는 비동기 코드를 마치 동기 코드처럼 읽히게 하여 가독성을 향상시키는 반면, Promise는 then과 catch 체이닝을 복잡하게 보일 수 있음
- 에러 처리 : Async/Await는 try/catch를 사용하여 에러 처리를 할 수 있어 전통적인 에러 처리 방법과 비슷하고, Promise는 catch 메서드를 사용하여 에러를 처리
- 유용성 : 두 방법 모두 유용하며, 상황에 따라 적절한 방법을 선택해 사용하면 됨, Async/Await는 복잡한 연산에 특히 유용함

❔체이닝이란?

- 체이닝(chain) 또는 chaining은 객체 지향 프로그래밍 및 함수형 프로그래밍에서 흔히 볼 수 있는 패턴
- JavaScript와 같은 프로그래밍 언어에서 많이 사용됨
- 체이닝은 한 객체 또는 함수의 반환값을 연속적으로 호출하는 것을 의미함
- 이 패턴은 코드의 가독성을 향상시키고, 더 간결하게 코드를 작성할 수 있게 도와줌

• 배열 메소드 체이닝
  - numbers 배열에서 짝수만 필터링한 후 해당 값들을 두 배로 만드는 연산을 체이닝을 통해 수행함

let numbers = [1, 2, 3, 4, 5];

let doubledEvens = numbers
    .filter(n => n % 2 === 0)
    .map(n => n * 2);

console.log(doubledEvens);  // [4, 8]

• Promise 체이닝
  - 밑에 코드에서 fetchDataFromServer 함수는 Promise를 반환하며, 체이닝을 통해 데이터 처리와 저장을 연속적으로 수행함
  - 마지막으로 에러 처리도 체이닝을 통해 수행

fetchDataFromServer()
    .then(data => process(data))
    .then(processedData => save(processedData))
    .catch(error => console.error(error));

- 체이닝은 적절히 사용하면 코드의 가독성을 향상시킬 수 있지만, 과도하게 사용되면 코드의 복잡성을 증가시킬 수도 있음
  => 적잘한 균형을 찾아 체이닝을 사용하는 것이 중요함

 

기본적으로 Promise와 Async/Await는 모두 JavaScript의 비동기 처리 도구입니다.
Promise는 비동기 연산의 결과를 나타내는 객체입니다. 이 객체를 사용하면 then과 catch로 결과나 에러를 핸들링 할 수 있습니다.
Async/Await는 ES8에서 도입된 문법으로, 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있게 해줍니다. await는 Promise의 완료를 기다리고, async 함수는 항상 Promise를 반환합니다. 이 방식의 큰 장점은 코드의 가독성입니다. 특히 복잡한 연산이 많을 때, Promise의 체이닝보다 훨씬 읽기 쉽습니다. 그리고 에러 처리는 일반적인 try/catch로 가능합니다.
요약하면 Promise는 비동기 작업을 대표하는 객체이며, Async/Await는 그러한 작업을 더 간결하고 동기식처럼 작성할 수 있게 도와주는 문법입니다.