동기 & 비동기

동기 & 비동기

동기

자바스크립트는 동기적으로 동작합니다.
즉, hoisting이 된 이후부터 코드가 나타나는 순서대로 자동적으로 실행이 됩니다.

hoisting: var, function의 선언들이 자동적으로 제일 위로 올라가는 것

console.log('1');
console.log('2');
console.log('3');

예를 들면 위의 코드 정해진 순서대로 실행되는 것을 바로 동기(synchronous)라고 합니다.

비동기

반대로 비동기(asynchronous)는 언제 코드가 실행되는지 예측할 수 없는 것을 말합니다.

콜백함수: 전달해준 함수를 나중에 호출한다는 개념

예시로 아래 코드가 있습니다.

console.log('1');
setTimeout(function() {
    console.log('2');
}, 1000);
console.log('3');

setTimeout() API는 브라우저가 제공하는 API로, 콜백함수를 호출할 수 있습니다.
이러면 순서대로 실행하다가 1초뒤에 '2'가 출력됩니다.

동기 콜백 & 비동기 콜백 함수

동기 콜백 함수

즉각적으로 수행할 수 있는 동기 콜백 함수입니다.

예시 코드

function printImmediately(print) {
    print();
}
printImmediately(() => console.log('hello'));

비동기 콜백 함수

예측할 수 없는, 나중에 실행되는 비동기 콜백 함수입니다.

예시 코드

function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);
printImmediately(() => console.log('hello'));

동작

1. 모든 var, function()의 선언은 다 hoisting 됩니다. (위로 올려집니다.)
2. 그 다음에 출력이 되고, 동기 콜백함수는 그대로 바로 출력하고,
3. 비동기 콜백함수는 2번 수행까지 다 끝난 뒤에 출력이 됩니다.

이는 엘리님 영상을 보는 것을 적극 추천드립니다. (이해가 쏙쏙!)