JavaScript를 사용한 함수형 프로그래밍의 개념 이해

helderburato에 원래 게시됨


JavaScript 언어를 사용하여 함수형 프로그래밍의 기본 개념을 이해해 봅시다.

약어 FP는 이 문서에서 functional programming를 참조하는 데 사용됩니다.

개체 예



이 문서에서는 다음과 같은 실제 예제에서 다음 개체를 사용합니다.

const animals = [
  {
    "name": "Max",
    "species" : "dog",
    "likes": ["bones", "carrots"],
  },
  {
    "name": "Teodore",
    "species" : "cat",
    "likes": ["mice", "carrots"],
  }
];


함수형 프로그래밍이란 무엇입니까?



FP는 1930년대에 개발된 공식 시스템인 Lambda Calculus의 기초입니다. Lambda Calculus는 Lambda calculus definition - Wikipedia에서 자세히 읽을 수 있는 수학적 추상화입니다.

FP 프로그래밍 패러다임은 더 많은 함수를 작성하고 함수 구성을 만드는 데 중점을 둡니다.

구성





함수 구성은 여러 함수를 결합하여 하나의 결과를 만드는 방법입니다.

수학에서는 f(g(x))에서 결과를 수신할 때 g(x)와 같이 씁니다. f라는 상위 범위로 전달됩니다.

다음 예를 참조하십시오.

const isDog = animals => animals.filter(animal => animal.species === 'dog');
const isCat = animals => animals.filter(animal => animal.species === 'cat');
const likeCarrots = animals => animals.filter(animal => animal.likes.find(like => like.includes('carrots')));

console.log(likeCarrots(isDog(animals)));
// => [{ name: "Max", species: "dog", likes: ["bones", "carrots" ]}]

console.log(likeCarrots(isCat(animals)));
// => [{ name: "Teodore", species: "cat", likes: ["mice", "carrots" ]}]


컴포지션 프로세스 자동화



이전 예제에 대한 자동화를 만들어 보겠습니다.

const compose = (...fns) => x => fns.reduceRight((v, fn) => fn(v), x);

console.log(compose(isDog, likeCarrots)(animals));
// => [{ name: "Max", species: "dog", likes: ["bones", "carrots" ]}]

console.log(compose(isCat, likeCarrots)(animals));
// => [{ name: "Teodore", species: "cat", likes: ["mice", "carrots" ]}]

compose라는 메서드는 reduceRight를 사용하여 오른쪽에서 왼쪽으로 모든 기능을 실행합니다.

참고: 훨씬 더 읽기 쉽고 깔끔한 코드로 동일한 결과를 얻었습니다.

일반적으로 순차적으로 실행하고자 할 때 다음 예제와 같이 pipe 메소드를 사용합니다.

const pipe = (...fns) => x => fns.reduce((v, fn) => fn(v), x);

console.log(pipe(isDog, likeCarrots)(animals));
// => [{ name: "Max", species: "dog", likes: ["bones", "carrots" ]}]

console.log(pipe(isCat, likeCarrots)(animals));
// => [{ name: "Teodore", species: "cat", likes: ["mice", "carrots" ]}]


참고: 방금 결과를 필터링했기 때문에 구성된 메서드에서 동일한 결과를 얻었지만 다른 값을 인쇄하려는 경우에는 with가 좋은 접근 방식입니다.

파이프와 구성의 개념을 더 잘 이해할 수 있는 기사A quick introduction to pipe() and compose() in JavaScript를 추천합니다.

불변성



불변성에서는 새 속성을 추가하거나 변경할 때 자체적으로 변경되지 않는 요소를 고려합니다.

새 동물을 추가하고 animals에서 새 인스턴스를 생성할 때의 예를 참조하십시오.

const tildorCat = { name: "Tildor", species: "cat", likes: ["mice", "carrots" ]}
const mutatedAnimals = [...animals, tildorCat];

console.log(animals.length); // => 2
console.log(mutatedAnimals.length); // => 3


새 동물 인스턴스로 새 인스턴스를 생성하기 위해 베이스animals를 사용했습니다.

불변성에 대해 이야기할 때 초기 값은 변경되지 않고 대신 수정된 인스턴스를 생성한다는 점을 명심하십시오.

순수 함수





순수 함수를 사용하여 방지side-effects하므로 입력을 전달할 때 항상 동일한 출력을 반환합니다.

에 대해 자세히 읽을 수 있습니다.

마무리



그게 다야! FP의 일부 사용 사례에 대한 몇 가지 기본 개념과 개인적인 의견을 보여드리려고 노력했습니다. 도움이 되었으면 합니다.

질문이 있으시면 언제든지 아래에 댓글을 남겨주세요. 기꺼이 도와드리겠습니다.

프로그래밍을 즐기세요!

참조



  • ES6 JavaScript compose function ;

  • Functional Programming Principles Every Imperative Programmer Should Use ;

  • An Introduction to the basic principles of Functional Programming ;
  • 좋은 웹페이지 즐겨찾기