JS의 핵심! 콜백 함수

YouTube Link
	자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)
	https://youtu.be/s1vpVCrT8f4

우선 콜백함수의 예시 코드들을 보자

function printImmediately(print) {

  print();

}

printImmediately(() => { console.log('hello') });

위의 코드는 동기식 콜백함수다. 말 그래도 콜을 한 후에 실행되는 것, 그것이 콜백함수이다. printImmediately(() => { console.log('hello') }); 를 보면 () => { console.log('hello') 이 부분이 콜백이 되는 함수이다. 아래는 비동기식 콜백함수이다.

function printWithDelay(print, timeout) {

  setTimeout(print, timeout);

}

printWithDelay(() => console.log('async callback'), 2000);

여기서 우리가 콜백함수를 제외하고 주목해야하는 또다른 부분이 있다. 그것은 바로 매개변수이다. 다른 언어를 접해본 사람들은 function printImmediately(print)에서 print인 매개변수가 print()함수로 정의되어 있다는 것이 조금은 당황스러울 것이다. 보통 타입을 작성하고 그에 맞는 타입을 대입하지만 Js의 특징인 자유성때문에 이러한 코드가 가능하다. 하지만 조금만 더 생각해보면 꼭 그렇게 이질적이지만은 않다. 규칙을 따라 print가 받아야할 것은 바로 함수이므로 print는 print()를 참조하고 이는 곧 () => { console.log('hello') } 을 의미한다. 물론 매개변수명이 print가 아닌 a여도 print()함수를 참조한다. 그렇다면 매개변수가 2개인 경우는 어떠할까.

function printImmediately(print) {

  print();

  scan();

}

printImmediately(() => { console.log('hello'), scan() });

 Js가 코드를 순차적으로 파싱을 하면서 우선 순위인 print()함수를 참조한다. 그리고 scan()은 다른 scan()이라 정의되어 있는 함수를 참조한느 것이다. 

function printImmediately(print, scan) {

  print();

  scan();

}

printImmediately(() => { console.log('hello') },() => { console.log('hello')});

이는 당연히 print 매개변수는 print()를 참조하고 scan매개변수는 scan()을 참조한다.

---

콜백함수는 크게 어려움이 없었느나 setTimout과 같은 함수를 사용할 때 콜백함수형태의 구조를 가지고 있다는 것을 생각하면서 코드를 작성하면 좋다.