[JavaScript] callback 함수

 

callback 함수

 

---

 

 

# 일급 객체

 

 자바스크립트에서 변수의 값이 될 수 있는 것을 일급 객체라고 한다.

 

const num = 1;
// 숫자 1은 일급 객체이다.

const plus = function (x, y) {
  return x + y;
};
// 함수 plus는 일급 객체이다.

 

 숫자는 변수의 값이 될 수 있으므로 숫자는 일급 객체이다. 함수는 변수의 값이 될 수 있으므로 함수는 일급 객체이다. 자바스크립트는 함수를 일급 객체로 지원하는 언어이다.

 

 

# callback 함수

 

 함수는 일급 객체이다. 즉, 함수는 변수의 값이 될 수 있다. 함수는 변수를 입력값으로 받는다. 즉, 함수는 또 다른 함수의 입력값이 될 수 있다. A함수가 B함수의 입력값으로 사용되었다면, A함수는 callback 함수로 동작한 것이다.

 

function clickFunction (){
   console.log("hello");
}

document.querySelector('.button').addEventListener('click', clickFunction);

 

 addEventListener의 함수 안에 clickFunction이라는 함수가 입력값으로 사용되었다. 이 때 clickFunction이 callback 함수이다.

 

setInterval(() => console.log("hello"), 1000);

 

 setInterval 안의 () => console.log("hello")는 callback 함수이다.

 

 

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first(); // 1
second(); // 2

 

 first 함수를 실행하고 바로 다음에 second 함수를 실행하고 싶다고 가정해보자. 위 예시에서처럼 first() 다음에 바로 second()를 적어주면 순서대로 first가 실행되고 그 다음에 second가 실행된다. 자바스크립트는 위에서부터 아래로 순차적으로 실행되기 때문이다. 그러나 실제 개발 과정에서는 비동기 처리 등 여러 가지 이유로 인해 first와 second가 순차적으로 실행되지 않을 수도 있다. 이럴 때 callback 함수를 이용한다.

 

function first(){
  console.log(1);
  second();
}

function second(){
  console.log(2);
}

first(); // 1 2

 

 first 안에 second 함수를 callback 함수로서 넣어주면 first와 second는 반드시 순차적으로 실행된다. 이렇게, callback 함수는 주로 코드를 순차적으로 실행하고 싶을 때 사용한다. 

 

---

 

참고 자료 : 생활코딩 https://youtu.be/TAyLeIj1hMc, 코딩애플 https://youtu.be/-iZlNnTGotk