커링: JavaScript의 모듈식 슈퍼파워 잠금 해제
- Susan Sarandon원래의
- 2024-12-09 12:02:24898검색
목차
- 소개
- 커링이 도대체 뭐야?
- 커링에 대한 단계별 가이드
- 커링에 관심을 가져야 하는 이유는 무엇입니까?
- 커링 자동화(인생이 너무 짧기 때문에)
- TypeScript와 Currying: 영원한 친구
- 함정에 대한 빠른 참고 사항
- 결론
소개
코드를 보고 '와, 이게 내 양말 서랍만큼 정리되어 있구나'라고 생각한 적이 있나요? 글쎄요, 당신은 혼자가 아닙니다. JavaScript는 그 모든 기이함과 매력에도 불구하고 지저분해질 수 있습니다. 커링을 시작하세요. 코드를 모듈화하고 재사용 가능하며 감히 우아하게 만드는 함수형 프로그래밍의 마법 같은 기술입니다. 이것이 마법처럼 들린다면, 버클을 채우세요. 이제 본격적으로 시작하겠습니다.
커링이 도대체 뭐야?
커링은 주방에서 할 수 있는 일처럼 들리지만 JavaScript에서는 여러 인수가 있는 함수를 각각 단일 인수를 사용하는 일련의 함수로 변환하는 기술입니다. 복잡한 레시피를 한 입 크기로 쪼개는 것이라고 생각해보세요.
다음은 간단한 예입니다.
function multiply(a: number, b: number) {
return a * b;
}
멋지죠? 그러나 이 함수는 두 가지 인수를 모두 요구합니다. 두 가지 모두에 전념할 준비가 되지 않은 경우(정말 누구입니까?) Currying을 사용하여 대신 다음과 같이 호출할 수 있습니다.
const curriedMultiply = (a: number) => (b: number) => a * b; // Create reusable specialized functions const double = curriedMultiply(2); const triple = curriedMultiply(3); console.log(double(4)); // Output: 8 console.log(triple(4)); // Output: 12
붐! 이제 샌드위치를 조립하는 것처럼 한 번에 하나의 인수를 전달할 수 있습니다. 이제 간단한 카레 함수를 살펴보았으니, 단계별로 빌드하는 방법을 배워보겠습니다.
커링 단계별 가이드
-
다중 인수 함수로 시작
여러 인수를 취하는 함수가 있다고 상상해 보세요.
function add(a: number, b: number, c: number) { return a + b + c; } -
겹겹이 포장
일련의 기능으로 변환:
const curriedAdd = (a: number) => (b: number) => (c: number) => a + b + c;
-
인수를 한 번에 하나씩 전달
각 레이어를 한 번에 하나씩 호출하세요.
const step1 = curriedAdd(2); // Fixes the first argument (a = 2) const step2 = step1(3); // Fixes the second argument (b = 3) const result = step2(4); // Fixes the third argument (c = 4) console.log(result); // Output: 9
유연성을 통한 이익
이제 코드를 더욱 모듈화하는 작고 재사용 가능한 단계가 있습니다.
커링에 관심을 가져야 하는 이유는 무엇인가요?
커링은 화려하게 들릴 수도 있지만 실제로는 장점이 있습니다.
- 모듈화: 큰 기능을 테스트 가능한 작은 조각으로 나눕니다.
- 재사용성: 기존 코드를 사용하여 특수 함수 버전을 만듭니다.
- 가독성: 잘 쓰여진 소설(또는 적어도 괜찮은 소설)처럼 코드가 설명이 필요 없게 됩니다.
가독성이 왜 중요한지 잠시 생각해 보겠습니다. 코드는 단지 기계를 위해 작성된 것이 아닙니다. 기계는 당신이 던지는 모든 것을 이해할 것입니다. 동료, 미래의 자신, 수정이 필요한 다음 사람 등 인간을 위해 작성되었습니다. 좋은 코드는 이해하고, 테스트하고, 수정하기 쉬운 것을 목표로 해야 합니다. Currying은 논리를 한 눈에 이해할 수 있는 더 작고 명확한 조각으로 나누어 이를 달성하는 데 도움이 됩니다.
개체 목록을 필터링한다고 가정해 보겠습니다.
function multiply(a: number, b: number) {
return a * b;
}
또는 세금 계산:
const curriedMultiply = (a: number) => (b: number) => a * b; // Create reusable specialized functions const double = curriedMultiply(2); const triple = curriedMultiply(3); console.log(double(4)); // Output: 8 console.log(triple(4)); // Output: 12
각 함수는 한 가지 작업을 수행하여 코드를 더 쉽게 읽고, 이해하고, 테스트할 수 있도록 해줍니다. 커링은 더 작고 전문화된 기능을 생성함으로써 복잡한 논리를 나중에 작업할 사람을 위해 단순하고 재사용 가능하며 유지 관리 가능하게 만듭니다.
카링 자동화하기(인생은 너무 짧으니까)
모든 중첩된 함수를 수동으로 입력하시나요? 아니요. 감사합니다. 커링을 자동화해 봅시다:
function add(a: number, b: number, c: number) {
return a + b + c;
}
작동 방식은 다음과 같습니다.
- 인수 개수가 원래 함수와 일치하면 함수를 호출합니다.
- 그렇지 않으면 더 많은 인수를 기다리는 새 함수를 반환합니다.
예:
const curriedAdd = (a: number) => (b: number) => (c: number) => a + b + c;
논쟁을 위한 자판기와 같습니다. 한 번에 하나씩 넣거나 한꺼번에 넣으세요.
TypeScript와 Currying: 영원한 친구
TypeScript의 유형 안전성을 통해 카레링을 한 단계 더 발전시키세요.
const step1 = curriedAdd(2); // Fixes the first argument (a = 2) const step2 = step1(3); // Fixes the second argument (b = 3) const result = step2(4); // Fixes the third argument (c = 4) console.log(result); // Output: 9
TypeScript의 예:
const filterByKey = (key: string) => (value: any) => (data: any[]) =>
data.filter((item) => item[key] === value);
// Create a reusable filter for colors
const filterByColor = filterByKey("color");
const redItems = filterByColor("red");
console.log(redItems([{ color: "red" }, { color: "blue" }]));
// Output: [{ color: "red" }]
IDE가 모든 단계를 안내해 드립니다.
위험에 대한 빠른 참고 사항
커리 함수는 원래의 이 컨텍스트를 잃습니다. 커링이 포함된 클래스의 메소드를 사용해야 한다면 .bind(this)나 화살표 함수를 사용하세요.
결론?
커링은 치트 코드로 코딩 게임을 업그레이드하는 것과 같습니다. 기능을 더 작고 관리 가능한 조각으로 나누면 유연성, 가독성 및 성취감을 얻을 수 있습니다(또는 디버깅 문제가 최소한으로 줄어듭니다). 자동화하든 직접 작성하든 커링은 코드를 깔끔하고 모듈화된 강력한 시스템으로 바꿔줍니다.
Haskell Curry(이름 뒤에 있는 사람)가 말했듯이:
"적게 쓰고, 더 많이 하세요… 한 번에 하나의 논쟁만!"
위 내용은 커링: JavaScript의 모듈식 슈퍼파워 잠금 해제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!