callback

1. Callback function

다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수.

다음은 콜백함수의 간단한 예시이다

function add (x, y, callback){
	let result = x + y
	callback(result)
}

function result (data) {
	console.log(data, "콜백함수 실행")
}

add(5, 6, result)
// 11, "콜백함수 실행"

뿐만 아니라 그 동안 많이 써오던 onClick, onChange도 콜백함수의 일종이다.

콜백함수는 동기적 함수와 비동기적 함수로 나뉘는데
동기함수는 프로그램이 순서대로 일어나는 것을 의미하고 비동기함수는 순서에 상관없이 동시에 일어나는 것을 의미한다.
onClick은 버튼이 클릭된 다음에 다른 함수가 실행되므로 동기함수라고 볼 수 있고 setTimeout과 다른 함수를 같이 실행하면 동시에 실행되므로 이는 비동기함수라고 볼 수 있다.

콜백지옥

출처
비동기적 콜백함수를 계속해서 사용하다보면 이미지처럼 콜백지옥에 빠지게 된다.
이를 해결하기 위해 나온 것이 Promise와 async/await이다.