[자바스크립트 코딩의 기술] 5장 Tip23

😎filter()와 find()로 데이터의 부분집합을 생성하라

filter()

배열 메서드 중 원본배열에서 필요한 정보만 꺼내어 새로운 배열을 생성하는 map()메서드 이외에

배열에 있는 정보를 변경하지 않고 반환되는 배열의 길이를 줄이는 메서드가 있다.

바로 filter()이다.

filter()은 map()과 다르게 filter()메서드에 전달하는 함수는 반드시 참 값을 반환해야 한다.

const scores = [30, 82, 70, 45];
function getNumberOfPassingScores(scores) {
  const passing = scores.filter(score => score > 59);
  // [70, 82]
  return passing.length;
}
// 2

filter()는 true 또는 false를 반환하지만 최종적으로는 반환되는 배열의 실제 값이 담긴다.

즉, 필터함수는 각각의 점수를 한 번에 하나씩 검사하고, 반환값이 ture 일 때는 값을 그대로 유지하고 배열 순서도 유지한다.

☝️ 중요한점은 filter()메서드는 항상 배열을 반환하며 조건에 일치하는 값이 없는 경우에도 배열을 반환한다.

const daves = team.filter(member => member.match(/Da/));

find()

배열의 조건과 일치하는 항목이 1개라면 find()메서드가 유용하다.

find()메서드는 true 또는 false 값을 반환하는 함수를 인수로 받고, 배열의 항복에 전달한 함수로 평가해 true 값을 반환하는 첫 번째 항목만 전달한다.

true 값을 반환하는 항목이 없다면 undefined 를 반환한다.

const instructors = [
  {
    name: '짐',
    libraries: ['미디어교육정보 도서관'],
  },
  {
    name: '새라',
    libraries: ['기념 도서관', '문헌정보학 도서관'],
  },
  {
    name: '엘리엇',
    libraries: ['중앙 도서관'],
  },
];

let memorialInstructor;
  for (let i = 0; i < instructors.length; i++) {
    if (instructors[i].libraries.includes('기념 도서관')) {
      memorialInstructor = instructors[i];
      break;
    }
  }

위 코드는

1. 첫 번째 사서가 조건에 부합하지 않음을 확인해 준다.
2. 두 번째 조건에 부합함으로, 세 번째 사서를 확인하는 데 엄청난 노력 필할 수 있음.

🙌 find() 메서드로 바꾼다면!!

const librarian = instructors.find(instructor => {
    return instructor.libraries.includes('기념 도서관');
  });

불안정한 let 대신 const 사용!

그러나 단점은 조건에 맞는 항목이 없을 때 undefind를 반환하여 예측불가능하다. 하지만 커링을 통해 인수의 수를 하나로 줄일 수 있다. 즉

👉 반복문에서 break문을 사용하기 적합한 경우!

변수 하나만 인수로 받을 수 있으므로 두 번째 인수를 추가해야 할 경우에는 커링이라는 기법을 사용한다.

const findByLibrary = library => instructor => {
    return instructor.libraries.includes(library);
  };
  const librarian = instructors.find(findByLibrary('미디어교육정보 도서관'));

  // {
  //   name: 'Jim',
  //   libraries: ['미디어교육정보 도서관'],
  // }
  // END:findInstructorCurry

  return librarian;
}

이 게시물은 자바스크립트 코딩의 기술 책을 요약한 내용입니다.