Set는 JavaScript에서 내가 가장 좋아하는 내장 객체 유형 중 하나입니다. 오늘은 Set 객체를 소개하고 몇 가지 사용 사례에 대해 논의하겠습니다.

세트 객체

Set 개체는 고유한 기본 값 또는 개체 참조를 저장할 수 있는 개체입니다. 고유성이 핵심입니다. 기본 값이나 객체 참조를 여러 번 추가할 수 없습니다.

세트 사용 방법

세트를 사용하려면 세트의 새 인스턴스를 작성하십시오.

const mySet = new Set();

이제 빈 세트가 있습니다. 1 메서드를 사용하여 이 집합에 숫자add를 추가할 수 있습니다.

mySet.add(1);

1를 추가했는지 어떻게 알 수 있습니까? has 메서드를 사용하여 확인할 수 있습니다.

console.log(mySet.has(1));
// true

이제 개체 참조를 추가한 다음 Set 에 해당 개체가 있는지 확인하겠습니다.

const obj = { name: 'Daffodil' };
mySet.add(obj);
console.log(mySet.has(obj));
// true

개체 키 자체가 아니라 개체 참조가 비교된다는 점을 기억하십시오. 다시 말해:

console.log(mySet.has({ name: 'Daffodil' }));
// false

Set 속성을 사용하여 size에 몇 개의 요소가 있는지 확인할 수 있습니다.

console.log(mySet.size);
// 2

다음으로 delete 메서드를 사용하여 값을 제거해 보겠습니다.

mySet.delete(1);
console.log(mySet.has(1));
// false

마지막으로 Set 메서드를 사용하여 clear를 지웁니다.

mySet.clear();
console.log(mySet.size);
// 0

세트 반복

Set를 반복하는 가장 쉬운 방법은 forEach 메서드를 사용하는 것입니다.

new Set([1, 2, 3]).forEach(el => {
  console.log(el * 2);
});
// 2 4 6

Set 객체에는 각각 Iterators 을 반환하는 entries , keys 및 values 메서드도 있습니다. 그것들은 이 튜토리얼의 범위를 약간 벗어납니다!

야생에서 세트 사용하기

Set 개체는 개체와 관련된 이진 상태를 추적하는 데 정말 좋습니다. 좋은 예는 아코디언 메뉴입니다. 메뉴의 각 항목은 열리거나 닫힙니다. 아코디언 항목의 열린 상태를 추적하는 Set라는 isOpen와 열린 상태를 토글하는 toggle 함수를 만들 수 있습니다.

const isOpen = new Set();

function toggle(menuItem) {
  if (isOpen.has(menuItem)) {
    isOpen.delete(menuItem);
  } else {
    isOpen.add(menuItem);
  }
}

효율성 참고 사항

Set 개체가 배열과 매우 유사해 보인다고 생각할 수 있습니다. 그러나 애플리케이션에서 성능에 영향을 미칠 수 있는 큰 차이가 있습니다. Set 객체는 해시 테이블(또는 해시 테이블과 같은 효율성을 가진 메서드)을 사용하여 구현해야 합니다[1].

배열에 무언가를 저장할 때 항목을 찾기 위해 전체 배열을 탐색해야 할 수도 있습니다. 그러나 Set 를 사용하면 조회가 즉시 수행됩니다. 실질적으로 말해서 대부분의 경우 성능은 무시할 수 있지만 많은 수의 항목을 추적해야 하는 경우 기억하는 것이 좋습니다!

결론

이것이 Set 객체를 이해하는 데 도움이 되었기를 바랍니다. 이제 JavaScript 도구 벨트에 새 도구가 생겼습니다!


참고문헌

Set Object Specification