[JavaScript] 콜백 함수

1. 정의

• 함수에 파라미터로 들어가는 함수

2. 용도

• 순차적으로 실행하고 싶을 때 쓴다.

<script>
/* addEventListener - 버튼 누르면 이 코드 실행해주세요 */
document.querySelector('.button').addEventListener('click', function() {
	//버튼 클릭시 이 부분 실행됨
    setTimeout(function() {
    	//1초 후에 안에 작성한 코드 실행해주세요
    }, 1000);
});
</script>

 

3. 특징

• 다른 데에서 만든 함수도 콜백함수로 넣을 수 있다.

<script>
document.querySelector('.button').addEventListener('click', 함수명);
setTimeout(function() {
	//구현 부분
}, 1000);
</script>

• 콜백함수에 함수명을 작명할 수도 있다.

<script>
document.querySelector('.button').addEventListener('click', 함수명);
setTimeout(function 함수명() {
	//구현 부분
}, 1000);
</script>

• 콜백함수가 필요한 함수들에만 콜백함수를 사용할 수 있다.

 

4. 원리

<script>
function first(파라미터) {
	파라미터()
};

function second() {

};

first(second);	//fist 함수 안의 코드 실행해주세요 근데 파라미터에 second 집어넣어서요
</script>

 

first() 함수 다음에 second() 함수 실행하고 싶으면?

<script>
function first(파라미터) {
	console.log(1);
    파라미터();
};

function second() {
	console.log(2);
};

first(second);
</script>

 

Q. first(); second(); 이렇게 코드를 작성해도
first 함수가 실행된 후에 second 함수가 실행되는데,
콜백함수는 의미가 없는 거 아닌가요?

A. 👉 내가 first라는 함수를 만들었는데, 팀원들이 이것을 자주 쓴다면 콜백함수가 의미가 있다.

예)

팀원1: first() 후에 console.log(2) 바로 하고 싶은데요?

팀원2: 저도 first() 후에 console.log(4) 바로 하고 싶어용

👉 이런 상황이라면 아래와 같이 콜백함수를 사용하는 것이 좋다.

<script>
first(function() {console.log(2);});
first(function() {console.log(4);});
</script>

 

 

그런데, 콜백함수를 이용하여 DB에서 데이터를 뽑고 싶을 때, A를 뽑고 B를 뽑고 C를 뽑으려고 하면 아래와 같이 코드가 복잡해진다.

<script>
db.collection('post').findOne(A, function() {
	db.collection('post').findOne(A, function() {
		db.collection('post').findOne(A, function() {

		})
	})
})
</script>

 

5. 대안

👉  코드가 복잡해져서 싫다면 콜백함수로 함수를 디자인하지 않고 Promise를 사용할 수도 있다.

<script>
function first(파라미터) {
	console.log(1);
};

function second() {
	console.log(2);
};

first().then();
</script>

이런 방법으로 코드를 순차적으로 실행할 수도 있다. 이것도 내키지 않는다면 async await를 사용할 수도 있다.