1. 동기와 비동기

---

동기

• JavaScript의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미한다.
  

비동기

• JavaScript의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미한다.
• 동기적으로 운영하는 경우보다 훨씬 효율적이다.
  

JavaScript의 작동원리

• JavaScript는 싱글 스레드 기반으로 동작하는 언어이다. 따라서 동기적으로 작동하게 된다.
• 그러나 JavaScript가 작동하는 환경(런타임)에서 비동기 처리를 도와주기 때문에 특별한 작업 없이 비동기 처리를 할 수 있다.

2. 비동기 JavaScript

---

• JavaScript에서 비동기를 경험하게 되는 첫번째 단계는 타이머와 관련된 API이다.
• 해당 API는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다.

타이머 관련 API

setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행

• 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
• return 값: 임의의 타이머 ID

  setTimeout(function () {
    console.log('1초 후 실행');
  }, 1000);
  // 123

clearTimeout(timerId) : setTimeout 타이머를 종료

• 매개변수(parameter): 타이머 ID
• return 값: 없음

  const timer = setTimeout(function () {
    console.log('10초 후 실행');
  }, 10000);
  clearTimeout(timer);
  // setTimeout이 종료됨.

setInterval(callback, millisecond) : 일정 시간의 간격을 가지고 함수를 반복적으로 실행

• 매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
• return 값: 임의의 타이머 ID

  setInterval(function () {
    console.log('1초마다 실행');
  }, 1000);
  // 345

clearInterval(timerId) : setInterval 타이머를 종료

• 매개변수: 타이머 ID
• return 값: 없음

  const timer = setInterval(function () {
    console.log('1초마다 실행');
  }, 1000);
  clearInterval(timer);
  // setInterval이 종료됨.