Callback 함수란?

💡콜백함수란?

1. 매개변수로 함수를 전달받아, 함수 내부에서 실행하는 함수.

   콜백함수는 이름이 없는 ‘익명의 함수'를 사용한다. 함수의 내부에서 실행되기 때문에 이름은 붙이지 않아도 된다.

let arr = [1, 2, 3, 4, 5]

arr. filter((x) => x < 3) // [1, 2]

2. 특정한 시점 또는 이벤트가 실행되는 시점에 호출되는 함수

console.log(1)  // 동기
setTimeout(() => console.log(2), 1000);   // 비동기
console.log(3) // 동기
// 1 3 2(1초뒤) 

//Synchronous(동기적) callback
printImmediately(()=> console.log('hello'));

//Asynchronous(비동기적) callback
function printWithDelay(print, timeout) {
	setTimeout(print, timeout);
}
printWithDealy(() => console.log('async callback'), 2000)

// 1 3 hello 2 aync callback

자바스크립트는 기본적으로 동기적언어이기 때문에 코드를 입력한 순서대로 실행된다. 이때, 코드의 비동기적 실행을 위해 콜백함수를 사용할 수 있다. 가장 대표적인 것이 setTimeout이라는 함수인데 여기서 시간 단위는 1000 = 1초이다.
console.log로 1 2 3 을 화면에 출력하고 싶지만, 2라는 숫자만 1초 뒤에 화면에 출력되게 하고 싶다면 어떻게 하면 좋을까?
이 때 callback함수를 이용한다. 예제를 보면 1 3이 먼저 출력되고 1초 뒤에 2가 출력되는 것을 볼 수 있다.

이처럼 callback함수는 아주 다양하게 쓰이는데 나는 그냥 arrow function 쓸 때 매개변수로 쓰이는 함수... 정도로만 알고 있다가 filter를 공부하며 정확한 개념과 용도가 궁금해져서 해당 포스팅을 작성하게 되었다.^^