TIL 20 | JavaScript 콜백 함수, SynChronous, Asynchronous

콜백함수?

• 콜백 함수란 다른 코드(함수,메소드)에 인자로 넘겨주는 함수로서, 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한다.

• JavaScript는 동기적 언어이다.

• 콜백 함수는 필요에 따라 synchronous(동기적), Asynchronous(비동기적) 방식으로 사용할 수 있다.

Synchronous(동기적)

console.log(1) 
function printImmediately(print) {
  print();
}
printImmediately(() => console.log(2));  
console.log(3) 
				// 출력 순서: 1 => 2 => 3

• 위처럼 함수의 호이스팅 이후, 작성된 코드 순서대로 출력이 되는 것이 synchronous(동기적) 방식이다.

Asynchronous(비동기적)

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
//
printWithDelay(() => console.log(1), 1000); 
printWithDelay(() => console.log(2), 2000); 
console.log(3); 
				//출력 순서: 3 => 1 => 2

• asynchronous는 비동기적으로, 작성된 코드 순서대로 실행이 되는 synchronous(동기적)과 달리, 언제 코드가 실행될 지 예측할 수 없는 방식을 말한다.

• 일반적으로 비동기적 api인 setTimeout() 메소드를 사용하며 지정 시간이 지나면 콜백 함수를 호출하게 된다.

• 위 예제의 경우도 코드 작성 순서대로 실행이 되는 것이 아니라 3 => 1 => 2 순서로 출력된다.

Reference

• 동기, 비동기 처리

• 드림코딩 엘리 자바스크립트 콜백함수, 동기 비동기