(번역) 자바스크립트 Set 의 새로운 메서드
원문 : https://developer.mozilla.org/en-US/blog/javascript-set-methods/
자바스크립트 Set 에 새로운 메서드가 등장했습니다. Firebox 127 버전이 업데이트되면서부터, 대부분의 주요 브라우저 엔진에서 이 새로운 메서드들을 사용할 수 있게 되었습니다. 즉, 호환성을 위해 폴리필을 사용할 필요가 없다는 것을 의미합니다.
이 글은 자바스크립트의 Set을 처음 접하시는 분들이나 새롭게 추가된 메서드를 사용하는 방법을 알아보려는 분들에게 좋은 시작점이 될 것입니다.
이 메서드를 사용함으로써 얻을 수 있는 중요한 장점들을 간단한 예시를 통해 설명하며, 왜 직접 구현하는 대신 이러한 내장 메서드를 사용하는 것이 더 나은지 보여드리겠습니다.
새롭게 추가되는 Set 메서드
요약을 원하시는 분들을 위해, 다양한 브라우저에서 지원되는 새로운 메서드들의 핵심 내용만 먼저 소개해 드리겠습니다.
intersection()메서드는 현재 Set과 주어진 Set 모두에 포함된 요소들로 새로운 Set을 반환합니다.union()메서드는 현재 Set과 주어진 Set에 있는 모든 요소로 새로운 Set을 반환합니다.difference()는 현재 Set에는 있지만, 주어진 Set에는 없는 새로운 Set을 반환합니다.symmetricDifference()메서드는 어느 한쪽 Set에는 있지만, 두 Set 모두에는 없는 요소들로 새로운 Set을 반환합니다.isSubsetOf()메서드는 한 Set의 모든 요소가 특정 Set에 있는지를 나타내는 불리언 값을 반환합니다.isSupersetOf()메서드는 한 Set의 모든 요소가 특정 Set에 있는지를 나타내는 불리언 값을 반환합니다.isDisjointFrom()메서드는 한 Set 특정 Set과 공통 요소를 가지고 있는지 나타내는 불리언 값을 반환합니다.
혹시 위 내용을 읽고 혼란스러우시다면 걱정하지 마세요. 각 메서드가 무엇을 하는지 다음 챕터에서 자세히 설명해 드리겠습니다. 이 메서드들은 특정 Set의 내용과 비교하여 Set의 내용을 확인하는 데 사용됩니다.
자바스크립트 Set은 무엇일까요?
Set은 배열(Array)과 비슷하지만, 각 요소가 딱 한 번만 저장될 수 있다는 점이 다릅니다. 예를 들어, 어떠한 목록의 요소들을 가져와 그것을 Set에 추가해 보겠습니다. 아래 예시에서 오른쪽 목록은 왼쪽 목록의 내용을 Set으로 변환한 것입니다. 목록의 모든 중복된 요소가 제거되었습니다. 이는 Set의 각 요소는 유일하다는 것이 보장되기 때문입니다.
이 간단한 예제에서는 크게 중요성을 느끼지 못할 수 있지만, 특히 더 큰 데이터와 복잡한 데이터 타입 및 객체에 대해 고유한 항목 컬렉션을 만들 수 있는 내장 기능이 있다는 것은 정말 편리합니다.
예를 들어, 아래와 같이 Set에 요소를 추가한다고 생각해 보겠습니다.
const dogs = new Set();
const yoshi = { name: "Yoshi", personality: "Friendly" };
dogs.add(yoshi);또한, 배열에서 요소가 있는지 확인하는 것보다 Set에서 요소가 있는지 확인하는 것이 일반적으로 더 빠릅니다. 따라서, Set은 성능을 주시해야 하는 큰 데이터 세트의 경우에 유용합니다.
그리고, 주어진 Set을 기준으로 특정 논리적 속성을 가진 새로운 Set을 구성할 수도 있습니다. 이 내용은 아래에서 계속해서 살펴보겠습니다.
새롭게 추가된 메서드들을 모두 살펴보겠지만 `Set`으로 할 수 있는 모든 것을 알고 싶다면, 인스턴스 메서드 문서를 살펴보는 걸 추천합니다.
Union of two sets(두 Set의 합집합)
혹시 Set이라는 개념이 낯설게 느껴지시나요? 그렇다면 먼저 union 부터 살펴보면 좋습니다. Union을 사용하면, ‘두 Set 중 하나 또는 둘 다’에 있는 요소가 무엇인지 확인할 수 있습니다.
아래 예시에서는 두 목록이 있고, 중복 없이 두 목록의 모든 항목을 포함하는 세 번째 목록을 만들려고 합니다.
// 주어진 두 목록 Set의 새로운 union set을 만듭니다.
const unionSet = set1.union(set2);
// union set의 아이템들을 나열합니다.
unionSet.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
unionList.appendChild(li);
});
지금은 각 목록 항목의 HTML textContent를 사용하여 문자열 Set을 만들고 있습니다. 그러나 Set이 배열이나 객체와 같은 데이터 타입도 포함할 수 있다는 점을 고려하면, 이것이 얼마나 강력한지 알 수 있습니다.
Set은 중복을 제거하거나, 동일성 검사를 하거나, 다른 비교를 위해 별도의 커스텀 구현이 필요 없기 때문에 유용합니다. 일단 Set에 요소가 있으면, 모두 목록 내에서 유일하다는 것을 알 수 있습니다.
또한, union 메서드는 두 Set 중 ‘하나 또는 둘 다’에 나타나는 고유한 항목들로 이루어진 세 번째 Set을 만드는 최적화된 방법입니다.
Set intersection(교집합)
intersection을 사용하면 두 Set에서 모두 등장하는 요소들을 찾을 수 있습니다. 즉, 두 Set 사이의 겹치는 요소를 알아낼 수 있게 됩니다. 아래 예시에서도 새로운 세 번째 Set을 만들어 보겠습니다.
단, 위의 union 예시에서 단순히 Set의 목록만 표기했던 것과는 다르게 ‘두 Set의 공통 요소만’ 강조하여 표기해 보도록 하겠습니다.
// intersection을 사용해 새로운 집합을 만듭니다.
const intersectionSet = set1.intersection(set2);
// 목록을 순회하며 intersection 된 요소라면 강조 표기합니다.
allListItems.forEach((item) => {
if (intersectionSet.has(item.textContent)) {
item.className = "match";
}
});
Set symmetric difference(대칭차집합)
difference(차집합)에 대해 살펴보기 전에, symmetricDifference에 대해 알아보겠습니다. symmetric difference라는 말이 복잡하게 들릴 수 있지만, 아래의 예시로 쉽게 설명해 보겠습니다. 이 연산은 각각의 Set에는 속해 있지만 두 Set 모두에 속하지 않는 요소들만 확인할 수 있게 해 줍니다.
const setNotBoth = set1.symmetricDifference(set2);
allListItems.forEach((item) => {
if (setNotBoth.has(item.textContent)) {
item.className = "match";
}
});
만약 이 모든 것이 새롭게 느껴지고 이해하는데 어려움을 겪고 계신다면, symmetric difference 예시를 intersection 예시와 비교해 보세요. symmetricDifference 메서드의 연산은 intersection 메서드의 논리적 연산과 정반대의 작업을 수행한다는 것을 알 수 있을 것입니다.
Set difference(차집합)
difference를 사용하면 한 Set에는 있지만 다른 Set에는 없는 요소들을 확인할 수 있습니다.
아래 예제에서는 기존처럼 하나가 아닌 두 개의 새로운 Set을 만들었습니다. 첫 번째 Set(set1only)은 set1.difference(set2)로 생성되었습니다. 그 결과로 ‘첫 번째 Set에만 존재하는’ 요소들의 Set만 반환되었습니다. 똑같은 작업을 set2only로 진행하였고, 그 결과로 두 번째 Set에는 존재하지만, 첫 번째 Set에는 없는 요소들만 찾을 수 있었습니다.
difference로 만든 Set을 사용하여 각 다른 목록에 나타나지 않는 요소들을 강조해 보았습니다.
const set1only = set1.difference(set2);
const set2only = set2.difference(set1);
allListItems.forEach((item) => {
if (set1only.has(item.textContent)) {
item.className = "setOneMatch";
} else if (set2only.has(item.textContent)) {
item.className = "setTwoMatch";
}
});
Subset, superset, disjoint from (부분집합, 상위집합, 서로소 관계)
우리가 탐구할 마지막 새로운 메서드에 대한 개념은 subset(부분집합), superset(상위집합), ‘disjoint from’(서로소 관계)입니다. 지금까지는 새로운 Set을 생성하는 메서드에 익숙해졌을 겁니다. ‘subset’, ‘superset’, ‘disjoint from’을 연산을 수행하는 메서드는 새로운 Set을 반환하지 않고, 특정 상태나 논리적 검사를 나타내는 불리언 값을 반환합니다.
우리가 알아볼 첫 번째 두 개념은 subset 과 superset입니다. 기존처럼 각 요소를 강조하는 방법 대신에, 이번에는 “Set 1은 Set 2의 subset(부분집합)입니다” 같은 설명 문장을 추가해 보겠습니다. 그리고 if (set1.isSupersetOf(set2))와 같은 메서드의 확인 검사 결과에 따라 (TRUE/FALSE)의 텍스트를 추가해 보겠습니다.
if (set1.isSubsetOf(set2)) {
oneSubTwo.textContent += " [TRUE]";
} else {
oneSubTwo.textContent += " [FALSE]";
}
subset 을 사용하면, 한 Set의 모든 항목이 다른 Set에 나타나는지 확인할 수 있습니다 반대로, superset 을 사용하면 한 Set이 다른 Set의 모든 항목을 포함하고 추가적인 항목이 있는지를 확인할 수 있습니다.
마지막으로 다뤄볼 메서드는 isDisjointFrom()입니다. 메서드는 두 Set의 공통 요소가 있는지 알려줍니다.
아래 예시에 있는 첫 번째와 두 번째 Set은 서로소 관계가 아닙니다. 왜냐하면 그들은 공통으로 하는 “C”라는 요소를 하나 가지고 있기 때문입니다. 세 번째 Set은 다른 두 Set과 서로소 관계에 있습니다. 왜냐하면 세 번째 Set은 나머지 각 두 Set 요소와 공통인 요소가 없기 때문입니다.
마지막으로..
이 글에서 Set 메서드와 그 개념이 흥미로운 개념인지에 대해 즐겁게 읽으셨기를 바랍니다. 실제로 이러한 메서드를 사용하는 다양한 방법을 알고 계시는가요? 언제든지 저희에게 연락해 주시고, 의견이나 제가 놓친 부분이 있다면 알려주세요! 이제 다음 프로젝트를 준비하는 데 필요한 모든 아이디어를 ‘집합(Set)’시키셨겠죠?
그럼, 다음에 뵈어요!