ArrayFunction 2 (find, filter)

find와 filter는 사용하는 방법, 메커니즘은 동일하다. 다만 return값이 다른데 find의 경우에는 조건을 만족하는 최초의 값을 찾아 반환하고 filter의 경우에는 조건에 만족하는 모든 값을 배열의 형태로 반환해준다.

 

두 함수 모두 함수의 대상이 되는 배열의 상태를 변화시키지 않는 함수이다. (arr.find() , arr.filter()를 해도 arr는 변화가 없음)

 

find와 filter는 모두 인자로 콜백 함수를 넘겨주면 된다. 콜백함수의 인자는 조건 검사의 대상이 되는 배열의 값이 순서대로 넘어가고 return 값은 true false로 결정될 수 있는 조건식이 들어가면 된다. 아래의 코드 블록을 보면 이해가 쉽다.

 

const arr1 = [1,2,3,4,5,1]

// const arr2 = arr.find( function(val){return val == 1} )
const arr2 = arr.find( (val) => val == 1 )

const arr3 = arr.filter( (val) => val == 1 )

console.log(arr2)  // 1
console.log(arr3)  // [1,1]

const arr4 = arr.find( x => x == 2 )
const arr5 = arr.filter( x => x == 2 )

console.log(arr4) // 2
console.log(arr5) // [2]
console.log(typeof arr4) // number
console.log(typeof arr5) // object

 

위 코드는 설명을 위해 간단하게 1,2,3,4,5,1을 가진 배열 arr과 find와 filter를 이용해서 arr2~arr5를 만들었다.

 

arr2는 값이 1과 같은 값을 찾는데, 첫번째 값만 return해주기 때문에 arr2는 1이라는 리터럴을 갖는 것을 알 수 있다.

(첫 번째 return을 찾고 반환을 하면 검색을 멈춘다)

arr3의 경우는 arr2와 같은 조건으로 찾아내지만 filter를 이용했기 때문에 배열로 return값을 준 것을 알 수 있다.

(모든 값을 순회하면서 찾기 때문에 배열의 길이만큼 동작)

 

arr4와 arr5을 통해 find와 filter로 찾아낸 값이 각각 하나의 value와 배열인 것을 확인할 수 있었다.

 

그럼 다음 예제를 풀어보면서 find와 filter에 대해서 익숙해져 보도록 하자

 

 

find 함수 예제

1. 속성 중 하나를 사용하여 배열에서 객체 찾기

let inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

 위 배열에서 chrries만 찾아서 출력하기

 

 

2. 배열에서 소수 찾기

let arr = [4, 5, 6, 8, 9]

 위 배열에서 소수인 것 중 첫번째 인자 출력

답 : 5

 

filter 함수 예제

1. 모든 작은 값 걸러내기

const arr = [12,54,32,1,6,53,4]

 위 arr에서 10이하인 수만 걸러내서 새로운 배열을 받아 출력해보기

 

 답 : [1, 6, 4]

 

2. JSON에서 무효한 항목 거르기

let arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

let invalidEntries = 0;

위와 같이 JSON obj를 갖고 있는 array가 주어졌을 때 JSON의 id 값을 검사해서 id의 값이 유효하지 않은 값일때만 invalidEntries의 값을 더해주어 arr 안에 유효한 객체가 총 몇개 있는지 검사하는 로직을 완성시키기

 

답 : 유효한 객체 배열 = [ { id : 15 }, { id : -1 }, { id : 3 }, { id : 12.2 } ]

      invalidEntries = 5;