클로저와 고차 함수: JavaScript 개발자가 꼭 알아야 할 필수 개념

클로저(Closure)란 무엇인가?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 즉, 함수가 생성될 때의 스코프를 기억하고 있는 함수입니다. 클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수를 정의할 때 자주 사용됩니다.

function createGreeting(greeting) {
    return function(name) {
        console.log(greeting + ', ' + name);
    }
}

const sayHello = createGreeting('Hello');
sayHello('Alice'); // 출력: Hello, Alice
sayHello('Bob');   // 출력: Hello, Bob

const sayHi = createGreeting('Hi');
sayHi('Charlie');  // 출력: Hi, Charlie

위 예제에서 createGreeting 함수는 클로저를 생성합니다. sayHello와 sayHi는 각각 다른 greeting 값을 기억하고 있습니다. 클로저는 변수의 생명 주기를 확장시켜, 함수가 실행된 후에도 변수를 사용할 수 있게 합니다.

 

고차 함수(Higher-order functions)란 무엇인가?

고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수입니다.

JavaScript에서 함수는 일급 객체이기 때문에, 고차 함수를 통해 함수형 프로그래밍 패턴을 쉽게 구현할 수 있습니다.

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

function sayHello() {
    console.log('Hello!');
}

repeat(sayHello, 3);
// 출력:
// Hello!
// Hello!
// Hello!

// 함수를 반환하는 고차 함수
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    }
}

const double = createMultiplier(2);
console.log(double(5)); // 출력: 10

const triple = createMultiplier(3);
console.log(triple(5)); // 출력: 15

고차 함수는 코드의 재사용성을 높이고, 간결하고 읽기 쉬운 코드를 작성하는 데 유용합니다.

 

클로저와 고차 함수를 활용하는 방법

클로저와 고차 함수를 결합하면 강력한 패턴을 만들 수 있습니다. 예를 들어, 특정 조건을 만족하는 요소만 필터링하는 함수를 만들 수 있습니다.

function filter(array, test) {
    let result = [];
    for (let element of array) {
        if (test(element)) {
            result.push(element);
        }
    }
    return result;
}

const isEven = (num) => num % 2 === 0;
const numbers = [1, 2, 3, 4, 5, 6];
console.log(filter(numbers, isEven)); // 출력: [2, 4, 6]

const isOdd = (num) => num % 2 !== 0;
console.log(filter(numbers, isOdd)); // 출력: [1, 3, 5]

위 예제에서 filter 함수는 고차 함수로, test 함수를 인자로 받아 배열의 각 요소를 테스트합니다. 이를 통해 재사용 가능한 유연한 함수를 만들 수 있습니다.