동기 (Synchronous)

하나의 요청이 완료된 이후 다음 요청을 진행하는 순차적 흐름 방식

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

// 1
// 2
// 3

결과 : console.log() 를 통해 값 1, 2, 3 이 순차적으로 출력된다.

비동기 (Asynchronous)

하나의 요청이 완료되기 전에 다음 요청을 실행하는 방식

비동기 코드 예제

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

// 1
// 3
// 2

결과 : setTimeout() 함수를 통해 console.log(2) 는 1초 후 에 출력된다.

const btnEl = document.querySelector('h1');
btnEl.addEventlistener('click', () => {
	console.log('Clicked!');
})

console.log('Hello!');

결과 : console.log(’Hello!’) 가 먼저 출력되고, console.log(’Clicked!’) 는 <h1> 요소를 클릭 했을 때 실행된다.

콜백 패턴 (Callback Pattern)

const a = () => {
	setTimeout(() => {
		console.log(1);
	}, 1000)
}

const b = () => console.log(2);

a();
b();

// 2
// 1

함수 a() 내부에 setTimeout() 을 통하여 1초의 delay 값이 존재하기 때문에 해당 출력 완료되기를 기다리지 않고 함수 b() 가 먼저 실행된 이후 1초 뒤에 함수 a()의 출력값 1이 출력된다.