javascript에서 filter함수와 includes함수 간단하게 사용하기! (feat. 교집합, 차집합)

안녕하세요 ! 

오늘은 javascript의 filter과 includes를 이용해서 교집합과 차집합에 대해서 알아보겠습니다 ! 

실무에서 필요 할 때가 잇을겁니다 !! 

filter함수란?

 

영어 말 그대로 필터를 하는것입니다 ! 

즉 !  배열의 내용을 특정 조건에 따라서 걸러주는 역할을 합니다 !!! 

한번 예제로 알아볼까요?

먼저 ! 일방적인 반복문으로 했을 때 입니다 ! 

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  return (
    <div>
      <span>
        {arr1.map((i) => {
          if (i > 5) {
            return i;
          }
        })}
      </span>
    </div>
  );

물론 잘 나옵니다 !!!! 

하지만 코드도 길어지구 if문까지 써야하네요 ;; 

 

그럼 filter함수를 쓰면 어떻게 될까요?

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  return (
    <div>
      <span>
        {arr1.filter((i) => {
          return i > 5;
        })}
      </span>
    </div>
  );

똑같은 결과가 나옵니다 ! 

훨씬 간단하네요 !!! 

 

 

includes함수란?

 

이것도 말 그대로

배열에서 특정값을 포함하고 있는지를 체크해줍니다 ! 

정말 간단합니다 !! 

한번 아래에서 체크해봅시다 ! 

 

  const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  console.log(arr1.includes(3));
  console.log(arr1.includes(10));

결과는 어떨까요??? 

3은 있으니 true가 나오고

10은 없으니 false가 나옵니다 ! 

 

자 ! 여기까지 filter과 includes에 대해서 알아봤습니다 !!! 

그러면 어떻게 하면 교집합, 차집합에 대해서 구할 수 있을까요? 

 

먼저

 

교집합 구하기

먼저 교집합은 위에처럼 A와 B의 공통부분을 의미합니다 ! 

 

그럼 코드로 알아봅시다 ! 

 

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  const arr2 = [5, 6, 7, 8, 9, 10];
  return (
    <div>
      <span>
        {arr1.filter((i) => {
          return arr2.includes(i);	// arr1에 요소를 arr2에 포함되는지 비교 해서 true 즉 있는것만 만 리턴
        })}
      </span>
    </div>
  );

짠 ! 저렇게 간단하게 arr1, arr2에 공통 부분인 5,6,7,8만 가져 올 수 있습니다 ! 

위에서 배운것처럼 includes의 결과값이 true값을 가지고 올 수 있으니 5,6,7,8을 가지고 올 수 있습니다 ! 

 

그럼 바로 차집합에 대해서 알아보겠습니다 ! 

아마 눈치채신분들도 있을것입니다 ! 엄청 쉽습니다 ! 

 

 

차집합 구하기

 

차집합은 위에부분처럼 A만 있는것을 구하는 것입니다 ! 

그럼 코드로 알아봅시다 ! 

  const arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  const arr2 = [5, 6, 7, 8, 9, 10];
  return (
    <div>
      <span>
        {arr1.filter((i) => {
          return !arr2.includes(i); // arr1에 요소를 arr2에 포함되는지 비교 해서 false 즉 없는 것만 리턴 
        })}
      </span>
    </div>
  );

위에 코드와 정말 비슷합니다 ! 

결과는 1,2,3,4가 나옵니다 ! 

하지만 차집합을 구할 때는 arr1에 요소를 arr2와 비교를 해서 겹치지 않는것들만 추출하는 거죠 !

그래서 1,2,3,4가 나왔습니다 !!! 

 

 

정리

filter, includes함수는 꼭 교집합, 차집합 뿐만 아니라 정말 다양하게 많이 쓰입니다 !! 

특히 저는 filter함수는 정말정말 많이 실무에서 사용했습니다 !! 

여러분들도 저렇게 특정하게 조건을 넣어서 배열에 있는 요소들을 추출하고싶을 때는 반복문안에 if문을 쓰는것보다 

filter함수로 해봅시다 !!