마지막으로! 과거에 Set이 도입되었을 때 이미 우리의 삶을 더 좋게 만들었습니다. 고유한 목록을 쉽게 생성할 수 있을 뿐만 아니라 해당 목록에서 항목을 찾고 설정하는 성능도 향상되었습니다.

훌륭했지만 여전히 다른 언어에 있는 몇 가지 기능이 누락되었습니다. 그리고 이것은 사실입니다. 왜냐하면 우리가 그랬기 때문입니다. 2024년에는 Set에 새로운 합성 메소드가 추가되면서 마침내 간단한 호출만으로 합집합, 교집합, 차이 등을 수행할 수 있게 됩니다.

더 이상 고민하지 말고 바로 시작하겠습니다.

차이점

첫 번째 세트에는 존재하지만 두 번째 세트에는 없는 요소를 포함하는 새 세트를 반환합니다.

예: 지난 달에는 방문하지 않았지만 이번 주에는 사이트를 방문한 사용자를 확인하려고 합니다.

어떻게 사용하나요?

const thisWeekUsers = new Set([1, 2, 3, 4]);
const lastMonthUsers = new Set([3, 4, 5, 6]);

const newUsers = thisWeekUsers.difference(lastMonthUsers);

console.log(newUsers); // Set(2) { 1, 2 }

과거에는 어떻게 그렇게 했나요?

const thisWeekUsers = [1, 2, 3, 4];
const lastMonthUsers = [3, 4, 5, 6];

let newUsers = thisWeekUsers.filter(x => !lastMonthUsers.includes(x));

console.log(newUsers); // (2) [1,2]

자세히 알아보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/difference

교차로

두 세트에 모두 존재하는 값만 포함하는 새 세트를 반환합니다.

예: 전자책 번들을 장바구니에 추가하려고 하는데 해당 책 중 일부가 이미 장바구니에 들어 있습니다.

어떻게 사용하나요?

const booksBundle = new Set([1, 2, 3, 4]);
const cart = new Set([3, 4, 5, 6]);

const booksToAdd = booksBundle.intersection(cart);

console.log(booksToAdd); // Set(2) { 3, 4 }

과거에는 어떻게 그렇게 했나요?

const booksBundle = [1, 2, 3, 4];
const cart = [3, 4, 5, 6];

const booksToAdd = booksBundle.filter(book => cart.includes(book));

console.log(booksToAdd); // (2) [3, 4]

자세히 알아보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection

대칭차이

두 그룹 모두에서 반복되지 않는 값을 사용하여 새 세트를 반환합니다.

예시: 매장 간 재고 과잉 상품을 확인하여 교환 가능한 상품을 확인합니다.

어떻게 사용하나요?

const firstStore = new Set([1, 2, 3, 4]);
const secondStore = new Set([3, 4, 5, 6]);

const overstockedItems = firstStore.symmetricDifference(secondStore);

console.log(overstockedItems); // Set(4) { 1, 2, 5, 6 }

과거에는 어떻게 그렇게 했나요?

const firstStore = [1, 2, 3, 4];
const secondStore = [3, 4, 5, 6];

const allItems = [firstStore, secondStore].flat();
const overstockedItems = allItems.filter(item => {
  return !firstStore.includes(item) || !secondStore.includes(item);
});

console.log(overstockedItems); // (4) [1, 2, 5, 6]

자세히 알아보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference

노동 조합

두 그룹의 값을 사용하지만 값을 반복하지 않고 새 세트를 반환합니다.

예: 귀하와 귀하의 친구가 재생목록을 병합하려고 하지만 일부 음악이 동일합니다.

어떻게 사용하나요?

const yourPlaylist = new Set([1, 2, 3, 4]);
const friendPlaylist = new Set([3, 4, 5, 6]);

const mergedPlaylist = yourPlaylist.union(friendPlaylist);

console.log(mergedPlaylist); // Set(6) { 1, 2, 3, 4, 5, 6 }

과거에는 어떻게 그렇게 했나요?

const yourPlaylist = [1, 2, 3, 4];
const friendPlaylist = [3, 4, 5, 6];

const mergedPlaylist = new Set([yourPlaylist, friendPlaylist].flat());

console.log(mergedPlaylist); // (6) [1, 2, 3, 4, 5, 6]

자세히 알아보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/union

분리되어 있습니까?

부울을 반환합니다. 두 Set에 공통 값이 없으면 true이고, 공통 값이 하나 이상 있으면 false입니다.

예: 다른 그룹에 속한 제품이 있는지 확인하세요.

어떻게 사용하나요?

const electronics = new Set([1, 2, 3, 4]);
const furniture = new Set([3, 4, 5, 6]);
const groceries = new Set(['apple']);

console.log(electronics.isDisjointFrom(furniture)); // false
console.log(electronics.isDisjointFrom(groceries)); // true

과거에는 어떻게 그렇게 했나요?

const electronics = [1, 2, 3, 4];
const furniture = [3, 4, 5, 6];
const groceries = ['apple'];

function isDisjoint(array1, array2) {
  return array1.every(item => !array2.includes(item));
}

console.log(isDisjoint(electronics, furniture)); // false
console.log(isDisjoint(electronics, groceries)); // true

자세히 알아보기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom

상위집합/부분집합인가?

이 두 기능은 매우 유사합니다. 둘 다 부울 값을 반환하며 정반대입니다. 상위 집합은 집합이 다른 집합의 상위 집합인 경우 true를 반환하고 집합이 다른 집합의 하위 집합인 경우 하위 집합은 true를 반환합니다.

둘 중 하나에 대한 답을 아는 것만으로도 다른 하나를 아는 것으로 충분하기 때문에 이러한 기능을 하나로 묶었습니다. 집합은 하위 집합 집합의 상위 집합일 수 있습니다.

예: 사용자가 회사 그룹에 속해 있는지 이해합니다.

어떻게 사용하나요?

const itDepartment = new Set([1, 2, 3, 4]);
const genZFromToronto = new Set([3, 4]);

console.log(itDepartment.isSupersetOf(genZFromToronto)); // true
console.log(genZFromToronto.isSubsetOf(itDepartment)); // true

과거에는 어떻게 그렇게 했나요?

const itDepartment = [1, 2, 3, 4];
const genZFromToronto = [3, 4];

console.log(genZFromToronto.every(item => itDepartment.includes(item))); // true

자세히 알아보기:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf

이제 모든 설정이 완료되었습니다. 프로젝트에 사용해도 후회하지 않습니다!

이 기능이나 다른 기능에 관심이 있거나 다른 내용을 보고 싶으시면 알려주시기 바랍니다. 다음 시간까지 o/