JavaScript 배열 메소드로 차집합, 교집합, 합집합 구현하기

JavaScript에서 배열끼리 차집합, 교집합, 합집합 구현해 보기 (feat. filter, includes)

---

🚀 내가 이 글을 작성하는 것은 근래 코드를 짜면서 많이 찾아보고 사용했던 내용이라 따로 정리해 놓기 위함이다.

 

다음과 같은 두 배열이 있다고 해보자.

const arr1 = [1, 3, 4, 6, 7];
const arr2 = [1, 2, 4, 9, 10];

 

about:blank의 콘솔에서 해보시길 바랍니다.

 

주로 사용하는 배열 메서드는 filter와 includes 입니다.

 

filter

• filter는 콜백을 매개변수로 받습니다.
• 내부 콜백의 매개변수로는 배열 내부의 각각의 value들을 나타내는 element, 현재 처리하는 element의 index, filter를 호출한 배열을 담은 array, 그리고 callback을 실행할 때 this로 사용하는 값은 thisArg 총 4가지가 있습니다.
• 이 중 주로 element와 index를 자주 사용하니 잘 학습해 두세요.

includes

• 배열이 특정한 요소 즉, 값을 포함하고 있는지 확인해 boolean 값을 return 해주는 메서드입니다.
• 매개변수로는 찾으려는 value 값과 어디서부터 찾을지 결정하는 index를 받습니다.

 

1. 차집합

arr1.filter(v => !arr2.includes(v))
// expected result [3, 6, 7]

arr2.filter(v => !arr1.includes(v))
// expected result [2, 9, 10]

• arr1을 기준으로 filtering을 해줍니다.
• 각 value들을 arr2가 포함하고 있는지를 includes 메서드를 통해 검사해 준 뒤 ! 연산자를 통해 arr1과 arr2 배열의 공통된 값을 제외한 배열을 받아줍니다.
• arr2를 기준으로 하는 것 역시 동일합니다.

 

2. 교집합

arr1.filter(v => arr2.includes(v))

arr2.filter(v => arr1.includes(v))
// expected result(둘 다) [1, 4]

• 차집합과 유사한 내용입니다. ! 연산자의 유무 차이입니다.

 

3. 합집합

[...new Set([...arr1, ...arr2])]
// expected result [1, 3, 4, 6, 7, 2, 9, 10]

• 합집합은 스프레드 연산자를 사용해서 arr1과 arr2를 중복 포함해 합친 배열을 만들어줍니다.
• [...arr1, ...arr2]의 결과는 [1, 3, 4, 6, 7, 1, 2, 4, 9, 10]입니다.
• 이걸 Set을 사용해 중복을 제거해 줍니다.
• Set 객체는 중복되지 않는 유일한 값들의 집합입니다. 그렇기에 중복된 값들을 삭제할 수 있습니다.
• Set 객체에 관한 더 자세한 내용은 추후에 작성하겠습니다.

 

다른 더 좋은 방법이 있다면 코멘트 남겨주세요. 언제든 환영입니다.