callback함수란?

# 함수란?

- 어떤 특정한 일을 하는 코드의 묶음

- 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다.

- 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등

- 함수는 또다른 함수도 전달받을 수 있다.

function main(param) {
  param();
}

main(function() {}); //다른 함수의 인자로 전달되는 함수 ← 콜백함수

 

 

 

# 콜백함수

콜백함수는 콜백함수를 전달받은 함수(위 예시에서 main함수)에 의해서 호출된다.

그래서 이름이 'callback 함수'이다.

"내가 함수 하나 전달할테니까 나중에 니가 알아서 불러줘!"

 

function main(x) { //x라는 매개변수를 받음 ← x에 숫자, 문자열, 함수(콜백함수) 등 전달 가능.
 x(); //콜백함수를 호출할 수 있다.
}

function sayHi() {
 console.log("안녕");
}

main(sayHi); //sayHi라는 함수를 main함수에 인자로 전달해보자.
//안녕

 

전달한 콜백함수 sayHi는 콜백함수를 전달받은 main함수에 의해서 호출된다.
main함수 내부에서 main함수의 구현사항에 의해서 콜백함수는 호출된다.
즉, 콜백함수가 언제, 어떻게 호출될지는 콜백함수를 전달받은 'main함수'의 구현사항에 달려있다.

 

 

# 자주하는 실수

콜백함수를 인자로 전달할 때, 콜백함수 뒤에 소괄호를 붙여버리는 실수.

function main(x) { //x라는 매개변수를 받음
 x(); //콜백함수를 호출할 수 있다.
}

function sayHi() {
 return 1;
}

main(sayHi());//소괄호를 붙여버리면 즉각적으로 호출이 된다.
// 함수를 인자로 전달하는게 아니라, 함수의 '리턴값'을 전달하는 것. main(1)
// main(sayHi());에서 sayHi함수가 return을 하는게 없다면, undefined을 인자로 전달하는 것과 같다. main(undefined)

 

 

위 예시에서는 콜백함수로 전달해줄 함수를 따로 빼서 전달을 해줬다.

항상 함수를 따로 빼서 밖에서 전달해줄 필요는 없다.

소괄호 안에 바로 넣어서 전달해줘도 괜찮다.

function main(x) {
 x();
}

main(function sayHi() { // 이럴 경우, 함수이름을 넣을 필요 없이 익명함수로 넣어줘도 된다.
 console.log("안녕");
});

//콜백함수로 익명함수 전달
main(function () {
 console.log("안녕");
});

//더 간단하게 하기 위해, 화살표함수로 전달
main(() => {
 console.log("안녕");
});

 

 

 

# 콜백함수 응용

function greetToUser(greet) { //콜백함수를 매개변수로 받는다. 2.greet은 greetInKorean이 된다.
  const name = "별코딩";
  greet(name); //3. greetInKorean함수에 name으로 '별코딩'을 넣어줬다.
}

function greetInKorean(name) {
  console.log(name + '님, 안녕하세요'); //4.별코딩님, 안녕하세요 출력.
}

function greetInEnglish(name) {
 console.log('Hi, ' + name);
}

greetToUser(greetInKorean); //1.greetToUser함수의 인자로 greetInKorean콜백함수를 전달.
//별코딩님, 안녕하세요

이렇게 콜백함수를 사용하면 마치 부품을 갈아끼우는것처럼 함수의 인자를 우리가 원하는 콜백함수로 교체해가면서 다른 기능을 하게끔 만들 수 있다.

 

 

또한, 우리가 전달해준 콜백함수는 greetToUser라는 함수에 의해서 호출이 되기때문에 greetToUser함수 내부구현사항에서 우리가 원하는 시점에 콜백함수를 호출해줄수 있다는 장점이 있다.

 

 

## 비동기 실행 시 유용한 콜백함수

이런 특징은 네트워크 통신처럼 비동기적으로 실행되는 함수를 처리할 때 굉장히 편리하다.

 

예를 들어 사용자의 데이터를 로딩한다든지, 사용자를 로그인 시키다든지 이런 비동기적인 일이 다 끝난 후에야 콜백함수가 실행되게 만들어야한다면 콜백함수를 우리가 원할때 호출할 수 있는 특징은 엄청난 장점이다.

function greetToUser(greet) {
  const name = "별코딩";
  //...데이터 로딩 (시간이 많이걸린다.) 비동기함수를 호출한 후, 이 함수가 끝마친 후에 
  greet(name); //콜백함수 호출하면 된다.
}

function greetInKorean(name) {
  console.log(name + '님, 안녕하세요');
}

greetToUser(greetInKorean);

 

 

*참고영상 : https://youtube.com/watch?v=8FhRtDUhp1Q