JavaScript
1. 비동기호출
- [ JavaScript Asynchronous Programming and Callbacks | Flavio Copes ]
- [ Introduction to web APIs | MDN ]
자바스크립트는 기본적으로 동기식이며 단일 스레이드이다. 코드는 위에서부터 차례로 하나씩 실행되고 끝나기를 반복하고, 하나의 흐름만을 가지고 움직이며 동시에 각기 다른 프로세스를 실행할 수 없다.
하지만 자바스크립트는 브라우저의 도움을 받는다. 브라우저에서 제공하는 여러 API를 사용해 코드의 실행 순서나 실행 여부를 계획할 수 있다. 예를 들어, addEventListener() API는 어떤 신호 - 사용자의 마우스 클릭, 드래그, 키보드 입력 등 - 가 있을 때만 특정 코드를 실행시킨다(비록 그 코드가 한가운데에 위치하더라도).
이는 자바스크립트가 일급 함수를 가졌기 때문에 구현할 수 있다.
[ 일급 함수 | MDN ]
함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현한다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다.
const btn = document.getElementById('button');
btn.addEventListener('click', () => { // 함수를 다른 함수에 매개변수로 제공
alert('Hello!');
})그리고 여기서 addEventListener() 안에 인자로 들어가는 함수를 callback이라고 부른다.
callback
[ Callback function | MDN ]
callback은 다른 함수에 매개변수로 전달되는 함수이다. 아래 예에서 greeting은 fullname에 매개변수로 전달되었다. 이 때 greeting은 fullname에서 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
// 2setInterval()
[ WindowOrWorkerGlobalScope.setInterval() | MDN ]
setInterval()은 지정한 시간 간격을 두고 함수나 지정된 코드를 반복적으로 실행하는 타이머를 설정한다. 만들어진 타이머를 식별할 수 있는 0이 아닌 숫자로 이루어진 timeoutID 를 반환한다. 이 값은 clearInterval()에 전달하여 타이머를 취소 시킬 수 있다.
setInterval(() => {
console.log('3초마다 console.log가 실행된다.');
}, 3000);