[자바스크립트] 콜백함수(CallBack) 예제를 통해 가장 쉽게 이해하기

혹시 함수에 대해서 명확하게 모른다면, 함수 부분을 먼저 보고 오자.

https://shoney.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8-%EB%AC%B4%EB%AA%85-%ED%95%A8%EC%88%98-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C

[자바스크립트] 함수 선언, 무명 함수, 화살표 함수 사용법 및 기본예제

---

 

콜백함수를 이해시키기 위해 먼저 cry, sing, dance 를 하는 함수를 먼저 생성해줍니다.

(아래의 내용 [1.일반함수] , [2.콜백함수] 에서 모두 사용하는 함수들입니다.)

소스 코드

function cry() {

console.log("cry");

}

 

function sing() {

console.log("sing");

}

 

function dance() {

console.log("dance");

}

 

1. 일반 함수 

소스 코드

// 1. 기본 함수

// 기분 좋을때 춤을 추고 싶으면 sing()함수에 dance()로 변경해야함

function checkMood(mood) {

      if (mood === "good") {

             sing();

      } else {

             cry();

      }

}

 

checkMood("good");

checkMood("sad");

결과

sing

cry

콜백 함수 설명에 앞서 일반함수를 살펴보면, checkMood("good");을 실행하면 sing이 출력됨을 알 수 있다. 하지만, checkMood("good"); 일 때, dance가 출력되게 하고싶다면 if조건문에 sing();호출부분을 dance();로 수정해야만 한다.

 

2. 콜백 함수 

위에서 본 checkMood 일반 함수 안에서 호출되는 함수들을 자유롭게 바꾸고싶으면 콜백 함수를 사용할 수 있다. (자바스크립트에서는 변수로 함수를 넣어서 사용가능한 것을 응용 한 개념이다.)

소스 코드

// 2. 콜백함수 (함수를 매개변수로 넣어줌)

function checkMoodCallBack(mood, goodCallback, badCallback) {

if (mood === "good") {

goodCallback();

} else {

badCallback();

}

}

 

checkMoodCallBack("good", dance, cry);

checkMoodCallBack("Not bad", dance, sing);

결과

dance

sing

"good"일때 dance를 하도록,  checkMoodCallBack에서 호출할 함수를 지정할 수 있다. 이렇게 사용할 함수들 마져 선택해서 사용하는 것이 바로 콜백함수이다.