자바스크립트 - 커링: 초보자 가이드

안녕하세요, 야심찬 프로그래머 여러분! 오늘 우리는 자바스크립트의 세계로 여행을 떠나 '커링'이라는 개념을 탐구해보겠습니다. 커링에 대해 들어본 적이 없으시다면 걱정 마세요 - 우리는 기본부터 차근차근 설명하겠습니다. 이 튜토리얼의 끝을 맺을 때, 여러분은 마치 프로처럼 함수를 커링할 수 있을 것입니다!

JavaScript - Currying

커링이란?

먼저, 커링이 정확히 무엇인지 이해해보겠습니다. 커링은 함수式 프로그래밍에서 여러 인자를 받는 함수를 단일 인자를 받는 함수들의 시QUENCE로 변환하는 기술입니다.

sandwich를 만드는 것을 생각해보세요. 모든 재료를 한 번에 넣는 대신, 커링은 하나씩 재료를 추가해 나가는 것과 같습니다. 이는 "함수 샌드위치"를 더 많은 제어와 유연성으로 만들어줍니다.

자바스크립트에서 커링을 어떻게 수행할 수 있을까?

이제 자바스크립트에서 커링을 구현하는 방법을 살펴보겠습니다. 두 가지 주요 방법을 탐구해보겠습니다: 클로저를 사용하는 방법과 bind() 메서드를 사용하는 방법.

클로저를 사용한 커링

클로저는 자바스크립트에서 마법의 상자처럼 작동하여 생성된 환경을 기억합니다. 이 초능력을 사용하여 커링된 함수를 만들 수 있습니다. 간단한 예제로 시작해보겠습니다:

function curry(f) {
return function(a) {
return function(b) {
return f(a, b);
};
};
}

function sum(a, b) {
return a + b;
}

let curriedSum = curry(sum);

console.log(curriedSum(2)(3)); // 출력: 5

이 예제에서:

curry는 다른 함수 f를 인자로 받는 고차 함수입니다.
curry는 첫 번째 인자 a를 받는 새로운 함수를 반환하며, 이 함수는 두 번째 인자 b를 받는 또 다른 함수를 반환합니다.
마지막으로 원래 함수 f를 두 개의 인자로 호출합니다.

차근차근 설명하자면:

우리는 curry 함수를 정의하여 일반 함수를 커링된 함수로 변환합니다.
우리는 두 개의 숫자를 더하는 간단한 sum 함수를 가집니다.
curriedSum을 만들기 위해 sum을 curry 함수에 전달합니다.
curriedSum(2)(3)을 호출할 때, 실제로 다음과 같이 동작합니다:

curriedSum(2)는 첫 번째 인자 2를 기억하는 함수를 반환합니다.
이 반환된 함수를 (3)으로 호출하여 연산을 완료합니다.

쿨하지 않나요? 마치 함수 호출을 조각조각 만드는 것 같아요!

bind() 메서드를 사용한 커링

자바스크립트는 커링에 사용할 수 있는 내장된 메서드인 bind()을 제공합니다. bind() 메서드는 새로운 함수를 만들어, 호출될 때 this 키워드를 지정된 값으로 설정하고, 주어진 인자序列가 새로운 함수에 전달되도록 합니다.

bind()을 사용하여 커링하는 방법을 보겠습니다:

function multiply(x, y) {
return x * y;
}

let multiplyByTwo = multiply.bind(this, 2);
console.log(multiplyByTwo(4)); // 출력: 8

let multiplyByThree = multiply.bind(this, 3);
console.log(multiplyByThree(4)); // 출력: 12

이 예제에서:

우리는 두 개의 인자를 받는 간단한 multiply 함수를 가집니다.
bind()을 사용하여 첫 번째 인자로 2를 설정한 새로운 함수 multiplyByTwo를 만듭니다.
multiplyByTwo(4)를 호출할 때, 실제로 multiply(2, 4)를 호출합니다.
마찬가지로 multiplyByThree를 만들어 첫 번째 인자로 3를 설정합니다.

bind() 메서드는 특정 인자를 "고정"하여 새로운 함수를 만들어줍니다.

커링의 사용 사례

이제 함수를 커링하는 방법을 이해했으니, 왜 이를 하고 싶을지 탐구해보겠습니다. 커링은 자바스크립트에서 여러 가지 실용적인 응용이 있습니다:

함수 합성: 커링은 함수 합성을 더 쉽게 만듭니다. 하나의 함수의 출력이 다른 함수의 입력이 되는 경우입니다.
부분적 적용: 더 일반적인 함수에서 특화된 함수를 만들 수 있습니다. 예를 들어, multiplyByTwo와 같은 함수입니다.
반복을 피하기: 반복적으로 동일한 인자로 함수를 호출할 때, 커링을 사용하여 반복을 줄일 수 있습니다.
이벤트 처리: 프론트엔드 개발에서 커링은 이벤트 처리에 추가 매개변수를 전달하는 데 유용할 수 있습니다.

커링을 이벤트 처리에 사용하는 실제 예제를 보겠습니다:

function handleClick(message, event) {
console.log(message, event.target);
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick.bind(null, 'Button clicked:'));

이 예제에서, 우리는 커링을 사용하여 이벤트 핸들러에 추가 매개변수를 전달하고 있습니다. 버튼을 클릭할 때, "Button clicked:"과 이벤트 대상을 출력합니다.

자바스크립트에서 커링하는 방법

이제 우리가 논의한 커링 방법을 요약하는 표를 제공하겠습니다:

방법	설명	예제
클로저	중첩된 함수를 사용하여 커링된 함수를 만들기	`function curry(f) { return function(a) { return function(b) { return f(a, b); }; }; }`
bind()	`bind()` 메서드를 사용하여 인자를 미리 설정	`let multiplyByTwo = multiply.bind(this, 2);`

결론

축하합니다! 자바스크립트의 커링 세계로 첫 걸음을 뗐습니다. 새로운 프로그래밍 개념을 배울 때는 연습이 중요합니다. 자신만의 커링된 함수를 만들어 다양한 사용 사례를 실험해보세요.

커링은처음에는 약간 어려울 수 있지만, 자주 사용하면 코드를 더 유연하고 재사용 가능하게 만드는 데 도움이 됩니다. 새로운 도구를 사용하는 것처럼,처음에는 어색할 수 있지만, 곧 이 없이는 어떻게 프로그래밍을 했는지 이해할 수 있을 것입니다!

계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 코드를 작성하세요! 자바스크립트는 무한한 가능성을 제공하는 놀이터이며, 커링은 그 중 하나의 흥미로운 기능입니다.

Credits: Image by storyset