js - find/filter 배열 고차함수(4)

find는 조건이 true인 값을 배열에서 찾아 반환하는 함수이다.
filter와 달리 한 값만 찾으면, 그 뒤로는 찾지 않으며 찾은 값을 반환한다.

let arr = [1,2,3,4,5];
const even = arr.find((item)=>{
  return item % 2 === 0 ;})
console.log(even); //2

//짝수는 2,4임에도 find는 앞부터 찾아 짝수 2만을 반환한다.

find는 배열에서 원하는 조건의 객체를 반환할 때도 유용하다.

find는 조건이 true인 값 중 첫번째 값을 반환한다.

let userList = [
  {name : "Mike", age : 15},
  {name : "Jane" , age : 24},
  {name : "Tom", age : 10},
]

//유저중 나이가 19미만인 객체(배열 안에 요소)를 찾아서
//true로 반환됨
//(find는 결과가 true인 값만 반환한다.)
const notAdult = userList.find((user)=>{
  if(user.age < 19){
  return true
  }
  return false;
});
console.log(notAdult);
// {
//   "name": "Mike",
//   "age": 15
// }

//나이가 19미만인 사람은 Mike, Tom 두명이 있는데, 
//이 중 첫번째 값인 Mike만 찾아 반환한다.

조건이 true인 값 모두를 얻고 싶다면 find가 아닌 filter를 사용하는 것이
적절하다.
다음은 find와 filter의 차이를 보여주는 예시이다.

//name과 color 속성이 있는 객체들이 배열에 담겨 있다.
const cosmetics = [
  {name : 'lipstick',
  color : true},
  {name : 'eyeshadow',
  color : true},
  {name : 'ample',
   color : false},
  {name : "lotion",
  color : false},
]
//1. find
//color속성이 false인 화장품을 find한다.
//반환값이 true인 객체만 noColor에 담기게 된다
const noColor = cosmetics.find((item =>{
  if(item.color === false){
    return true
  }
  return false
}))
console.log(noColor);

//조건을 가장 먼저 만족한 ample이 나왔다.
// {
//   "name": "ample",
//   "color": false
// }

//2.filter
//filter는 조건이 true인 요소들만 모아 배열에 넣어 반환한다.
const noColorCosmetics = 
      cosmetics.filter((item)=>{
        return item.color === false
      });
console.log(noColorCosmetics);
//다음과 같이 두 객체가 한 배열에 넣어 
//반환되었다.

// [// [object Object] 
// {
//   "name": "ample",
//   "color": false
// },// [object Object] 
// {
//   "name": "lotion",
//   "color": false
// }]