JavaScript Asynchronous

안녕하세요. 오늘은 자바스크립트에서 매우 중요한 개념인 비동기(Asynchronous)에 대해 알아볼게요.

 

 

 

자바스크립트 비동기(Asynchronous)

 

비동기는 작업이 동시에 또는 순서에 상관없이 진행되는 방식을 의미해요.

 

즉, 하나의 작업이 끝날 때까지 기다리지 않고,

 

다른 작업을 먼저 실행할 수 있도록 처리 방식이에요.

 

 

 

동기(Synchronous) vs 비동기(Asynchronous)

구분	설명	실행 방식	예제
동기(Sync)	순서대로 한 줄씩 실행	앞의 코드가 끝나야 다음 코드 실행	일반적인 함수 실행
비동기(Async)	기다리지 않고 다음 코드로 넘어감	특정 작업 완료 후 “나중에” 실행	setTimeout, fetch 등

동기 코드 예제

console.log('1');
console.log('2');
console.log('3');

// 실행 결과 
1
2
3

비동기 코드 예제

console.log('1');

setTimeout(() => {
  console.log('2 (2초 후 실행)');
}, 2000);

console.log('3');

실행 결과
1
3
2 (2초 후 실행)

 

 

 

자바스크립트가 비동기를 처리하는 방식

 

자바스크립트는 싱글 스레드(Single Thread) 언어예요.

 

즉, 한 번에 한 줄씩만 코드 실행이 가능하지만,

 

비동기 처리를 위한 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue) 구조를 사용해요.

⚙️ 비동기 실행 흐름 (간단한 개념도)

1. 코드를 순차적으로 실행 (Call Stack)

2. 비동기 함수(setTimeout, fetch) 발견 시 → Web API로 넘김

3. Web API가 작업 완료 후 → 콜백 큐(Callback Queue)에 등록

4. 이벤트 루프(Event Loop)가 “스택이 비면 큐에서 꺼내 실행”함

🧠 즉,
👉 비동기 = 코드 실행 순서를 “나중으로 미루는 것”

 

 

 

자바스크립트 비동기 처리 방식의 종류

 

구분	키워드 / 개념	특징
콜백(callback)	함수 인자로 전달되어 나중에 실행	코드 중첩 문제 발생 가능
Promise	비동기 처리 결과를 “객체”로 반환	콜백 지옥 해결
async / await	Promise 기반 문법 단축	동기식 코드처럼 작성 가능

 

 

 

비동기 처리 방식별 예제

 

1. 콜백 방식

 

콜백 방식은 비동기 작업이 끝난 뒤 실행할 함수를 인자로 전달해요.

function fetchData(callback) {
  console.log('데이터 요청 중...');
  setTimeout(() => {
    console.log('데이터 응답 완료!');
    callback('✅ 서버 데이터 수신 완료');
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

// 실행 결과
데이터 요청 중...
(2초 후)
데이터 응답 완료!
✅ 서버 데이터 수신 완료

다 넘은 콜백이 중첩될수록 코드가 복잡해지는 "콜백 지옥(callback hell)" 발생해요.

 

 

2. Promise 방식

 

비동기 처리의 성공(resolve)과 실패(reject)를 명확히 구분하는 객체 기반 구조예요.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    let success = true;
    if (success) {
      resolve('🎉 데이터 가져오기 성공!');
    } else {
      reject('❌ 데이터 가져오기 실패');
    }
  }, 2000);
});

// then() → 성공 시 실행
// catch() → 실패 시 실행
fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('📦 요청 완료'));

// 실행 결과
🎉 데이터 가져오기 성공!
📦 요청 완료

 

 

3. async / await 방식

 

이 방식은 최신 문법으로 Promise를 좀 더 "동기적 코드처럼" 다루는 방법이에요.

 

await는 Promise가 처리될 때까지 기다려요.

async function getData() {
  console.log('데이터 요청 시작...');
  
  // Promise 반환 함수 실행
  const response = await new Promise((resolve) => {
    setTimeout(() => resolve('📡 서버에서 데이터 수신!'), 2000);
  });

  console.log(response);
  console.log('요청 완료 ✅');
}

getData();

// 실행 결과
데이터 요청 시작...
(2초 후)
📡 서버에서 데이터 수신!
요청 완료 ✅

async/await는 에러 처리를 try... catch로 쉽게 할 수 있어 비동기 코드의 가독성이 매우 좋아요.

 

 

 

비동기 관련 주요 함수 & API

함수 / 객체	설명
setTimeout(fn, delay)	지정된 시간 후 한 번 실행
setInterval(fn, delay)	지정된 간격마다 반복 실행
fetch(url)	네트워크 요청 (Promise 반환)
addEventListener(event, callback)	이벤트 발생 시 콜백 실행
Promise.all()	여러 Promise를 동시에 실행
Promise.race()	가장 먼저 완료된 Promise 반환

 

 

 

마지막으로 위의 내용의 요약표예요.

구분	키워드	실행 시점	장점	단점
콜백(callback)	함수 인자 전달	작업 완료 후 직접 호출	간단	콜백 지옥
Promise	.then(), .catch()	작업 완료 시 자동 실행	체이닝 가능	문법 약간 복잡
async/await	await, try...catch	동기처럼 기다림	가독성 높음	내부는 여전히 비동기

 

 

 

여기까지 자바스크립트의 비동기에 대해 알아봤는데요.

 

비동기는 중요한 개념이니 잘 복습해서,

 

자바스크립트의 동작 원리를 확실히 잡아두면 훨씬 쉽게 응용할 수 있을 것 같아요.