[JavaScript] 동기(synchronous), 비동기(asynchronous)

동기 (synchronous)

: synchronous - 동시에 일어나는
: 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식

• 장점 : 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨
• 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹됨

// sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출
function sleep(func, delay) {
  	// Date.now()는 현재 시간을 숫자(ms)로 반환
	const delayUntil = Date.now() + delay;
  	
  	// 현재 시간(Date.now())에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복
  	while(Date.now() < delayUntil);
  	// 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출
  	func();
}

function foo() {
	console.log('foo');
}

function bar() {
	console.log('bar');
}

// sleep 함수는 3초 이상 실행된다.
sleep(foo, 3*1000);

// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹된다
bar();
// (3초 경과 후) foo 호출 -> bar 호출

비동기 (asynchronous)

: asynchronous - 동시에 일어나지 않는
: 현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식

• 장점 : 현재 실행 중인 태스크가 종료되지 않은 상태로 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않음
• 단점 : 태스크의 실행 순서가 보장되지 않음

function foo() {
	console.log('foo');
}

function bar() {
	console.log('bar');
}

// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3*1000);
bar();
// bar 호출 -> (3초 경과 후) foo 호출