JS - Callback 함수

출처: https://velog.io/@reasonz/2022.05.25-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98JS-callback-function

[2022.05.02] 자바스크립트 콜백함수(JS callback function)

 

콜백 함수는 왜 사용할까?

콜백함수를 사용하면 순차적으로 실행하고 싶은 코드가 있을 때 순차적으로 실행시킬 수 있다.
자바스크립트는 동기식 언어로 코드를 한줄씩 처리하게 되는데 중간에 setTimeout이나 이벤트 리스너와 같이 순차적으로 실행해야 하는 코드가 있다면 그때 콜백함수를 사용한다.

function first() {
  setTimeout(() => {
    console.log("0초 뒤에 실행할래!");
  }, 0);
}

function second() {
  console.log("두번째로 실행해주세요!");
}

first();
second();

console

두번째로 실행해주세요!

0초 뒤에 실행할래!

 

왜 second() 함수의 값이 먼저 찍힐까?

first 함수 내부에서 setTimeout을 사용했기 때문인데 setTimeout이나 이벤트리스너와 같은 함수들은 특정 조건(클릭이라던가, n초 후 실행)을 만족해야 내부 코드를 실행한다. 즉, setTimeout에 0초 후 실행하기 위해 잠시 임시로 저장되는 공간으로 따로 보내진다. 그 사이에 second함수가 먼저 실행되기 때문에 first보다 second가 더 먼저 실행된 것이다.

 

그럼 first() => second() 함수 순으로 실행하려면 어떻게 해야할까?

function first(callback) {
  setTimeout(() => {
    console.log("0초 뒤에 실행할래!");
    callback();
  }, 0);
}

function second() {
  console.log("두번째로 실행해주세요!");
}

first(second);

first 함수의 파라미터로 second함수를 넣었고 first함수 안의 setTimeout 내부에서 callback함수를 호출하였다.

first(second) => setTimeout(console.log("0초 뒤에 실행할래!")); => setTimeout(callback();)

callback 함수의 인자로 second() 함수를 넣었기 때문에 first() 함수의 실행순서대로 console.log가 먼저 찍히고 그 다음 인자로 받은 콜백함수가 출력된다.