Q1: 'async function'이란 무엇인가요?
A1: 'async function'은 비동기 코드를 보다 간결하고 읽기 쉽게 작성할 수 있도록 하는 함수 선언 방식입니다. 함수 앞에 'async' 키워드를 붙이면 해당 함수는 항상 Promise를 반환합니다.
Q2: 'async function'의 주요 특징은 무엇인가요?
A2:
- 함수 내부에서 'await' 키워드를 사용할 수 있어 Promise의 완료를 일시적으로 기다릴 수 있습니다.
- 함수는 항상 Promise를 반환하며, 명시적으로 값을 반환하면 자동으로 `Promise.resolve(value)`로 감싸집니다.
- 함수가 throw한 예외는 자동으로 반환된 Promise의 reject로 전달됩니다.
Q3: 'async function' 내에서 'await'는 어떤 역할을 하나요?
A3: 'await'는 Promise가 처리될 때까지 함수의 실행을 일시 중지하고, 완료되면 결과 값을 반환합니다. 이를 통해 콜백이나 .then() 체인 없이도 동기 코드처럼 비동기 로직을 작성할 수 있습니다.
Q4: 'async function'은 어떻게 에러를 처리하나요?
A4: 함수 내부에서 발생한 에러(throw)는 반환되는 Promise에서 reject 상태가 됩니다. 따라서 호출 시 `.catch()` 메서드나 try-catch 문을 통해 에러를 처리할 수 있습니다. 예를 들어, 호출부에서 `try { await asyncFunction(); } catch (e) { handleError(e); }`와 같이 사용합니다.
Q5: 일반 함수와 'async function'의 차이점은 무엇인가요?
A5: 일반 함수는 반환값이 즉시 반환되지만, 'async function'은 항상 Promise 객체를 반환합니다. 또한 'async function' 내에서는 'await'를 사용하여 비동기 코드를 동기 방식처럼 작성할 수 있습니다.
Q6: 'async function' 사용 시 주의할 점은 무엇인가요?
A6:
- 'await'는 오직 'async function' 내부에서만 사용할 수 있습니다.
- 여러 비동기 작업이 독립적일 때는 병렬 처리를 위해 각각 Promise를 생성하여 `Promise.all()`을 사용하는 것이 효율적입니다.
- 반환값이 없는 경우 명시적으로 `return;`해도 `Promise.resolve(undefined)`로 처리됩니다.
Q7: 'async function' 예제 코드는 어떻게 되나요?
A7:
```javascript
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data; // 자동으로 Promise.resolve(data)가 반환됨
} catch (error) {
throw error; // Promise.reject(error)로 처리됨
}
}
// 호출 시
fetchData()
.then(data => console.log(data))
.catch(err => console.error(err));
```
요약하면, 'async function'은 비동기 처리를 동기 코드처럼 간편히 작성할 수 있게 해 주며, 항상 Promise를 반환하고 예외 처리도 Promise 방식과 자연스럽게 연동되는 함수 선언방식입니다.
JavaScript에서 비동기 처리를 위한 `async function`은 <a href='https://sangseek.com/sangseeks/ES2017/ko'>ES2017</a>(ES8)에서 도입된 기능으로, 비동기 코드를 작성하는 데 있어 더 간결하고 읽기 쉬운 방법을 제공합니다. `async function`의 주요 특징은 다음과 같습니다. 1. 비동기 함수 정의 `async` 키워드를 사용하여 함수를 정의하면, 해당 함수는 항상 `<a href='https://sangseek.com/sangseeks/Promise/ko'>Promise</a>` 객체를 반환합니다. 만약 함수 내에서 명시적으로 `Promise`를 반환하지 않더라도, JavaScript 엔진은 자동으로 반환 값을 `Promise.resolve()`로 감싸서 반환합니다. ```javascript async function example() { return "Hello, World!"; } example().then(result => console.log(result)); // "Hello, World!" ``` 2. `await` 키워드 `async function` 내에서는 `await` 키워드를 사용하여 `Promise`가 해결될 때까지 기다릴 수 있습니다. `await`는 `Promise`가 해결되거나 거부될 때까지 함수의 실행을 일시 중지하고, 해결된 값이 반환됩니다. 이를 통해 비동기 코드를 동기적으로 작성하는 것처럼 보이게 할 수 있습니다. ```javascript async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } ``` 3. 에러 처리 `async function` 내에서 발생하는 에러는 `try...catch` 문을 사용하여 처리할 수 있습니다. 이는 비동기 코드에서 발생할 수 있는 예외를 쉽게 관리할 수 있게 해줍니다. ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { console.error('Fetch error:', error); } } ``` 4. 병렬 처리 `await`를 사용하면 비동기 작업을 순차적으로 처리하게 되지만, 여러 개의 비동기 작업을 병렬로 실행하고 싶다면 `Promise.all()`을 사용할 수 있습니다. 이를 통해 여러 개의 `Promise`를 동시에 처리할 수 있습니다. ```javascript async function fetchMultipleData() { const [data1, data2] = await Promise.all([ fetch('https://api.example.com/data1').then(res => res.json()), fetch('https://api.example.com/data2').then(res => res.json()) ]); return { data1, data2 }; } ``` 5. 반환 값의 자동 변환 `async function`에서 반환하는 값은 항상 `Promise`로 변환되므로, 함수 호출 시 `then()` 또는 `catch()` 메서드를 사용하여 결과를 처리할 수 있습니다. 이는 비동기 작업의 결과를 쉽게 다룰 수 있게 해줍니다. 6. 코드 가독성 향상 전통적인 콜백 방식이나 `Promise` 체이닝에 비해 `async/await` 구문은 코드의 가독성을 크게 향상시킵니다. 비동기 작업을 동기적으로 작성하는 것처럼 보이기 때문에, 코드의 흐름을 이해하기가 더 쉬워집니다. 7. 호환성 `async/await`는 ES2017에서 도입되었으므로, 이를 사용하기 위해서는 ES2017을 지원하는 환경이 필요합니다. 대부분의 최신 브라우저와 Node.js 버전에서는 지원되지만, 구형 브라우저에서는 Babel과 같은 트랜스파일러를 사용하여 호환성을 확보할 수 있습니다. 결론 `async function`은 JavaScript에서 비동기 처리를 보다 간편하고 직관적으로 만들어주는 강력한 도구입니다. 이를 통해 개발자는 복잡한 비동기 로직을 쉽게 관리하고, 코드의 가독성을 높일 수 있습니다. 비동기 프로그래밍을 보다 효율적으로 수행하기 위해 `async/await`를 적극적으로 활용하는 것이 좋습니다.
