[기술정리] 자바스크립트 async, await, 비동기적, 동기적

1. 동기적

• 정의: 코드가 위에서 아래로 순차적으로 실행됨.

• 특징:
• 이전 작업이 끝나야 다음 작업이 실행됨.
• 실행 속도가 느려질 수 있음.

• 예시 코드:

console.log("1. 시작");
console.log("2. 처리 중");
console.log("3. 종료");
// 출력: 1. 시작 → 2. 처리 중 → 3. 종료

2. 비동기적

• 정의: 코드 실행이 블로킹 없이 병렬적으로 처리됨.

• 특징:
• 작업 완료 시점을 기다리지 않고 다음 코드로 이동.
• 콜백, Promise, async/await 등을 사용해 처리.

• 예시 코드:

console.log("1. 시작");

setTimeout(() => {
    console.log("2. 처리 중 (비동기)");
}, 1000);

console.log("3. 종료");
// 출력: 1. 시작 → 3. 종료 → 2. 처리 중 (비동기)

3. async

• 정의: 함수 앞에 async를 붙이면, 해당 함수는 항상 Promise를 반환.

• 특징:
• 함수 내부에서 await를 사용할 수 있음.
• 비동기 코드를 더 읽기 쉽게 작성 가능.

• 예시 코드:

async function fetchData() {
    return "데이터 반환";
}

fetchData().then((data) => console.log(data));
// 출력: 데이터 반환

4. await

• 정의: async 함수 내에서만 사용 가능.

• 특징:
• Promise가 해결될 때까지 대기.
• 동기적 코드처럼 작성 가능.

• 예시 코드:

async function fetchData() {
    let promise = new Promise((resolve) => {
        setTimeout(() => resolve("데이터 반환"), 1000);
    });

    let result = await promise; // 비동기 작업 대기
    console.log(result);
}

fetchData();
// 출력: 데이터 반환 (1초 후)

5. 요약