[Javascript] 콜백함수란?

 

콜백함수란?
함수안에 파라미터로 들어가는 함수를 뜻하는데, 순차적으로 자바스크립트 코드를 실행하고 싶을때 사용한다.

우리가 처음에 자바스크립트를 접할때 콜백함수를 접할 수 있는데 대표적인 예시는 다음과 같다.

document.querySelector('.button').addEventListener('click', function(){
	// callback function
})

setTimeout(function(){
	// callback function
}, 1000)

 대부분 이런류의 코드를 많이 접했을 것이다.
 순차적으로 코드를 실행하고 싶을 때 사용한다.

이 밖의 경우에도 콜백함수를 유용하게 적용할 수 있는 부분이 있는데, 일을 하다보면 협업을 하게되는데,
협업 할 때 유용하게 사용 할 수 있다.

function together() {
	// 유용하게 공통 함수
	console.log(1)
}

// 1번 팀원: 콘솔에 1을 찍고 난 후 나는 3을 찍어야해
// 2번 팀원: 콘솔에 1을 찍고 난 후 나는 5를 찍어야해
// 아래와 같이 콜백함수로 만들어준다.

function together(파라미터) {
	// 유용하게 공통 함수
	console.log(1)
    파라미터()
}

function firstDeveloper() {
	console.log(3)
}

function secondDeveloper() {
	console.log(5)
}

together(firstDeveloper)

// 아래와 같이 실행 할 때는 비동기적인 처리가 되있는 등 사유에 따라 원하는 결과 값을 얻지 못할 수 있다.
together()
firstDeveloper()

 

 

콜백함수 외에 순차적으로 코드를 실행하고 싶다면, Promise 를 리턴 한 후 Promise.then() 이런식으로 구현 할 수 도 있다.