🤔 콜백함수(Callback Function)란?

---

파라미터(매개변수)로 전달하는 함수를 콜백함수 라고 한다. 파라미터로 함수를 받고, 어떤 이벤트가 실행하면 호출되는 함수이다. 익명 함수로도 전달이 가능하고, 주로 비동기 처리에 사용된다. 콜백 함수를 너무 많이 사용하면 콜백 지옥에 빠지니 주의할 것!!!

function call(callback) {
	for (let i = 0; i < 3; i++) {
    	callback(i);
    }
}

call(function (i) { // 익명 함수
	console.log(`${i}번째 함수 호출`)
})

// 실행 결과
// 0번째 함수 호출
// 1번째 함수 호출
// 2번째 함수 호출

call 함수를 선언하고, 함수를 호출할 때 익명 함수를 파라미터로 받게 된다. call 함수 내부에 파라미터로 받은 익명 함수를 반복문으로 계속 호출하면서 결과값을 출력한다.

💫 콜백함수 활용하기

---

콜백함수의 세 인수는 '요소 값, 요소 인덱스, 순회 중인 배열'을 의미한다. 일반적으로 value, index만 사용하는 경우가 많으며 필요없는 요소는 생략이 가능하다. 요소명은 자유롭게 지정하여 사용할 수 있다.

forEach()

배열의 메소드. 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.

const food = ['햄버거', '파스타', '햄버거', '샐러드', '샌드위치', '치킨'];

food.forEach(function (value, index, array) {
	console.log(`${index}번째 음식 : ${value}`);
})

// 실행 결과
// 0번째 음식 : 햄버거
// 1번째 음식 : 파스타
// 2번째 음식 : 햄버거
// 3번째 음식 : 샐러드
// 4번째 음식 : 샌드위치
// 5번째 음식 : 치킨


// 화살표 함수를 사용하여 요소 값 출력
food.forEach(element => console.log(element));

// 실행 결과
// 햄버거
// 파스타
// 햄버거
// 샐러드
// 샌드위치
// 치킨

map()

배열의 메소드. 콜백 함수에서 리턴한 값으로 새로운 배열을 만드는 함수이다.

let array = [1, 5, 9, 12, 26];

array = array.map(function (value, index, array) {
	return value * 2;
})

array.forEach(console.log)

// 실행 결과
// value index array
// 2 	 0 	   (5) [2, 10, 18, 24, 52]
// 10 	 1     (5) [2, 10, 18, 24, 52]
// 18 	 2 	   (5) [2, 10, 18, 24, 52]
// 24 	 3 	   (5) [2, 10, 18, 24, 52]
// 52 	 4 	   (5) [2, 10, 18, 24, 52]


// 화살표 함수를 사용하여 새로운 배열 생성
const map = array.map(value => value * 2);

console.log(map);

// 실행 결과
// [2, 10, 18, 24, 52]

filter()

배열의 메소드. 콜백 함수에서 리턴한 값이 true인 요소들만 모아서 새로운 배열을 만드는 함수이다.

const height = [149, 188, 163, 153, 137];

const pass = height.filter(value => value >= 150)

console.log(pass);

// 실행 결과
// [188, 163, 153]

🔥 콜백 함수와 비동기 처리에 대해 알아보자!

---

먼저 비동기(Asynchronous)란, 쉽게 말해서 어떤 일을 처리할 때 다른 일도 동시에 하는 것을 말한다. 배달 어플로 치킨을 시킨 후 치킨이 올 동안 유튜브를 보거나, 설거지를 하는 등의 행동이 바로 비동기다!
자바스크립트에는 비동기 처리할 수 있는 시간과 관련된 타이머 함수가 있다.

• setTimout(함수, 시간) : 특정 시간 후에 함수를 한 번 호출
• setInterval(함수, 시간) : 특정 시간마다 함수를 호출

setTimeout(() => {
	console.log('1초 후에 실행됩니다.');
}, 1000) // 밀리 초 단위

let count = 0;
setInterval(() => {
	console.log(`3초마다 실행됩니다.(${count}번째)`);
 	count++;
}, 3000)

// 실행 결과
// 3초마다 실행됩니다.(0번째)
// 3초마다 실행됩니다.(1번째)
// 3초마다 실행됩니다.(2번째)
// ...

타이머를 종료할 때 사용하는 함수도 있다.

• clearTimeout(타이머_ID) : setTimout() 타이머 제거
• clearInterval(타이머_ID) : setInterval() 타이머 제거

여기서 매개변수의 타이머_ID란 타이머 함수를 호출할 때 리턴값으로 나오는 숫자이다.

let id;
let count = 0;

id = setInterval(() => {
	console.log(`3초마다 실행됩니다.(${count}번째)`);
 	count++;
}, 3000)

setTimeout(() => {
	console.log('타이머를 종료합니다.');
 	clearInterval(id);
}, 5000)

참고 : 혼자 공부하는 자바스크립트