https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

함수형 프로그래밍은 함수의 평가로 계산을 생성하고 상태 및 변경 가능한 데이터를 변경하지 않도록 하는 프로그래밍 패러다임입니다.

기능적인 방식으로 프로그램을 작성하기 위해 순수 함수와 불변 데이터 구조를 사용합니다.

JavaScript에서는 내장된 배열 메서드를 사용하여 배열에 기능 원칙을 쉽게 적용할 수 있습니다.

이 기사에서는 배열 메서드를 기능적으로 조작할 수 있는 방법을 살펴보겠습니다.

항목 필터링

filter 메서드를 사용하여 filter 메서드의 콜백이 반환하는 조건을 가진 원래 배열의 항목이 있는 배열을 반환할 수 있습니다.

예를 들어 다음 배열이 있는 경우:

const store = [{  
    name: "Apple",  
    price: 1  
  },  
  {  
    name: "Banana",  
    price: 2  
  },  
  {  
    name: "Grape",  
    price: 1.2  
  }  
];

다음과 같이 price가 2보다 작은 항목을 얻을 수 있습니다.

const cheapItems = store.filter(s => s.price < 2);

그런 다음 cheapItems에 대해 다음을 얻습니다.

[  
  {  
    "name": "Apple",  
    "price": 1  
  },  
  {  
    "name": "Grape",  
    "price": 1.2  
  }  
]

filter 메서드를 사용하면 함수가 순수하기 때문에 함수 패러다임에 맞습니다. 동일한 배열과 동일한 조건이 주어지면 항상 동일한 결과가 반환됩니다.

또한 호출된 배열의 기존 요소를 변경하지 않습니다. 즉, 실수로 원래 배열에서 아무 것도 변경할 수 없습니다.

배열 객체 매핑

map는 배열의 항목을 다른 항목으로 매핑하는 데 사용됩니다. 데이터를 변환하고 변환하는 데 자주 사용됩니다. map를 사용하면 주어진 입력에 대해 동일한 출력을 제공하고 원래 배열을 변경하지 않는 순수 함수이기 때문에 함수형 프로그래밍 패러다임에 맞습니다.

값을 결합하기 위해 map 함수에 전달하는 함수가 순수하다면 map 메서드도 순수해야 합니다. 이 콜백 함수를 호출하고 업데이트된 값을 새 배열로 반환하기 때문입니다.

예를 들어 다음 배열이 제공됩니다.

const volumesInLiters = [{  
    name: "Milk",  
    volumeInLiters: 1  
  },  
  {  
    name: "Apple Juice",  
    volumeInLiters: 2  
  },  
  {  
    name: "Orange Joice",  
    volumeInLiters: 1.2  
  }  
];

객체의 각 항목에 volumeInQuarts 필드를 추가하고 다음과 같이 작성하여 쿼트 단위의 볼륨을 각 값으로 설정할 수 있습니다.

const volumesInQuarts = volumesInLiters.map(v => {  
  v = {  
    ...v,  
    volumeInQuarts: v.volumeInLiters * 1.057  
  };  
  return v;  
})

각 항목에 대해 v.volumeInLiters * 1.057를 변환하고 volumeInQuarts로 설정합니다.

그런 다음 우리는 다음을 얻습니다.

[  
  {  
    "name": "Milk",  
    "volumeInLiters": 1,  
    "volumeInQuarts": 1.057  
  },  
  {  
    "name": "Apple Juice",  
    "volumeInLiters": 2,  
    "volumeInQuarts": 2.114  
  },  
  {  
    "name": "Orange Joice",  
    "volumeInLiters": 1.2,  
    "volumeInQuarts": 1.2684  
  }  
]

Reduce를 사용하여 배열 항목의 값 결합하기

filter 및 map , reduce 도 배열의 항목을 수집하고 지정한 방식으로 하나의 값을 반환하는 데 사용하기 때문에 기능적 패러다임에 맞습니다.

값을 결합하기 위해 reduce 함수에 전달하는 함수가 순수하다면 reduce 메서드는 순수해야 합니다. 함수는 결합된 값을 계산하기 위해 우리가 전달한 콜백 함수reduce를 호출합니다.

예를 들어 다음 배열이 제공됩니다.

const store = [{  
    name: "Apple",  
    price: 1  
  },  
  {  
    name: "Banana",  
    price: 2  
  },  
  {  
    name: "Grape",  
    price: 1.2  
  }  
];

모든 항목의 총 가격을 얻기 위해 다음을 작성할 수 있습니다.

const totalPrice = store.map(s => s.price).reduce((subtotal, b) => subtotal + b, 0);

map 배열의 모든 항목을 가격 번호에 매핑하려면 store를 사용해야 합니다. 그런 다음 reduce 메서드를 사용하여 subtotal 에 새 값을 추가할 수 있습니다.

그런 다음 4.2 에 대해 totalPrice 를 얻어야 합니다. 이는 store 에 있는 3개 항목의 모든 가격의 합계입니다.
reduce의 두 번째 인수는 감소의 시작 값이거나 값을 하나로 결합합니다.

결론

filter , map 및 reduce 배열 방법은 배열을 기능적으로 조작하는 주요 방법입니다. 그것들은 모두 값을 반환하고 그것이 호출된 배열을 변경하지 않습니다. 이로 인해 의도하지 않게 값을 변경하기가 어렵습니다.
filter는 전달한 콜백에서 반환하는 조건을 충족하는 배열을 반환합니다.
map는 원래 배열의 값이 우리가 지정한 방식으로 새 값에 매핑된 새 배열을 반환합니다.
reduce는 결합을 수행하기 위해 전달한 콜백 함수를 사용하여 배열 항목의 값을 하나로 결합하고 결합된 값을 반환합니다.

함수는 우리가 조작을 수행하기 위해 전달한 함수를 호출하기만 하므로 순수 함수를 콜백으로 전달하면 함수가 순수합니다.