동기와 비동기

Tags

JavaScript is synchronous

자바스크립트는 기본적으로 동기적이다.
가장 먼저 호이스팅이 진행된 후부터 코드 블록을 한줄한줄 동기적으로 실행한다.

호이스팅?

var, function declaration 등 선언들이 자동으로 맨 위로 올라가는 것.
 

synchronous 예시

console.log('a');
console.log('b');
console.log('c');
자바스크립트는 기본적으로 동기적이다. 위에서부터 아래로 순차적으로 명령어를 한줄씩 처리한다.
따라서 결과는 a b c 이렇게 순서대로 출력된다.
 

asynchronous 예시

console.log('a');
setTimeout(() => console.log('b'), 1000);
console.log('c');
setTimeout과 같이 콜백함수를 등록하는 비동기처리 힘수 호출 시에는 이야기가 다르다.
위에서부터 아래로 순차실행 하는 것은 동일하지만, 1초 뒤에 콜백함수를 실행해 달라고 지정해 두고 결과를 기다리지 않고 바로 다음 명령어를 실행한다.
따라서 결과는 a c b 가 나오게 된다.
 

콜백 함수는 무조건 비동기 처리 함수인가?

ㄴㄴ 이것도 2가지 경우로 나뉨.

Synchronous callback

  • 즉각적으로 동기적으로 실행됨.
  • 아래 실행 코드는 순차적, 동기적으로 실행되어 a b c 순서대로 출력된다.
// 동기 콜백 함수 선언
function printImmediately(print){
	print();
}


console.log('a');
printImmediately(()=>console.log('b')); // 동기 콜백 함수 사용
console.log('c');
notion image

Asynchronous callback

  • 나중에 언제 실행될 지 예측할 수 없음
  • 자바스크립트는 기본적으론 동기처리지만, 아래에서 작성한 printWithDelay함수는 비동기 처리되어 a c b 순서로 출력된다.

// Asynchronous callback
function printWithDelay(print, timeout){
	setTimeout(print, timeout);
}

console.log('a'); // 동기
printWithDelay(()=>console.log('b'), 1000); // 비동기 콜백
console.log('c'); // 동기
notion image