[자바스크립트] 콜백함수

본 내용은 아래 강의에 대한 복습내용입니다.

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

---

콜백 함수란?

자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미함

 function main(value){
     value();
 }
 
 function sub(){
 	console.log(" i am sub")
 }
 
 main(sub) // i am sub가 출력됨

예시에서 볼 수 있듯이 main이라는 함수에 sub라는 함수가 인수로 전달되었다.

이때 sub가 콜백함수 인것이다.

즉, 자신이 직접 실행되지 않고 다른 함수의 인자로 전달되어, 그 함수 내부에서 나중에 호출되는 함수. 그것이 콜백함수다.

 

 

그렇다면, 이런 콜백함수를 언제 활용하는 것일까?

아래와 같은 함수들이 있다고 해보자

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

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

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

repeat(5)
repeatDouble(5);
repeatTriple(5);

repeat함수는  idx 그대로 출력 

repeatDouble함수는 idx*2하면서 출력 

repeatTriple함수는 idx*3하면서 출력

 

 

그런데 콜백함수를 사용하면 repeat, repeatDouble, repeaTriple 다 정의할 필요없이 하나만 정의하면 된다.

repeat를 아래와 같이 정의하고 매개변수로 콜백함수를 받는 것이다(callback자리)

그리고 repeat함수를 호출할때 콜백함수를 바로 정의하는 것이다.

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

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

이때 idx*2로 정의하면 위에서 사용했던  repeatDouble과 같아지고

idx*3로 정의하면 위에서 사용했던 repeatTriple과 같아지니

콜백함수를 이용해 한번만 함수를 정의하여 다양하게 사용할 수 있게 된다.