정의

const a = (callback) => {
	console.log('A')
	callback()
}

const b = () => {
	console.log('B')
}

a(b)

위 코드와 같이 파라미터로 함수를 전달하는 함수를 콜백 함수라고 한다.

활용 1

const sum = (a, b, c) => {
	setTimeout(() => {
		c(a + b)
	}, 1000)
}

sum(1, 2, value => {
	console.log(value)
})

콜백 함수를 이용하면 위 코드와 같이 setTimeout을 이용해서 시간이 지연되는 코드를 유용하게 사용할 수 있다.

활용 2

<div class="container">
	<h1>Loading...</h1>
</div>

const loadImage = (url, cb) => {
	const imgEl = document.createElement('img')
	imgEl.src = url
	imgEl.addEventListener('load', () => {
		setTimeout(() => {
			cb(imgEl)
		}, 1000)
	})

const containerEl = document.querySelector('.container')
loadImage(https://www.gstatic.com/webp/gallery/4.jpg', (imgEl) => {
	containerEl.innerHTML = ''
	containerEl.append(imgEl)
})

콜백 함수를 이용해서 위와 같은 코드로 Loading…이라는 글자가 1초 동안 나오고 사진이 나오게 하는 코드를 짤 수 있다.