[JavaScript] 자바스크립트 기초 복습 part6

JavaScript 콜백 함수 (고차 함수)

---

📌 콜백 함수 (Callback Function)

✅ 다른 함수의 인자로 전달되어, 그 함수 내부에서 실행되는 함수

✅ JavaScript에서 함수는 '자료형'이며, 변수에 할당하거나 함수의 매개변수로 전달 가능

---

function funcType() {}
console.log(typeof funcType); // function

---

🔹 콜백 함수의 필요성 (응용 사례)

비동기 처리: 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어
이벤트 리스너 처리: 사용자 행동에 반응하는 이벤트 내부에서 동작 가능
서버 요청 처리, 타이머 함수: 프로그램의 실행 흐름 제어

---

🔹 콜백 함수 예시

✅ 선언적 함수를 사용한 콜백 함수

console.log("=== 콜백(선언적 함수) ===");

function print(index) {  
console.log(${index}번째 함수 호출);  
}

function callback1(callbackFunc) {  
for (let i = 0; i < 3; i++) {  
callbackFunc(i);  
}  
}
callback1(print);

✅ 익명 함수를 사용한 콜백 함수

console.log("=== 콜백(익명 함수) ===");

const print2 = function (count) {  
console.log(${count}번째 함수 호출);  
};

callback1(print2);

✅ 화살표 함수를 사용한 콜백 함수

console.log("=== 콜백(화살표 함수) ===");

function callback2(number, callbackFunc, otherFunc) {  
if (number % 2 === 0) {  
callbackFunc(number);  
} else {  
otherFunc(number);  
}  
}

const even = (even) => console.log(${even} 값은 짝수입니다.);  
const oddNumber = (oddNum) => console.log(${oddNum} 값은 홀수입니다.);

callback2(3, even, oddNumber);  
callback2(4, even, oddNumber);  

---

🔹 배열의 콜백 함수 활용

배열 메서드: 배열의 내부 기능과 동작을 사용하기 위한 함수
공통 기능: 배열의 순회
인자값: value(요소 값), index(인덱스 번호), array(배열 자체) 사용

✅ forEach()

💡 각 요소에 대해 동일한 함수 실행 반환값 없음

console.log("=== forEach ===");

const numbers = \[23, 41, 22, 13, 2\];

numbers.forEach(function (value, index) {  
console.log(${index + 1}번째 요소: ${value});  
});

✅ map()

💡 각 요소에 대해 함수를 적용하여 새로운 배열 생성 및 반환
배열 요소의 개수가 변하지 않음

console.log("=== map ===");  
console.log(numbers);

const newNumbers = numbers.map(function (value) {  
let square = value \* value;  
return square;  
});  
console.log(newNumbers);

const newArrowNums = numbers.map((value) => value \* value);  
console.log(newArrowNums);

✅ filter()

💡 콜백 함수의 반환값이 true인 요소만 모아 새로운 배열 생성
기존 배열과 요소 수가 다를 수 있음

const basicArray = \[0, 1, 2, 3, 4, 5\];

const evenNumbers = basicArray.filter((value) => value % 2 === 0);  
const evenNumbers1 = basicArray.filter(function (value) {  
return value % 2 === 0;  
});

console.log(원래 배열 ${basicArray});  
console.log(짝수 배열 ${evenNumbers});

---

🔹 배열을 활용한 콜백 함수 예제

let cars = \["audi", "bmw", "volvo", "hyundai"\];

cars.forEach((car) => console.log(car));

let carsUppercase = cars.map(function (car) {  
return car.toUpperCase();  
});  
console.log(carsUppercase);

let longNameCars = cars.filter((car) => car.length > 4);  
console.log(longNameCars);  

---

🔹 메서드 체이닝

메서드를 연속적으로 호출하는 프로그래밍 패턴

let numbersArray = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\];

numbersArray  
.filter((num) => num % 2 === 0)  
.map((num) => num \* num)  
.forEach((num) => console.log(num));  

---

🔹 배열의 고차 함수 메서드

✅ reduce()
💡 각 요소에 대해 함수를 적용하여 단일 값 생성
인자값: 콜백 함수, 초기값(initialValue) 사용

let numbers = \[1, 2, 3, 4\];

let sum = numbers.reduce((acc, value) => acc + value, 0);

let sum2 = numbers.reduce(function (acc, value) {  
return acc + value;  
}, 100);

console.log(sum);  
console.log(sum2);

let cars = \["audi", "bmw", "hyundai", "kia"\];

let combinedCar = cars.reduce((acc, car) => {  
return acc + car + ",";  
}, "Cars:");

console.log(combinedCar);  
console.log(typeof combinedCar);

---

🔹 기타 배열 메서드

✅ sort(), reverse(): 정렬 메서드
✅ indexOf(), lastIndexOf(): 특정 요소의 인덱스를 찾는 메서드
✅ find(), findIndex(): 특정 조건을 만족하는 요소 또는 인덱스를 반환하는 메서드

let numbersArray = \[3, 1, 5, 2, 7, 6\];

console.log(numbersArray.sort());  
console.log(numbersArray.reverse());

let nums = \[5, 4, 6, 1, 7, 2\];

let firstOverFive = nums.find((num) => num > 5);  
let firstOverFiveIndex = nums.findIndex((num) => num > 5);  
console.log(firstOverFive);  
console.log(firstOverFiveIndex);

---

🔹 JavaScript 내장 함수 - 콜백 함수를 사용 (고차 함수)

✅ 타이머 함수

💡 setTimeout(콜백 함수, 시간): 지정된 시간 이후에 콜백 함수를 한 번만 실행
💡 setInterval(콜백 함수, 시간): 지정된 시간 간격마다 콜백 함수를 반복해서 실행

function greet(name = "전창현") {  
console.log(Hello, ${name});  
}  
greet();

setTimeout(greet, 2000);  
setTimeout(greet, 3000);

setTimeout(function () {  
console.log("4초 뒤에 실행됩니다.");  
}, 4000);

const timeId = setTimeout(greet, 2000, "전창현 :)");  
console.log("44번째 줄" + timeId);

clearTimeout(timeId);

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

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

---

📌 요약

주제	핵심 요약
콜백 함수	비동기 처리: 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어
배열 메서드	배열의 내부 기능과 동작을 사용하기 위한 함수
메서드 체이닝	메서드를 연속적으로 호출하는 프로그래밍 패턴
타이머 함수	setTimeout(콜백 함수, 시간), setInterval(콜백 함수, 시간)

🚀 콜백 함수는 필수!!