프론트엔드 짧은 간단 지식 정리 - 고차함수와 일급객체

1. 고차함수란? 🎯

JavaScript에서 함수는 일급 객체입니다. 이는 함수를 값처럼 다룰 수 있다는 의미로, 인자로 전달하거나 반환값으로 사용할 수 있습니다.

🔍 고차함수의 정의

고차함수(Higher-Order Function)는 다음 중 하나 이상을 수행하는 함수입니다:

• 함수를 인자로 받는 함수
• 함수를 반환하는 함수

💡 예시 1: 함수를 인자로 받는 고차함수

// 고차 함수: 함수를 인자로 받는 함수
function repeatOperation(operation, times) {
    for (let i = 0; i < times; i++) {
        operation();
    }
}

function sayHi() {
    console.log("Hi there! 👋");
}

// sayHi 함수를 인자로 전달
repeatOperation(sayHi, 3);

/* 출력 결과:
Hi there! 👋
Hi there! 👋
Hi there! 👋
*/

💡 예시 2: 함수를 반환하는 고차함수 (클로저 활용)

// 고차 함수: 함수를 반환하는 함수 (클로저)
function createGreeting(greeting) {
    return function(name) {
        return `${greeting}, ${name}! 😊`;
    };
}

const sayHello = createGreeting("Hello");
const sayGoodbye = createGreeting("Goodbye");

console.log(sayHello("Alice"));    // "Hello, Alice! 😊"
console.log(sayGoodbye("Bob"));    // "Goodbye, Bob! 😊"

🌟 널리 사용되는 고차함수들

JavaScript에서 이미 많이 사용하고 있는 고차함수들:

• Array.map() - 배열의 각 요소를 변환
• Array.filter() - 조건에 맞는 요소만 필터링
• Array.sort() - 정렬 함수를 받아 배열 정렬
• setTimeout() - 콜백함수를 일정 시간 후 실행

💡 클로저(Closure)란?
특정 함수 내에서 반환된 내부 함수가, 스택에서 제거된 당시의 환경을 기억하여 접근할 수 있도록 하는 반환된 내부함수와 내부함수가 선언되었던 렉시컬 환경의 조합입니다.

---

2. 일급객체란? 🎪

일급객체(First-Class Object)는 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말합니다.

✅ 일급객체의 조건

일급객체가 되기 위한 3가지 조건:

조건	설명	예시
할당	변수에 할당할 수 있어야 함	const func = function() {}
인자 전달	다른 함수에 인자로 전달 가능	callback(func)
반환값	함수의 결과로 return 가능	return function() {}

💡 실제 코드로 확인해보기

// 1️⃣ 함수를 변수에 할당
const greet = function(name) {
    return `Hello, ${name}! 🎉`;
};
console.log(greet("John")); // "Hello, John! 🎉"

// 2️⃣ 함수를 다른 함수의 인자로 전달 (콜백)
function sayHello(callback, name) {
    console.log(callback(name));
}
sayHello(greet, "Alice"); // "Hello, Alice! 🎉"

// 3️⃣ 함수를 다른 함수에서 반환
function createMultiplier(multiplier) {
    return function(num) {
        return num * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(4)); // 12

🔗 고차함수와 콜백의 관계

콜백(Callback)이란?
전달 인자(argument)로 전달받은 함수를 의미합니다.

📝 용어 정리

용어	정의	예시
매개변수(Parameter)	함수 정의 시 사용되는 변수	function add(a, b) → a, b
전달 인자(Argument)	함수 호출 시 실제로 넘겨주는 값	add(5, 3) → 5, 3

---

3. 실전 활용 예시 ⚡

🎯 배열 메서드 활용

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

// map: 각 요소를 2배로 변환
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 짝수만 필터링
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// reduce: 합계 구하기
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

🛠️ 커스텀 고차함수 만들기

// 함수 실행 시간을 측정하는 고차함수
function measureTime(func) {
    return function(...args) {
        const start = performance.now();
        const result = func(...args);
        const end = performance.now();
        
        console.log(`실행 시간: ${end - start}ms`);
        return result;
    };
}

// 사용 예시
const slowFunction = measureTime(function(n) {
    let result = 0;
    for (let i = 0; i < n; i++) {
        result += i;
    }
    return result;
});

slowFunction(1000000); // 실행 시간과 함께 결과 출력

---

4. 마무리 🎉

🌟 핵심 정리

• 일급객체: JavaScript 함수는 값처럼 다룰 수 있는 일급객체
• 고차함수: 함수를 인자로 받거나 반환하는 함수
• 콜백: 인자로 전달되는 함수
• 클로저: 내부함수가 외부함수의 환경을 기억하는 메커니즘

🚀 실무에서의 활용

고차함수와 일급객체의 특성을 이해하면:

• 함수형 프로그래밍 패러다임 활용 가능
• 코드 재사용성 향상
• 추상화 레벨 증가로 더 깔끔한 코드 작성
• 비동기 프로그래밍에서의 콜백, Promise, async/await 이해 용이