0. Overview

filter

• 배열의 값 중에서 조건에 맞는 모든 값을 새로운 List 로 만들어 (조건에 맞는 값이 없다면 빈 List 를) 반환한다.
• 조건 검색을 위해 배열의 모든 값을 확인한다.

find

• 배열의 값 중에서 조건에 맞는 첫 번째 값을 새로운 값으로 (조건에 맞는 값이 없다면 undefined 를) 반환한다.
• 조건에 맞는 값을 찾으면 처리가 종료된다.

1. Contents

이번 포스트에서는 자주 사용하고 있는 함수 filter, find 함수에 대해 정리해보려 합니다. 종종 filter 함수를 무분별하게 사용하는 경우를 많이 봐서 두 함수의 차이를 정리해 정확하게 사용할 수 있도록 해보겠습니다.

1-1) Filter

filter 함수는 배열의 값 중 조건에 맞는 값을 추출 하고자 할 때 사용합니다.
예를 들어 1~10 까지의 값이 있는 배열에서 짝수만 추출하고 싶다면 아래의 코드와 같습니다.

  const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const filtered = arr.filter((num: number) => {
    return num % 2 === 0;
  });

  console.log('original', arr);	// "original",  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
  console.log('filtered', filtered);	// "filter",  [2, 4, 6, 8, 10] 

로그를 보면 새롭게 만들어진 filtered 배열은 완전히 새롭게 생성된 배열입니다. 원래의 배열인 arr 는 어떠한 변경도 없이 값을 그대로 가지고 있습니다. 이와같이 filter 함수는 조건에 맞는 값을 골라내 새로운 배열을 만들어줍니다.

1-2) Find

find 함수 역시나 배열의 값 중 조건에 맞는 값을 추출합니다. 하지만 가장 큰 차이는 반환타입(return type)에 있습니다. find 함수는 추출해낸 값을 똑같이 반환합니다. filter 함수와 똑같은 조건으로 실행해보겠습니다.

  const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const find = arr.find((num: number) => {
    return num % 2 === 0;
  });

  console.log('original', arr);	// "original",  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
  console.log('find', find);	// "find",  2,  "number" 

find 함수에 filter 함수에서 넣었던 조건을 그대로 넣었더니 2 라는 값만 반환하였습니다. 조건에 맞는 값 중 가장 첫 번째 값을 그대로 반환한 것입니다. 여기에서 주의할 점은 find 함수 역시 원래의 배열인 arr 에 어떤 변화도 주지 않는다는 것입니다. 조건에 맞는 값 2 가 가장 먼저 나왔기에 2 를 반환하되, 반환타입(return type)은 2 의 타입인 number 가 됩니다.

조건에 맞는 가장 첫 번째 값을 반환하는 것을 확인하기 위해 원래의 배열인 arr 의 순서를 반대로 하여 filter 와 find 를 실행해 보겠습니다.

  const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  arr.reverse(); 

  const filtered = arr.filter((num: number) => {
    return num % 2 === 0;
  });

  const find = arr.find((num: number) => {
    return num % 2 === 0;
  });

  console.log('original', arr);	// "original",  [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] 
  console.log('filtered', filtered);	// "filtered",  [10, 8, 6, 4, 2]
  console.log('find', find);	// "find",  10,  "number" 

find 의 반환값이 2 가 아니라 10인 것을 확인할 수 있습니다.

1-3) 실행 횟수

두 함수의 사용 목적은 분명히 다릅니다. "조건에 맞는 값을 얻는다" 라는 공통적인 목표가 있으나 "모두 얻는다" 와 "첫 번째 것만 얻는다" 는 큰 차이가 있습니다. 특히 함수의 실행 횟수가 큰 차이가 있는데 filter 함수의 경우에는 조건에 맞는 모든 값을 얻기 위해 배열의 모든 값을 확인합니다. 배열의 길이가 10이면 10번, 100이면 100번을 모두 확인합니다.

하지만 find 는 조건에 맞는 첫 번째 값만을 얻기 때문에, 값을 얻은 후에는 더이상 실행할 필요가 없습니다. 코드로 확인해보겠습니다.

 const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

 let idx = 0;
 const filtered = arr.filter((num: number) => {
   console.log('filtered-count', ++idx);
   return num % 2 === 0;
 });

 idx = 0;
 const find = arr.find((num: number) => {
   console.log('find-count', ++idx);
   return num % 2 === 0;
 });

실행 결과입니다. filter 함수는 10번 실행되었지만, find 함수는 2번 실행 후 더이상 실행되지 않았습니다.

"filtered-count",  1 
"filtered-count",  2 
"filtered-count",  3 
"filtered-count",  4 
"filtered-count",  5 
"filtered-count",  6 
"filtered-count",  7 
"filtered-count",  8 
"filtered-count",  9 
"filtered-count",  10 

"find-count",  1 
"find-count",  2  

2. Conclusion

filter 와 find 는 배열의 값에서 조건에 맞는 값을 찾아준다는 공통점이 있지만 반환타입(return type)이나 처리 방식은 완전히 다른 함수임을 알 수 있습니다.

특히 실행 횟수에 대해 말하고 싶은데 종종 조건에 맞는 값이 있는지 없는지 확인하는 처리로 filter 함수를 사용하는 것을 본 적이 있습니다.

   const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

   const filtered = arr.filter((num: number) => {
     return num % 2 === 0;
   });  

   if (filtered.length > 0) {
     // TODO 
   }

위의 코드처럼 "배열 arr 에 짝수가 있다면" 이라는 조건 처리를 위해서 filter 함수를 사용하는 것은 효율적이지 않습니다. 2 에서 짝수가 있음을 확인했음에도 10 까지 모두 체크하기에 쓸데없는 실행이 일어납니다. 이런 경우에는 find 함수를 사용해서 null 체크를 하거나 오히려 some, every 와 같은 boolean 을 반환하는 함수를 사용하는 편이 좋습니다.

조건에 맞는 값을 모두 추출하여 그 값을 다른 처리에 사용해야하는 경우에만 filter 함수를 사용하는 것이 효율적입니다.