[JavaScript] 콜백(Callback)함수란

 

콜백함수는 편하게 사용하고 있는데 어렴풋이 알고 사용하고 있어서 알아보았다.

 

콜백(Callback)함수란?

다른 함수에게 넘겨주는 함수이다.

"얌~ 이 함수 나중에 필요할 때 알아서 실행해줘~"라고 하면서 함수를 다른 함수에게 넘겨주는 것이다.

 

콜백 함수를 파라미터로 전달하고, 그 함수를 내부에서 실행하는 방식으로 사용한다.

 

 

 

예시 - 이벤트 리스너

button.addEventListener("click", () => { 
    console.log("버튼 클릭");
});

 

대표적으로 이벤트 리스너가 있다.

'이거 클릭하면 실행해줘~!' 하고 addEventListener에게 함수를 넘기는 것이다. 

(클릭이 되면, 브라우저가 알아서 실행을 해준다) 

 

위 코드에서 () => {...} 가 콜백함수이다.

 

 

 

예시 - setTimeout

setTimeout(() => {
    console.log("3초 후 실행!");
}, 3000);

 

다음으로 setTimeout() 함수가 있다

setTimeout()는 일정 시간이 지난 후에 실행되는 함수이다.

콜백함수를 넘겨주면, 설정된 시간이 지난 후에 그 함수가 실행된다.

 

콜백 함수 : () => { console.log("3초 후 실행!");} 

 

 

 

예시 - every

const numbers = [2, 4, 6, 8];

const result = numbers.every(num => num % 2 === 0); // result : true

 

every()는 배열의 모든 요소가 주어진 조건을 만족하는지 검사하는 함수이다.

배열의 모든 숫자가 짝수인지 확인한다. 

만약 모두 짝수라면 true를, 하나라도 홀수가 있다면 false를 반환한다.

 

콜백 함수 : (num => num % 2 === 0)

 

 

 

예시 - filter

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

 

filter()는 배열에서 주어진 조건을 만족하는 요소만 뽑아내는 메서드이다.

2로 나눈 나머지가 0인 것들만 반환을 한다.

위의 예제는 2와 4만 남게 된다. 

 

콜백 함수 : (num => num % 2 === 0)