Callback

1. 정의

• 프로그래밍에서 콜백(callback) 또는 콜애프터 함수(call-after function)는 다른 코드의 인수로서 넘겨지는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다.

💎  개인정리 : 함수에 파라미터로 들어가는 함수

💎   참고 : 콜백함수가 필요한 함수에만 콜백함수 사용가능

2. 용도

코드를 순차적으로 실행하기 위해 사용

3. 예제

예제 1 ) 순서에 따라 클릭 후 콜백함수의 console.log('콜백함수') 실행

document.querySelector('.button').addEventListener('click', () => {
	console.log('콜백함수');
});

예제 2 ) 직접 만든 콜백함수

const first = (parameter) => 
	console.log('first');
	parameter();
}

const second = () => { 
	console.log('second');
}

first(second);

// 출력
// first
// second
  

그러나 자바스크립트는 기본적으로 맨위부터 차례로 코드를 실행하기 때문에 아래 코드도 같은 결과를 출력한다.

const first = () => 
	console.log('first');
}

const second = () => { 
	console.log('second');
}

first();
second();

4. callback 함수가 필요한 이유

• 위 코드를 확인하면 callback 함수가 필요하지 않다고 생각할 수 있지만 함수의 내용에 따라 위 코드는 second()가 먼저 실행되고 first()가 늦게 실행될 수도 있다. 그렇기에 이러한 부분을 해결하기 위해 callback 함수가 필수적으로 사용된다.

참조

• https://ko.wikipedia.org/wiki/%EC%BD%9C%EB%B0%B1
• https://www.youtube.com/watch?v=-iZlNnTGotk