동기와 비동기

동기(Synchronous)

• 요청에 대한 결과가 동시에 일어남
  • 특징: 코드가 순차적으로 실행되기 때문에 어떻게 실행될지 쉽게 파악할 수 있음

//차례대로 실행되므로, 1 2 3 이 콘솔창에 표시됨
console.log('1');
console.log('2');
console.log('3');

비동기(Asynchronous)

• 요청에 대한 결과가 동시에 일어나지 않음
  • 특징: 여러 동작이 동시에 실행될 수 있기 때문에 코드가 어떻게 실행될지 파악하기가 어렵지만, 실행 속도가 빠름

// 1 3이 콘솔창에 표시되고 1초 후에 2가 표시됨
console.log('1');
setTimeout(() => console.log('2'), 1000); //1초가 지나면 콜백함수 실행
console.log('3');

그림으로 보는 동기와 비동기

출처: https://medium.com/from-the-scratch/wtf-is-synchronous-and-asynchronous-1a75afd039df

비동기는 언제 사용하나요?

• 반드시 순차적으로 처리하지 않아도 되는 경우
  • 예) 명령을 예측하기 어려움, 우선순위가 낮은 작업일 때
  • ex. 추천 검색어를 표시하기 위해서 서버와 웹브라우저가 통신할 때
    
    

---

참고사항

자바스크립트는 동기적(synchronous)임

• 즉, 호이스팅 이후에 순서대로 코드 블록이 실행됨
• cf. 호이스팅: var, 함수 선언 등이 먼저 실행되는 것