JavaScript의 함수형 프로그래밍? 예, 부탁합니다.

이 게시물은 원래 published on my blog

웹 개발 세계에서 현재 뜨거운 주제 중 하나는 웹 언어인 JavaScript로 된 함수형 프로그래밍입니다.

함수형 프로그래밍은 이 게시물을 넘어서는 수학적 속성과 현상의 전체 호스트를 포함하지만, 여기서 다루려고 하는 것은 명목 함수형 프로그래밍으로 몇 가지 함수를 작성하는 방법입니다.

이것은 시리즈가 될 것입니다. 저는 현재 이러한 주제를 연구하고 있으며 제가 발견한 것이 저를 흥분시킵니다. 저는 이러한 주제에 대해 각 배열 방법을 조금씩 파고들 것입니다. 이에 대한 자세한 내용은 Steve Smith의 블로그Funky JavaScript 에서 찾을 수 있습니다.

중요 개념: 고차 함수

JavaScript의 가장 좋은 점과 가장 나쁜 점 중 하나는 함수를 다른 함수로 전달할 수 있다는 것입니다. 이것은 아름답게 표현되는 코드와 때로는 버그로 이어질 수 있습니다.

우리는 왜 이것을 할 수 있습니까? 대부분의 함수형 프로그래밍 언어1와 마찬가지로 함수는 JavaScript의 다른 값과 마찬가지로 값이기 때문입니다.

다음 코드를 사용하세요.

// Named function or
// function declaration
function double(x) {
  return x * 2;
}

// Anonymous function or
// Function expression
let double = function(x) {
  return x * 2;
}

let cat = double;
// Function call
cat(60);

여기에 double 라는 이름의 함수가 있습니다. 인수x를 사용하고 호출할 때 함수 호출에서 지정한 x 값이 무엇이든 반환하고 반환합니다.

JavaScript와 다른 점은 변수에 전달하고 해당 변수에서 함수를 호출할 수 있다는 것입니다. 기능은 값이기 때문입니다.

고차 함수는 더 작은 함수를 더 큰 함수로 만드는 합성에 좋습니다. 잠시 후 이에 대해 자세히 알아보십시오.

.filter() 입력

.filter() 함수는 배열의 필터링된 새 버전을 생성하는 데 사용하는 콜백을 취하는 배열 함수입니다.

다음 객체 배열을 가져옵니다.

const animals = [
  { name: ‘Catticus Finch’, species: ‘cat’ },
  { name: ‘Peaches’,         species: ‘fish’ },
  { name: ‘Bobby’,          species: ‘dog’ },
  { name: ‘Lucifer’,        species: ‘cat’ },
  { name: ‘Beatrix’,        species: ‘rabbit’ },
  { name: ‘Cerulean’,        species: ‘fish’ }
];

이 배열의 모든 고양이를 걸러내고 싶다고 가정해 봅시다. 신뢰할 수 있는 for 루프를 사용할 수 있습니다.

const cats = [];

for (let i = 0; i < animals.length; i++) {
  if (animals[i].species === ‘cat’) {
     cats.push(animals[i]);
  }
}

우리는 본질적으로 배열을 반복하고 있으며 모든 고양이for 루프가 발견할 때마다 빈 배열cat로 푸시합니다.

이제 필터링할 수 있습니다.

Filter는 콜백을 수락하고 배열의 각 항목을 반복하여 콜백 함수에 다시 전달합니다. .filter() 부울을 예상한 다음 필터링된 배열을 반환합니다.

const cats = animals.filter(function(animal) {
  return animal.species === ‘cats’;
});

여기서 species 배열의 animals 속성 값이 cat이면 필터링된 배열에서 해당 고양이의 이름을 반환합니다.

다음과 같이 익명 함수를 작성하고 그 안에 필터 함수를 추가할 수도 있습니다.

const isCat = function(animal){
  return animal.species === ‘cats’;
});

const cats = animals.filter(isCat);

이 얼마나 멋진가?

작은 함수를 작성하면 재사용할 수 있는 구성이 가능합니다. for 루프에서 우리는 고양이를 배열로 밀어넣고 있지만 필터는 이것을 기본적으로 처리합니다.

필터와 콜백은 서로 맞물리면서 구성됩니다. 구문적으로 만족스러울 뿐만 아니라 항상 좋은 점은 코드 줄이 적습니다.

다음

다음으로 .map() 기능을 처리하고 Chrome DevTools 시리즈로 돌아가고 싶습니다.



JavaScript가 순수한 기능적 프로그래밍 언어는 아니지만. ↩