[JavaScript] 콜백 함수(Callback Function)

콜백함수(Callback Function)

콜백함수는 파라미터로 전달받은 함수를 말한다.
파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있다.

add함수로 리턴된 값을 printResult함수의 인자로 전달해준다.

function add(x, y) {
	return x + y
}

function printResult(result) {
	console.log(result)
}

printResult(add(10, 20))

위 코드를 콜백함수로 구현하면 다음과 같이 변경할 수 있다.
add함수에 콜백함수를 받을 print라는 파라미터를 추가하고 내부에서 x와 y의 합을 인자로 전달해준다.
그리고 print파라미터의 인자로 printResult함수를 전달해준다.
바로 여기서 printResult함수가 콜백함수가 되는 것이다.
먼저 add 함수가 호출된 후 printResult함수가 add함수 내부에서 나중에 호출되게 된다.

function add(x, y, print) {
	print(x + y)
}

function printResult(result) {
	console.log(result)
}

add(10, 20, printResult)

또한 콜백함수는 정의된 함수뿐만 아니라 익명 함수도 인자로 전달 가능하다.

function add(x, y, print) {
	print(x + y)
}

add(10, 20, (result) => {
	console.log(result)
})

콜백함수의 장단점

콜백함수를 사용하면 다음과 같은 이점을 얻을 수 있다.

• 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있다.
• 함수를 굳이 정의하지 않고 익명 함수로도 전달 가능하다.
• 비동기(Asynchronous) 처리 방식의 문제점을 해결할 수 있다.

하지만 콜백함수를 사용하면 다음과 같은 단점이 있다.

• 콜백함수를 남용하면 코드의 가독성이 떨어진다. (콜백 지옥)
• 에러 처리가 어렵다.
  
  

콜백함수를 이용한 비동기처리

콜백함수는 주로 비동기처리에 사용된다. 비동기(Asynchronous)란 특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미한다.
대표적으로 자바스크립트에 내장되어 있는 setTimeout() 이라는 함수가 있다.

callback이라는 파라미터를 선언하고 콜백함수를 전달받아 setTimeout() 함수의 인자로 전달한다.
setTimeout() 함수는 비동기 함수이기 때문에 코드의 실행이 끝날 때까지 기다리지 않고 바로 다음 코드로 넘어간다. 그렇기 때문에 Hello가 먼저 출력되고 1(1000ms)초 뒤에 콜백함수가 실행되는 것이다.

function callBackTestFunc(callback) {
	setTimeout(callback, 1000)
  	console.log('Hello')
}

callBackTestFunc(() => {
	console.log('waited 1 seconde')
})

Hello
waited 1 second