[JavaScript] 11. 비동기 처리의 시작, 콜백 이해하기

 

1. Synchronous(동기)

 - JavaScript is synchronous.

 - 현재 실행 중인 코드가 완료된 후 다음 코드를 실행한다.

 - Execute the code block in order after hoisting.

 

2. Asynchronous(비동기)

 - 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행한다.

 

'use strict';

console.log('1');
setIimeout(function() {
	console.log('2');
}, 1000); // 1초 뒤에 callback function을 실행해라.
console.log('3'); // 1 3 2

setTimeout(() => console.log('4'), 1000); // Arrow function으로 생략가능.

function printImmediately(print) {
	print();
}

printImmediately(() => console.log('hello')); // 동기 콜백

function printWithDelay(print, timeout) {
	setTimeout(print, timeout); // 콜백함수
}

printWithDelay(() => console.log('async callback'), 2000); // 비동기 콜백

// 1 3 hello 2 4 async callback

 

 

3. Callback Hell(콜백 지옥)

 - 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 가독성이 떨어지고 유지보수가 어려워지는 현상.

콜백지옥 예시