JS 콜백함수

콜백함수란?

• JS에서 함수는 객체이다.
• 함수는 파라미터로서 객체를 전달할수있다.
• 함수의 파라미터로서 다른 함수에 전달하고 감싼 함수의 내부에서 그 함수를 호출한다.

function print(callback) {
    callback();
}

• 자바스크립트에서 print() 함수는 다른 함수를 파라미터로 받아서 내부에서 그것을 호출하는것이 가능하다. 이것을 “콜백”이라고 한다.

콜백 함수는 왜 필요할까?

• 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다.그러나, 코드가 다른 행위가 일어난 뒤에 실행되는 경우도 있고 순차적으로 실행되지 않을 때도 있다. 이런 것을 비동기 프로그래밍이라고 한다.
• 콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장한다. 다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행된다. 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜준다.
• 자바스크립트에서 콜백 함수를 만드는 방법은 어떤 함수의 파라미터로써 함수를 넘기고 어떤 행위나 태스크가 완료된 직후에 콜백 함수를 호출하는 것이다.

콜백만들기

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

setTimeout(message, 3000);

• setTimeout 함수는 자바스크립트에 내장된 함수이다. 이 함수는 주어진 시간(밀리세컨드 단위) 이후에 함수를 호출하거나 표현식을 평가한다. 그래서 여기 message 함수는 3초가 지난 후에 호출된다. (1초 = 1000 밀리세컨드)

• 다르게 이야기하자면, message 함수는 어떤 일이 일어나기 전이 아니라 뒤에(여기서는 3초가 지난 후에) 호출됩니다. 그래서 이 message 함수는 콜백 함수의 예시라고 할 수 있다.

비동기 함수가 무엇일까?

-다르게는 비동기 함수를 다른 함수에 호출하는 방법 말고 함수 내부에 직접적으로 정의하는 방법도 있다.

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

• 콜백 함수는 이름이 없고 자바스크립트에서 이름이 없는 함수 정의를 "익명 함수"라고 한다.

콜백 함수의 화살표 함수

<예시>

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