Callback Functions

1. 자바스크립트에서는 함수는 객체다

우리는 함수 파라미터로 객체, 함수를 넣을 수 있다.

2. 자바스크립트는 위-아래로 코드를 실행한다

이런 특성 때문에 우리는 간혹 비동기 프로그래밍을 통해 비동기적으로 어떤 일 또는 함수를 처리하고 싶을 수 있다. 예로 들면, 세탁기로 돌린 옷들이 세탁기에서 나와야지만 우리는 해당 옷들을 건조기에 넣고 돌릴 수 있다! 하지만 옷들이 나오기 전에 건조기의 전원 버튼을 눌러 건조기가 옷을 받을 준비(?)를 해놓을 수 있다.

3. Callback 함수를 통해 우리는 문제와 에러를 예방할 수 있다

어떤 일이 먼저 처리되게끔, 그리고 그 일이 실행되자마자 바로 Callback 함수가 실행되게끔 설정할 수 있다.

Callback 함수 만들기

const message = function() {  
    console.log("This message is shown after 3 seconds");
}
 
setTimeout(message, 3000);

Anonymous Function으로 처리하기:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

💡 Anonymous Function?

call할 필요 없이 하나의 함수 안에 다른 함수를 바로 선언할 수 있다. 이렇게 선언하면 함수의 '이름'이 없기 때문에 Anonymous 즉 '익명의' 함수라고 부르는 것이다.

Arrow Function으로 처리하기 :

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

💡 이벤트 기반인 프로그래밍 언어답게 자바스크립트 안에서 callback function은 event 선언할 때도 사용될 수 있다. 해당 코드에서 첫번째 파라미터는 타입, 그리고 두번쨰 파라미터가 바로 callback function이다.

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

동기와 비동기?

💡 자바스크립트는 동기적이다

즉 코드 블럭은 hoisting이 나타난 이후부터 하나씩 동기적으로 실행된다.

동기적으로 처리

순서대로 코드가 실행된다

비동기적으로 처리

진행 상황:
setTimeout() 함수로 브라우저 api에게 요청을 보내서 3초간 후 '비동기 얍!'를 처리한다.

코드 분석:
setTimeout() 함수의 파라미터로 함수를 전달해 지금 당장 실행하지 않고 나중에 다시 불러달라고 말한다. (callback)

콜백도 동기, 비동기 나뉜다

1. 동기적인 콜백: printImmediately()는 함수를 파라미터로 받는다. 해당 파라미터로 받는 값들을 printImmediately() callback 함수는 동기적으로 바로 실행한다.
2. 비동기적인 콜백 : printDelay()는 함수와 timeout 시간을 파라미터로 받는다. 파라미터로 받는 값들을 setTimeout() 함수 안에 넣어서 실행시킨다. setTimeout() 함수 때문에 해당 함수는 비동기적으로 처리돼 2000초의 시간 후에 다시 callback 된다.

잠깐.. 그럼 자바스트립트는 엔진은 코드를 어떻게 처리하고 이해하나?

1. 일단 선언한 함수들을 hoisting 때문에 제일 위로 올라간다
2. 동기처리부터 후다닥 실행한다
3. 비동기 처리는 setTimeout() 함수 시간 설정에 따라 하나씩 비동기적으로 실행된다

Reference:
https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/
https://www.youtube.com/watch?v=s1vpVCrT8f4