[JS] 비동기(Asynchronous)와 콜백 함수(Callback Function)

JavaScript는 싱글 스레드(Single Thread) 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있다. 그러나 비동기(Asynchronous) 처리를 통해 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 실행하면서도 동시에 다른 작업을 수행할 수 있다. 이를 통해 UI가 멈추지 않고 부드럽게 동작하도록 한다.

 

 

 

---

1. 비동기(Asynchronous)란?

비동기 처리는 코드가 순차적으로 실행되지 않고, 특정 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식이다.

 

대표적인 비동기 작업:

• setTimeout, setInterval (타이머 함수)

• fetch, XMLHttpRequest (네트워크 요청)

• Promise, async/await (비동기 프로그래밍 방식)

 

비동기 예제

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

setTimeout(() => {
  console.log("비동기 작업 완료");
}, 2000);

console.log("작업 종료");

 

출력 결과:

작업 시작  
작업 종료  
비동기 작업 완료 (2초 후 출력)

 

setTimeout() 함수는 2초 후 실행되지만, JavaScript는 이를 기다리지 않고 다음 코드(console.log("작업 종료"))를 바로 실행한다.

 

 

 

---

2. 콜백 함수(Callback Function)란?

콜백 함수는 다른 함수의 인자로 전달되어 특정 작업이 끝난 후 실행되는 함수이다. 비동기 코드에서 작업이 끝난 후 실행할 코드를 지정하는 데 많이 사용된다.

 

1) 콜백 함수 예제

function greet(name, callback) {
  console.log("안녕하세요, " + name + "님!");
  callback();
}

function sayGoodbye() {
  console.log("잘 가세요!");
}

greet("Alex", sayGoodbye);

 

출력 결과:

안녕하세요, Alex님!  
잘 가세요!

 

greet() 함수는 name을 받아서 인사한 후, callback으로 전달된 sayGoodbye() 함수를 실행한다.

 

---

 

1) 비동기 콜백 예제 (setTimeout 활용)

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터 가져오기 완료");
    callback();
  }, 3000);
}

function processData() {
  console.log("데이터를 처리합니다.");
}

fetchData(processData);

 

출력 결과:

(3초 후) 데이터 가져오기 완료  
데이터를 처리합니다.

 

fetchData()는 3초 후 "데이터 가져오기 완료"를 출력하고, 완료된 후 processData() 함수를 실행한다.

 

 

 

---

3. 콜백 함수의 문제점 (콜백 지옥)

콜백을 중첩해서 사용하면 코드의 가독성이 떨어지고 유지보수가 어려워지는 콜백 지옥(Callback Hell) 문제가 발생할 수 있다.

 

콜백 지옥 예제

setTimeout(() => {
  console.log("1초 후 실행");

  setTimeout(() => {
    console.log("2초 후 실행");

    setTimeout(() => {
      console.log("3초 후 실행");
    }, 1000);
  }, 1000);
}, 1000);

 

콜백이 중첩될수록 코드가 복잡해진다. 이 문제를 해결하기 위해 Promise나 async/await 같은 비동기 프로그래밍 방식을 사용한다.

 

 

 

---

4. 콜백 대신 Promise 사용

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("데이터 가져오기 완료");
      resolve();
    }, 3000);
  });
}

fetchData().then(() => {
  console.log("데이터를 처리합니다.");
});

 

• fetchData()는 데이터를 가져온 후 resolve()를 호출해 .then()에서 후속 작업을 처리한다.

 

 

 

---

정리

✅ 비동기 처리는 시간이 걸리는 작업을 실행하면서도 다른 작업이 동시에 진행되도록 한다.

✅ 콜백 함수는 특정 작업이 끝난 후 실행되는 함수로, 비동기 코드에서 많이 사용된다.

✅ 콜백 지옥을 피하려면 Promise나 async/await를 활용하는 것이 좋다.

 

자세한 추가 설명 자료

02-2 자바스크립트 비동기 처리