동기 vs. 비동기

동기적 코드 실행 방식

특징

• 작업이 순차적으로 진행됨
• 코드가 한 줄 실행되고 그 다음 줄이 실행되는 순서를 기준으로 작업이 처리됨.
• 현재 작업이 끝나야 다음 작업이 실행됨
  

예) 주문을 하면 음료를 받을 때까지 기다리는 방식 (뒷사람들 기다림)

console.log('First');
console.log('Second');
console.log('Third');

// OUTPUT
// First
// Second
// Third

장점

• 순서/일관성 보장
• 간단하고 직관적인 구조
• 단순한 오류 처리

단점

• 블로킹 현상
• 성능 저하
• 자원 낭비

비동기적 코드 실행 방식

특징

• 작업이 순차적으로 진행되지 않고 여러 작업을 동시에 처리함
• 현재 작업을 기다리지 않고 다음 작업이 진행됨
• 비동기적 작업은 보통 이벤트 루프, 콜백 함수로 처리됨
• 주로 I/O 작업, 네트워크 요청 등 시간이 오래 걸리는 작업에 사용됨
  

예) 주문을 하고 진동벨이 울리면 픽업하는 방식 (뒷사람들 기다림 x)

console.log('First');
// setTimeout: 비동기 함수
// 즉시 종료되며 실행 내용이 이벤트 루프로 들어감
// 이벤트 루프에 들어간 실행 내용은 2초 뒤에 실행됨
setTimeout(() => console.log('Second'), 2000);
console.log('Third');

// OUTPUT
// First
// Third
// Second

장점

• 응답성 향상: 블로킹 x -> 작업이 완료되지 않아도 다른 작업 처리 가능
• 자원 효율: 블로킹 x -> 대기 시간동안 다른 작업 처리 가능
• 병렬 처리: 블로킹 x -> 동시에 여러 작업 처리 가능

단점

• 코드 복잡성: 비동기 작업이 연속적으로 발생할 때 콜백 지옥 발생 가능
• 오류 처리: 콜백 함수 사용 시 오류 처리 복잡
• 디버깅: 순차적 x, 병렬적 o -> 여러 비동기 작업 동시 실행 시 프로그램 상태 파악 어려움