[JavaScript]콜백 함수 Callback Function

[ 콜백 함수란? ]

 

 콜백 함수(Callback function)은 함수의 인수로 사용되는 함수입니다. 

 

 파라미터로 함수를 전달하여 함수의 내부에서 실행되는 함수로 특정 실행 위치를 보장하는 용도로 사용됩니다. 

 

 콜백 함수를 사용하면 콜백 함수만을 바꿔줌으로써 하나의 함수를 여러가지로 응용할 수 있게 됩니다. 

 

 같은 인풋들로 다른 동작을 수행할 수 있으며, 코드 재활용도가 높아지고 관리에 용이합니다. 

 

 

- 특징

• 익명 함수 사용 가능
• 파라미터로 전달할 때 함수의 이름만 넘기기( 소괄호 없이 )
• 전역변수, 지역 변수를 콜백 함수의 인수로 전달 가능

 

 

 

 

[ 콜백 함수 사용하기 ]

 

- 특정 실행 위치 보장하기 

 

 콜백함수를 사용하므로써 우리는 함수의 특정 실행 위치를 보장할 수 있습니다. 

 

function hello() {
  console.log('hello');
}

function timeout(callback){
  setTimeout(() => {
    console.log('callback test');
    callback();
  }, 3000)
}

timeout(hello);
hello();

 

 위와 같이 코드를 작성하면, timeout(hello)를 먼저 실행했음에도 불구하고 hello() 함수가 먼저 실행되었음을 콘솔창에서 확인할 수 있습니다. 

 

 timeout(hello)는 콜백 함수가 바로 실행되지 않고 함수 내부의 setTimeout() 함수에 따라 3초 후에 콜백함수로 주어진 hello 가 실행되는 것을 확인할 수 있습니다. 

 

 

 

 

- 익명 함수 사용하기

 

콜백함수는 함수의 내부에서 실행되기 때문에 이름이 없는 익명 함수를 사용할 수 있습니다. 

 

setTimeout(function () {
  console.log('callback');
}, 3000)

 

 

 

 

- 전역 변수 / 지역 변수를 파라미터로 전달하기

const a = 'hello';  // 전역 변수

function func(callback) {
  const b = 'world';  // 지역 변수
  callback(b);
}

function callbackFunc(text) {
  console.log(`${a} ${text}`);
}

func(callbackFunc)  // hello world