[JavaScript] 콜백함수

1. 콜백함수

함수를 매개변수로 받아 사용하는 콜백함수는 다른 메서드, 함수와 함께 활용해서 사용이 가능합니다.

1) forEach()

콜백함수를 사용하는 가장 기본적인 함수입니다.
배열이 갖고 있는 함수(메서드)로 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출합니다.

// 기본 형태
function (value, index, array) {}
// 매개변수가 다 필요하지 않음

// 사용 에제
const numbers = [273, 52, 103, 32, 57];

// 1번만 사용하는 함수의 경우 콜백함수로 적는 것이 간편함, 코드 가독성이 좋음
numbers.forEach(function (value, index, array) {
	// 매개변수로 value, index, array를 갖는 콜백함수를 사용
	console.log(`${index}번째 요소 : ${value}`);
});

// 함수를 선언한 후에 매개변수로 넘겨도 됨
const call = function (value, index, array) {
	// 매개변수로 value, index, array를 갖는 콜백함수를 사용
	console.log(`${index}번째 요소 : ${value}`);
};
numbers.forEach(call);

// forEach(value, index) 값만 매개변수로 받아 사용
numbers.forEach(function (v, i) { // 매개변수로 v, i 만 사용 (간단하게 매개변수명 사용해도 됨)
	console.log(`${i}번째 요소 : ${v}`);
});

// forEach(value) 값만 매개변수로 받아 사용
numbers.forEach(function (v) {
	console.log(`value : ${v}`);
});

2) Map()

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만들고 배열을 리턴합니다.

// 배열을 선언
let numbers = [273, 52, 103, 32, 57];

// 배열의 모든 값을 제곱
let numbers2 = numbers.map(function (value, index, array) {
	return value * value;
});
console.log(numbers2); // (5) [74529, 2704, 10609, 1024, 3249]

// 출력
numbers2.forEach(console.log); // value, index, array 순서대로 출력
/*
74529 0 (5) [74529, 2704, 10609, 1024, 3249]
2704 1 (5) [74529, 2704, 10609, 1024, 3249]
10609 2 (5) [74529, 2704, 10609, 1024, 3249]
1024 3 (5) [74529, 2704, 10609, 1024, 3249]
3249 4 (5) [74529, 2704, 10609, 1024, 3249]
*/

// for문을 사용해서 제곱 배열 생성
let numbers3 = [];
for (let i = 0; i <= numbers.length - 1; i++) {
	numbers3[i] = numbers[i] * numbers[i];
}
console.log(numbers3);

// for of문 사용
let numbers4 = [];
for (const item of numbers) {
	numbers4.push(item * item);
}
console.log(numbers4)

3) filter()

콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듭니다.
(콜백함수의 리턴 타입이 불 형일 때만 사용할 수 있습니다)

const numbers = [11, 12, 13, 14, 15, 16];

// 짝수만 추출
const evenNumbers = numbers.filter(function (value) {
	return value % 2 === 0; // true인 것만 출력
});

// 인덱스가 짝수만 추출
const evenIndexs = numbers.filter(function (value, index) {
	return index % 2 === 0;
});

console.log(`원래 배열 : ${numbers}`); // 원래 배열 : 11, 12, 13, 14, 15, 16
console.log(`값이 짝수만 추출 : ${evenNumbers}`); // 짝수만 추출 : 12, 14, 16
console.log(`인덱스가 짝수만 추출 : ${evenIndexs}`); // 인덱스가 짝수만 추출 : 11, 13, 15

// 1의 자리가 3의 배수인 경우만 추출 -> 13, 16
const evenThree = numbers.filter(function (value) {
	return value % 10 % 3 === 0;
});
console.log(evenThree);