JS에서 동기(Synchronous)와 비동기(Asynchronous)

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

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

즉, 한 번에 하나의 작업만 실행할 수 있다.

그래서 여러 작업을 효율적으로 처리하기 위해 동기와 비동기 개념이 존재한다.

console.log("A");
console.log("B");
console.log("C");
// 실행 순서: A → B → C

📌 예시 상황:

사용자가 버튼을 눌렀는데, 서버에서 데이터를 받는 데 5초 걸린다면

그 5초 동안 브라우저는 멈춘 것처럼 보인다.

👉 그래서 긴 작업이 있는 경우 동기 처리는 비효율적이다.

console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");
// 실행 순서: A → C → (1초 후) B

📌 핵심 개념:

📍 예시로 보면

1️⃣ 서버에 데이터를 요청 (시간이 걸림)

2️⃣ 그동안 사용자는 화면에서 다른 작업을 진행

3️⃣ 서버 응답이 오면 그제서야 결과를 화면에 표시

비동기 처리가 가능한 이유는 이벤트 루프 구조 덕분이다.

자바스크립트는 한 번에 한 줄만 실행하지만,

비동기 작업은 별도의 큐(Task Queue) 에 저장해 두었다가

메인 스레드(Call Stack) 가 비면 순서대로 다시 실행시킨다.

즉,

“먼저 할 일(동기 코드)부터 처리하고,

나중에 끝난 일(비동기 작업)은 다시 불러서 실행하는 구조”

구분	실행 방식	특징	예시
동기	순차적 실행	앞의 코드가 끝나야 다음 코드 실행	일반 함수 호출
비동기	병렬적 처리	오래 걸리는 작업을 기다리지 않음	setTimeout, 서버 요청, 이벤트 처리

💡 한 줄 요약

자바스크립트는 싱글 스레드지만,

비동기 처리(Event Loop) 를 통해 멈추지 않고 여러 일을 동시에 하는 것처럼 동작한다.