비동기처리와 동기처리

자바스크립트는 원래 동기적으로 작용하는, 그러니까 위에서 아래로 순차적으로 실행되는 언어인데, 이벤트를 실행함에 따라 비동기적으로 작용하는 함수를 쓰게 된다.

동기함수 예시

function fakeSetTimeout(callback) {
	callback();
}

console.log(0);

fakeSetTimeout(function () {
	console.log('Hello');
});

console.log(1);

위의 코드는 fakeSetTimeout이라는 callback을 인자로 받는 동기 함수이다.
이를 실행 시키면,

//0
//Hello
//1

이렇게 순차적으로 실행되는 결과를 얻을 수 있다.

비동기 함수의 예시를 보자

setTimeout(() => {
	console.log('todo: First work!');
}, 3000);

setTimeout(() => {
	console.log('todo: Second work!');
}, 2000);

//todo: Second work!
//todo: First work!

setTimeout()함수는 자바스크립트 내장함수로, 콜백함수와 시간을 인자로 받아서 인자로 받은 시간만큼 기다렸다가 콜백함수를 실행시키는 함수이다.

비동기로 작용하는 함수는 어딘가에서 함수를 받아오기 때문에 시간이 걸려서 먼저 실행시킬수 있는 코드를 자바스크립트가 콜스택에 쌓아서 바로 실행시키고, 나머지 시간이 걸리는 함수들은 콜백 큐로 빼놨다가 순서대로 실행 시키는 것이라고 한다.
비동기 함수와 동기 함수들을 보다보니 든 생각인데 동기 함수는 선언부가 보이지만 비동기 함수들은 선언부가 보이지 않는 차이가 있는 것 같았다.
따라서 간편하게 비동기와 동기를 구분할 수 있는 방법은, 선언부가 보이면 동기적으로 실행되고 보이지 않으면 비동기적으로 실행된다고 생각된다.