📍 동기와 비동기

동기(synchronous)

특정 코드의 실행이 완료될 때 까지 기다리고 난 후 다음 코드를 실행하는 것

비동기(asynchronous)

특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드들을 수행하는 것

JavaScript는 싱글 스레드 기반으로 동작하는 언어이다.
따라서 동기적으로 작동한다.
하지만 JavaScript에서도 비동기 처리가 가능하다.

📍 비동기 JavaScript

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

타이머 관련 API

setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행한다.

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

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

clearTimeout(timerId)

setTimeout 타이머를 종료

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

const timer = setTimeout(function() {
  console.log('1초 뒤 실행');
}, 1000);

clearTimeout(timer);

setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행

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

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

clearInterval(timerId)

setInterval 타이머를 종료

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

const timer = setInterval(function() {
  console.log('1초마다 실행');
}, 1000);

clearInterval(timer);