js - filter(배열 고차함수1) / 중복요소제거/ set

map,filter,reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 내포함.for문을 쓰지 않아도 배열요소 하나하나 접근하며 반복문처럼 사용 가능.

1. filter

콜백함수의 반환값이 true인 요소들만 찾아 새로운 배열을 반환한다.
조건에 맞는 값을 찾거나, 조건에 맞는 값으로만 이루어진 배열을 찾을 때 유용하다.

1) 홀수, 짝수로 이루어진 새로운 배열 반환하기

const numbers = [1,2,3,4,5,6,7,8];
const odds = numbers.filter(item => item % 2);
console.log(odds); //[1,3,5,7]
console.log(numbers); //[1,2,3,4,5,6,7,8] 원본배열은 그대로 

const doubles = numbers.filter(item => item%2 - 1);
console.log(doubles);//[2,4,6,8]

2) 배열에서 'a'의 개수 구하기

const arr = ['a','b','c','a','d','e','a'];
let count 
=arr.filter(element => 'a' ===
           element).length
console.log(count); //3

//배열의 filter함수를 호출하면서 파라미터로 element
//=> 'a'===element 라는 함수 전달 

function(element) {
  return 'a' === element;
}
//filter함수로 전달된 콜백함수임
element => 'a'===element 
//위함수와 동일한 함수임

//filter가 리턴하는 함수는 ['a','a','a']임(filter는 
//콜백함수의 결과가 true인 요소로만 이루어진 배열을 리턴 ). 
//따라서 이 함수의 길이를 알면 a가 몇개있는지 파악 가능

3) 특정조건에 맞는 요소만 찾기

장바구니에서 가격이 10000 미만인 요소들을 (cheap) 찾아보자.

const shopping_basket = [
  {name: 'a',money: 10000},
  {name: 'b',money: 3000},
  {name: 'c',money: 8000},
  {name: 'd',money: 15000},
]

const cheap = shopping_basket.filter(item => item.money < 10000);
console.log(cheap);
//[ {name: 'b',money: 3000}, {name: 'c',money: 8000}, ]

4) 고차함수 사용 예제

const numbers = [1,2,3,4,5];
//3보다 큰 수
const odds = value => value > 3;
const newNumbers = numbers.filter(odds);
console.log(newNumbers); //[4,5]

*5) 중복 제거하기

filter와 index를 함께 쓰면 중복된 값을 제거할 수 있다.
indexOf()함수는 특정값이 배열에서 처음나타나면, 그 index값을 반환한다.
filter()함수는 봤다시피 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 반환한다.

const arr = [1,2,5,3,2,5,1,4];
const newArr = arr.filter((element,index)=>{
  const result = arr.indexOf(element) === index;
  return result;
  //  return arr.indexOf(element) === index; 로 위 두줄을 줄일 수 있다.
})
console.log(newArr); //[1,2,5,3,4]

target.indexOf(number) === index;
왼쪽의 식은 해당 number가 처음 나타나는 index를 indexOf를 사용해서 찾는 것이다.
이때 해당 number가 이 index값과 일치해야만 true로 반환되고, 아닌 값들은 false로 filter에 의해 걸러진다.

*참고(중복요소 제거 -set)
사실 중복요소를 제거할 때 set을 사용하느 것이 가장 쉽다.
set은 중복되지 않은 유일한 값들의 집합이다.

const values = [1,2,1,3,4,3,4,2,3,3,4];
const result = [...new Set(values)];
console.log(result); //[1,2,3,4]

https://7942yongdae.tistory.com/49