TIL 21 | JavaScript callback

Saemsol Yoo·2020년 12월 24일

JavaScript callback

javascript

목록 보기

12/25

https://youtu.be/s1vpVCrT8f4
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

1. Synchronous, Asynchronous

1-1. Synchronous

JavaScript is synchronous.
→ Execute the code block in order after hoisting!
→ hoisting이 된 이후부터 코드가 나타나는 순서대로 자동적으로 실행이 된다.(=동기적으로)

☁️ hoisting : var, function declaration 선언들이 자동적으로 제일 위로 올라가는것!

console.log('1');  //동기
console.log('2');  //동기
console.log('3');  //동기
//1
//2
//3  ... 작성한 코드 순서대로 출력이 된다.

1-2. Asynchronous

비동기적으로, 언제 코드가 실행될지 예측할 수 없는 것을 말한다.

console.log('1');           //동기
setTimeout(function() {
  console.log('2');
}, 1000);                   //비동기
console.log('3');           //동기

//1
//3
//2

//보통은 arrow function 으로 간단하게 전달한다.
//setTimeout(() => console.log('2'), 1000);  //비동기

→ 이것이 asynchronous,(=비동기) 적인 실행 방법이다.

2. callback의 실행방법

🤔 그럼 콜백은 항상 비동기일 때만 쓸까?
🤚🏻 아니다! callback 도 두가지의 경우로 나눠진다.

Synchronous callback (즉각적으로, 동기적으로 실행)
Asynchronous callback (나중에, 언제 실행될지 예측할 수 없다)

2-1. Synchronous callback

callback을 parameter 인자로 받아서 처리하는 함수를 만들어보자.

function printImmediately(print) {
	print();
};  // ... 동기

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

→ printImmediately 라는 함수는 print하는 콜백을 받아서 그 콜백을 바로 실행하는 함수이다.
→ 그리고 이때 이 함수의 선언은 hoisting이 되기 때문에 제일 위로 호이스팅이 된다. ⬆️

2-2. Asynchronous callback

function printWithDelay(print, timeout){
  setTimeout(print, timeout)
};  // ... 비동기


printWithDelay(() => console.log('async callback'), 2000);  // ...  비동기
//2초뒤에 ... async callback

→ printWithDelay 라는 함수는 2개의 인자를 받는다. 그 인자들은 print하는 것과, 얼마정도 timeout을 하고 싶은지이다.
→ 그리고 setTimeout 이라는 브라우저 API를 이용해서, 우리가 원하는 print라는 콜백함수를 호출하고, timeout이라는 인자로 비동기적인 실행을 한다.
→ 물론 이 함수의 선언도 hoisting이 되어 제일 위로 올라가게 된다. ⬆️

✨ JavaScript는 이렇게 함수를 callback 형태로, 인자로, 그리고 다른 함수에 전달할 수도 있고, 또는 변수에 할당할 수도 있는 언어이다.