JavaScript

1. 비동기호출


자바스크립트는 기본적으로 동기식이며 단일 스레이드이다. 코드는 위에서부터 차례로 하나씩 실행되고 끝나기를 반복하고, 하나의 흐름만을 가지고 움직이며 동시에 각기 다른 프로세스를 실행할 수 없다.

하지만 자바스크립트는 브라우저의 도움을 받는다. 브라우저에서 제공하는 여러 API를 사용해 코드의 실행 순서나 실행 여부를 계획할 수 있다. 예를 들어, addEventListener() API는 어떤 신호 - 사용자의 마우스 클릭, 드래그, 키보드 입력 등 - 가 있을 때만 특정 코드를 실행시킨다(비록 그 코드가 한가운데에 위치하더라도).

이는 자바스크립트가 일급 함수를 가졌기 때문에 구현할 수 있다.

[ 일급 함수 | MDN ]
함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현한다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다.

const btn = document.getElementById('button');

btn.addEventListener('click', () => { // 함수를 다른 함수에 매개변수로 제공
  alert('Hello!');
})

그리고 여기서 addEventListener() 안에 인자로 들어가는 함수를 callback이라고 부른다.

callback

[ Callback function | MDN ]
callback은 다른 함수에 매개변수로 전달되는 함수이다. 아래 예에서 greetingfullname에 매개변수로 전달되었다. 이 때 greetingfullname에서 callback이다. fullname이 실행되기 전까지 greeting은 실행되지 않는다.

function greeting(name) {
  console.log(`hello, ${name}`);
}

function fullname(firstname, lastname, callback) {
  const name = `${firstname} ${lastname}`;

  callback(name);
}

fullname('Black', 'Jack', greeting);

타이머 API

setTimeout(), setInterval()등 시간을 이용하는 API에 함수를 매개변수로 전달(callback)하여 함수가 실행되는 시기를 조절할 수 있다.

setTimeout()

[ WindowTimers.setTimeout() | MDN ]
setTimeout()은 타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정한다. 만들어진 타이머를 식별할 수 있는 0이 아닌 숫자로 이루어진 timeoutID 를 반환한다. 이 값은 clearTimeout()에 전달하여 타이머를 취소 시킬 수 있다.

setTimeout(() => {
  console.log('setTimeout 실행 2초 후에 console.log가 실행된다.');
}, 2000);

아래와 같이 코드를 작성한다면...

console.log(1);

setTimeout(() => { 
  console.log(2); 
}, 1000);

console.log(3);

콘솔에는 이렇게 표시된다.

// 1
// 3
// 2

setInterval()

[ WindowOrWorkerGlobalScope.setInterval() | MDN ]
setInterval()은 지정한 시간 간격을 두고 함수나 지정된 코드를 반복적으로 실행하는 타이머를 설정한다. 만들어진 타이머를 식별할 수 있는 0이 아닌 숫자로 이루어진 timeoutID 를 반환한다. 이 값은 clearInterval()에 전달하여 타이머를 취소 시킬 수 있다.

setInterval(() => {
  console.log('3초마다 console.log가 실행된다.');
}, 3000);