JavaScript/JavaScript,jQuery

[JavaScript] 동기(Synchronous), 비동기(Asynchronous) 방식과 콜백 함수(Callback Function)

mingmongs 2025. 6. 17. 13:46

title

자바스크립트는 기본적으로 싱글 스레드(Single-thread), 동기(Synchronous) 처리 언어이다.
즉, 한 번에 하나의 작업만 처리할 수 있으며 코드가 작성된 순서대로 실행된다.
하지만 자바스크립트에서도 비동기 처리를 할 수 있는데,
자바스크립트의 동기 처리와 비동기 처리에 대해 각각 알아보자.

 

1) 동기(Synchronous) / 비동기(Asynchronous)란?

1-1) 동기(Synchronous) 처리

: 동기 처리는 코드가 순차적으로 실행되는 방식이다.
앞선 작업이 끝나야 다음 작업이 실행된다.

1-2) 비동기(Asynchronous) 처리

: 비동기 처리는 시간이 오래 걸리는 작업을 처리할 때,
그 작업이 끝나기를 기다리지 않고 다음 작업을 먼저 실행하는 방식이다.
대표적으로 API 요청, 파일 읽기, 타이머 등이 있다.

비동기 처리를 하기 위한 방법으로는 아래와 같다.

  • setTimeout() 함수나 fetch() 함수를 활용하여 처리
  • Ajax 방식으로 처리

 

2) 동기, 비동기 처리의 특징

2-1) 동기 처리 특징

  • 코드가 작성된 순서대로 실행됨
  • 하나의 작업이 끝나야 다음 작업이 실행됨
  • 실행 흐름이 단순하고 직관적
  • 시간이 오래 걸리는 작업이 있을 경우, 전체 코드 실행이 멈출 수 있음

 

2-2) 비동기 처리 특징

  • 작업 완료를 기다리지 않고 다음 코드를 실행함
  • 비동기 작업이 끝난 후 콜백, Promise, async/await 등을 통해 후속 처리함
  • 실행 순서가 코드 순서와 다를 수 있음
  • 동시에 여러 작업을 처리할 수 있어 성능 최적화에 유리함
  • UI 렌더링, 서버 요청 등 실무에서 자주 사용됨

 

3) 사용 예시

3-1) 동기 처리

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

function sayHello() {
  console.log("2. 안녕!");
}

sayHello();

console.log("3. 끝");


결과값

img1

 

3-2) 비동기 처리

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

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

console.log("3. 끝");

 

결과값

img2

 

4) 콜백 함수란?

: 콜백 함수(callback function)란, 다른 함수에 인자로 전달되어 나중에 실행되는 함수를 말한다.
주로 비동기 작업이 완료된 이후에 실행될 동작을 정의할 때 사용된다.

4-1) 사용 예시

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터 준비 완료");
    callback();
  }, 1000);
}

fetchData(() => {
  console.log("콜백 함수 실행");
});

 

결과값

img3

위 예제에서는 fetchData 함수 내부에서 비동기 작업을 수행한 후, 콜백 함수를 실행하고 있다.
이처럼 작업이 끝난 후 실행할 함수를 인자로 넘기는 방식이 콜백 함수이다.

 

5) 동기/비동기 처리 정리

구분 동기 처리 비동기 처리
실행 순서 순차적 순서가 바뀔 수 있음
멈춤 여부 앞 작업이 오래 걸리면 멈춤 다음 작업 먼저 실행 가능
사용 예 일반 함수, 계산 setTimeout, fetch, 이벤트 처리 등
장점 흐름이 단순함 성능, 반응성 향상
단점 느린 작업이 전체 흐름을 막을 수 있음 순서 예측이 어려워질 수 있음