📖 [JS] 콜백 함수

< 콜백 함수 >

 

콜백 함수는 자바스크립트의 독특한 개념입니다.

정의상으로는 자신이 아닌 다른 함수에 인수로서 전달된 그런 함수를 뜻하는 말입니다.

 

function main(value) {

}

function sub() {
	console.log("sub");
}

main(sub);

 

위 코드를 확인해 보면 main과 sub라는 함수가 있습니다.

 

위에 선언된 main 함수는 value라는 매개변수를 받고 있고,

아래에 있는 sub 함수는 매개변수는 없고 콘솔에 sub라는 문자열을 출력하고 있습니다.

 

이때, main 함수를 호출하면서 인수로는 sub라는 값을 전달하였습니다.

 

이 sub라는 값이 지금 무슨 값일까요?

이 sub라는 값은 위에 선언해 둔 sub 함수입니다.

 sub라는 함수를 값으로써 main이라는 함수의 인수로 전달해 줬습니다.

 

그러면 main 함수의 value라는 매개변수에 sub()라는 함수가 들어오게 되는 거죠

따라서 value 매개변수에 저장된 함수를 이 main 함수 안에서 호출시켜 줄 수도 있습니다.

 

왜냐하면 이 value라는 매개변수 안에는 sub라는 함수가 저장이 되었기 때문입니다.

 

 

위 코드를 실행시켜 보면 sub라는 문자열이 결과로 콘솔에 출력되는 것을 확인할 수 있습니다.

 

이렇게 sub 함수처럼 main이라는 "다른 함수"의 "인수"로써 전달되는 함수를 "콜백 함수"라고 합니다.

function main(value) {

}

------------------------
function sub() {
	console.log("sub");
}

main(sub);
------------------------

main(function sub() {
	console.log("sub");
});

// 선언문 자체를 소괄호 안에 넣어서 함수 표현식처럼 사용할 수 있다.

main(function () {
	console.log("sub");
});

// 또한 함수 표현식에서는 익명 함수를 사용할 수 있으므로 sub를 생략할 수 있다.

main(() => {
	console.log("sub");
});

// 마지막으로 function 이라는 키워드를 지우고 화살표 함수를 사용하면 더욱 생략할 수 있다.

 

 

---

 

< 콜백 함수의 활용>

 

function repeat(count) {
	for (let idx =  1; idx <= count; idx++) {
    	console.log(idx);
    }
}


function repeatdoubble(count) {
	for (let idx =  1; idx <= count; idx++) {
    	console.log(idx * 2);
    }
}

repeat(5);
repeatdoubble(5);

 

 

위 코드처럼 프로그래밍을 하다 보면 구조가 거의 흡사한 함수들을 만들게 될 일이 있을 수 있다.

이렇게 구조가 흡사한 함수들이 필요할 때마다 새로 만들면 코드 자체가 효율성이 떨어지며,

굉장히 좋지 않은 방식으로 작업을 하게 됩니다.

 

 

function repeat(count, callback) {
	for (let idx =  1; idx <= count; idx++) {
    	callback(idx);
    }
}

repeat(5, function(idx) {
console.log(idx);
});

repeat(5, function(idx) {
console.log(idx * 2);
});

-------------------
//화살표 함수 사용

repeat(5, (idx) => {
console.log(idx);
});

 

 

이때, 콜백함수를 사용하면 중복코드를 발생시키지 않으면서 코드를 개선할 수 있습니다.