콜백함수

Callback 콜백이란?

함수가 끝나고 난 뒤에 실행되는 함수.

자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다.

 

다른 함수에 콜백 함수를 대입하는 방법

1. 익명함수로 전달

myDiv.addEventListener("click", function (){
	console.log("익명함수를 넣어서 동작!")
}) // 사실 기명함수를 선언해서 넣어도 똑같다. 이름이 있으나 없으나 상관없다.

2. 화살표 함수로 전달

myDiv.addEventListener("click", () => console.log("화살표 함수를 넣어서 동작!")})

 

3. 선언/표현한 함수를 전달

myDiv.addEventListener("click", myFn)

function myFunction(){
	console.log("함수 선언한 것을 콜백 함수로 전달")
}

 

 

비동기 처리를 동기적으로 처리할 필요가 있는 경우 사용 유의

자바스크립트는 이벤트 중심의 언어이다. 즉, 자바스크립트는 이벤트의 값이 반환될 때까지 기다리지 않고 다음의 이벤트를 계속 실행한다.

따라서 비동기적인 함수를 실행할 경우, 대표적으로 API 요청 등에서 특별한 처리를 해주지 않으면 함수를 원하는대로 실행하기 어렵다.

콜백 지옥이 생성될 수 있다.

 

이를 위해 Promise나 async await 패턴이 등장하였다. 이는 다음에 후술