<div id="readability-page-1" class="page"><div><div><h2 id="4825">Set객체를 주저하는 이들을 위하여</h2><div aria-hidden="false"><a rel="noopener  ugc nofollow" href="/?source=post_page---byline--29ecca9acbba---------------------------------------"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:64:64/2*5-DkBQYvxo0TLldXjX88Og.png" width="32" height="32" loading="lazy" data-testid="authorPhoto"></p></div></a></div></div><figure></figure><p id="90aa"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set" rel="noopener ugc nofollow" target="_blank">Set 객체</a>는 값의 목록이다. 아래와 같이 생성자를 통해 만든다. 값은 Set의 목록안에서 고유한 값이다. add에 의해 추가된 순서대로 순회가능하다.(iterable)</p><pre><span id="4002">const a = new Set([1, 2, 3]);<br>a.add(4); // 4가 추가됩니다. {1, 2, 3, 4}<br>a.add(3); // 중복된 값을 추가하면 아무일도 일어나지 않습니다.에러도 안남. {1, 2, 3, 4}</span></pre><p id="6dc6">이 외에도 장점이 많다.</p><h2 id="3ef3">장점1 — 값에는 모든 유형이 가능하다.</h2><p id="6ecd">값에는 모든 유형이 가능하다. 원시값 뿐만아니라 담고 싶은 모든것을 담을 수 있다.</p><pre><span id="2a24">const a = new Set([1, 2, 3]);<br>const obj = { "name": "jwahn" }<br>a.add(obj); <br>console.log(a); // Set(4) {1, 2, 3, Object}<p>const HeadEle = document.getElementById('head');<br>a.add(HeadEle); <br>console.log(a);// Set(5) {1, 2, 3, Object, div#head}</p><p>const symbol1 = Symbol();<br>a.add(symbol1);<br>console.log(a);// Set(6) {1, 2, 3, Object, div#head, Symbole() }</p></span></pre><h2 id="a3c1">장점2 — 직관적인 기본 메서드/속성</h2><pre><span id="067c">let set = new Set();<p>set.add(5);    // 추가<br>set.has(5);    // 찾기<br>set.delete(5); // 삭제<br>set.clear();   // 전체 비우기<br>set.size;    // 현재 요소 개수, 메서드가 아니고 속성.</p></span></pre><p id="cf49">자주 사용되는 메서드 들이 직관적이어서 사용성이 높다.</p><h2 id="0f4a">장점3 — 값을 찾을 때 형변환이 없다.</h2><p id="5b4c">형변환이 일어나는 아래 코드를 보자</p><pre><span id="f330">const obj = { 0: 'zero'}<br>console.log(obj['0']); // 'zero'</span></pre><p id="7de0">객체의 키값을 비교할때 내부적으로 문자열로 형변환을 해서 비교를 하기 때문에 위와 같이 의도하지 않은 상황이 벌어질 수 있다.</p><p id="9363">Set 객체는 값을 비교할때 자동변환하지 않는다.</p><pre><span id="0a18">const set = new Set(0)<br>console.log(set.has('0')); // false</span></pre><h2 id="27cf">장점4 — 값을 찾을 때 배열에 비해 성능이 빠르다.</h2><p id="3e30">Set객체는 해시태이블 구조로 되어있어 기본 컬렉션보다 더 성능이 좋다고 알려져 있다. (<a href="https://velog.io/@jiwonyyy/javascipt-Set-vs-Array-%EC%8B%9C%EA%B0%84%EB%B3%B5%EC%9E%A1%EB%8F%84-%EB%B9%84%EA%B5%90-%ED%95%B4%EC%8B%9C%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%B4%EB%9E%80" rel="noopener ugc nofollow" target="_blank">참고</a>)</p><h2 id="98a1">장점5 — 배열 및 이터레이터로 쉽게 변환</h2><p id="75f0">배열로 쉽게 변환가능하다.</p><pre><span id="8104">// Array.from<br>const set = new Set([1, 2, 3]);<br>console.log(Array.from(set)); // [1, 2, 3]<p>// Spread Operator<br>console.log([...set]); // [1, 2, 3]</p></span></pre><p id="7884">keys() 또는 values()로 Set객체를 이터레이터로 변환할 수 있다.</p><pre><span id="9ba4">const mySet = new Set(["foo", "bar", "baz"]);<br>const setIter = mySet.keys();<p>console.log(setIter.next().value); // "foo"<br>console.log(setIter.next().value); // "bar"<br>console.log(setIter.next().value); // "baz"</p></span></pre><h2 id="9282">장점6 — 집합연산 용이함</h2><p id="5ebd">두 가지 Set객체끼리 비교(집합연산)가 너무나도 용이하다.</p><ul><li id="adf4"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/difference" rel="noopener ugc nofollow" target="_blank">difference</a>: 해당 Set에는 있지만 파라미터로 주어진 Set에는 없는 요소의 집합 반환(<strong>차집합</strong>)</li><li id="1918"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/isDisjointFrom" rel="noopener ugc nofollow" target="_blank">isDisjoinFrom</a>: 해당 Set과 파라미터로 주어진 Set이 공통요소가 없는지 여부 반환</li><li id="52f8"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/isSubsetOf" rel="noopener ugc nofollow" target="_blank">isSubsetOf</a>: 해당 Set의 모든 요소가 파라미터로 주어진 Set에 있는지 여부 반환(<strong>부분집합</strong>)</li><li id="b4db"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/isSupersetOf" rel="noopener ugc nofollow" target="_blank">isSupersetOf</a>: 파라미터로 주어진 Set의 모든 요소가 해당 Set에 속하는지 여부 반환.(<strong>상위집합</strong>)</li><li id="0ffa"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/intersection" rel="noopener ugc nofollow" target="_blank">intersection</a> <strong>:</strong> 해당 Set과 파라미터로 주어진 Set을 모두 포함하는 새 Set 반환(<strong>교집합</strong>)</li><li id="be1c"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/union" rel="noopener ugc nofollow" target="_blank">union</a> : 해당 Set과 파라미터로 주어진 Set 중 하나 또는 둘 다에 있는 요소를 포함하는 Set을 반환(<strong>합집합)</strong></li><li id="0135"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/symmetricDifference" rel="noopener ugc nofollow" target="_blank">symmetricDifference</a><strong>:</strong> 해당 Set과 주어진 Set 중 어느 하나에만 있는 요소를 포함하는 새 Set을 반환(합집합 — 교집합) 수학용어로는 <strong>대칭차</strong>(symmetric difference).</li></ul></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

Set객체를 주저하는 이들을 위하여
Set 객체는 값의 목록이다. 아래와 같이 생성자를 통해 만든다. 값은 Set의 목록안에서 고유한 값이다. add에 의해 추가된 순서대로 순회가능하다.(iterable)
const a = new Set([1, 2, 3]);
a.add(4); // 4가 추가됩니다. {1, 2, 3, 4}
a.add(3); // 중복된 값을 추가하면 아무일도 일어나지 않습니다.에러도 안남. {1, 2, 3, 4}
이 외에도 장점이 많다.
장점1 — 값에는 모든 유형이 가능하다.
값에는 모든 유형이 가능하다. 원시값 뿐만아니라 담고 싶은 모든것을 담을 수 있다.
const a = new Set([1, 2, 3]);
const obj = { "name": "jwahn" }
a.add(obj); 
console.log(a); // Set(4) {1, 2, 3, Object}
const HeadEle = document.getElementById('head');
a.add(HeadEle); 
console.log(a);// Set(5) {1, 2, 3, Object, div#head}
const symbol1 = Symbol();
a.add(symbol1);
console.log(a);// Set(6) {1, 2, 3, Object, div#head, Symbole() }
장점2 — 직관적인 기본 메서드/속성
let set = new Set();
set.add(5);    // 추가
set.has(5);    // 찾기
set.delete(5); // 삭제
set.clear();   // 전체 비우기
set.size;    // 현재 요소 개수, 메서드가 아니고 속성.
자주 사용되는 메서드 들이 직관적이어서 사용성이 높다.
장점3 — 값을 찾을 때 형변환이 없다.
형변환이 일어나는 아래 코드를 보자
const obj = { 0: 'zero'}
console.log(obj['0']); // 'zero'
객체의 키값을 비교할때 내부적으로 문자열로 형변환을 해서 비교를 하기 때문에 위와 같이 의도하지 않은 상황이 벌어질 수 있다.
Set 객체는 값을 비교할때 자동변환하지 않는다.
const set = new Set(0)
console.log(set.has('0')); // false
장점4 — 값을 찾을 때 배열에 비해 성능이 빠르다.
Set객체는 해시태이블 구조로 되어있어 기본 컬렉션보다 더 성능이 좋다고 알려져 있다. (참고)
장점5 — 배열 및 이터레이터로 쉽게 변환
배열로 쉽게 변환가능하다.
// Array.from
const set = new Set([1, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]
// Spread Operator
console.log([...set]); // [1, 2, 3]
keys() 또는 values()로 Set객체를 이터레이터로 변환할 수 있다.
const mySet = new Set(["foo", "bar", "baz"]);
const setIter = mySet.keys();
console.log(setIter.next().value); // "foo"
console.log(setIter.next().value); // "bar"
console.log(setIter.next().value); // "baz"
장점6 — 집합연산 용이함
두 가지 Set객체끼리 비교(집합연산)가 너무나도 용이하다.
difference: 해당 Set에는 있지만 파라미터로 주어진 Set에는 없는 요소의 집합 반환(차집합)
isDisjoinFrom: 해당 Set과 파라미터로 주어진 Set이 공통요소가 없는지 여부 반환
isSubsetOf: 해당 Set의 모든 요소가 파라미터로 주어진 Set에 있는지 여부 반환(부분집합)
isSupersetOf: 파라미터로 주어진 Set의 모든 요소가 해당 Set에 속하는지 여부 반환.(상위집합)
intersection : 해당 Set과 파라미터로 주어진 Set을 모두 포함하는 새 Set 반환(교집합)
union : 해당 Set과 파라미터로 주어진 Set 중 하나 또는 둘 다에 있는 요소를 포함하는 Set을 반환(합집합)
symmetricDifference: 해당 Set과 주어진 Set 중 어느 하나에만 있는 요소를 포함하는 새 Set을 반환(합집합 — 교집합) 수학용어로는 대칭차(symmetric difference).
주저하고 있는가, 한 번 시도해보시길.

JavaScript Set객체 활용하기

댓글