본문 바로가기

JavaScript

Set

Set의 사용법을 예시 코드와 함께 정리해보도록 하겠습니다. 

 

 

 

JavaScript의 주요 이터러블(배열, Set, Map)

JavaScript에는 배열, Set, Map라는 3개의 주요 이터러블 데이터 구조가 있습니다. 하나씩 정리해보도록 하겠습니다. 배열 JavScript의 주요 이터러블 중 가장 중요한 것은 가장 자주 작업하게 되는 구조

nicehyun12.tistory.com

 

Set
const ids = new Set();

Set은 항상 new를 사용하여 생성해주며 위와 같이 사용할 경우 빈 Set이 생성되게 됩니다.

 

 

const ids = new Set([1, 2, 3]);

위와 같이 기존의 이터러블을 전달하여 Set을 초기화시킬 수도 있습니다.

 

어떠한 이터러블이던지 전달이 가능합니다.

(배열, 또 다른 Set, 노드 리스트 등 가능합니다.)

 

결과로 인덱스를 확인할 수 있지만 이는 콘솔에서만 확인이 가능한 것이기 때문에 인덱스로 접근은 불가능합니다. 

 

 

const ids = new Set([1, 2, 3]);

console.log(ids.has(1)); // true 출력

대신  has() 메서드를 사용하여 인자로 찾을 값을 받아 Set에 있는지 없는지 확인이 가능합니다.

 

만약 값이 있다면 true, 없다면 false를 반환하게 되는데 이것을 이용해 if문 또는 삼항 연산자에서 사용할 수도 있습니다.

 

 

const ids = new Set([1, 2, 3]);

ids.add(2);

값을 추가할 때는 add() 메서드를 사용하여 값을 추가할 수 있습니다.

 

대신 Set의 특징인 중복을 허용하지 않는다는 점 때문에 추가하려는 값이 이미 Set에 있다면 더 이상 추가되지 않습니다.

 

 

const ids = new Set(["apple", "banana", "tomato"]);

for (const entry of ids.entries()) {
  console.log(entry);
}

entries() 메서드를 사용하면  이터러블을 반환합니다. 

 

이를 이용하여 for of 반복문에 사용할 수 있습니다. 

 

결과로 같은 과일이 2번씩 나온 것을 확인할 수 있는데 이는 entries() 메서드가 반환하는 것인데

 

이는 Map의  entries() 메서드와 일치해야 하기 때문이지 않을까 싶습니다.

 

Set과 Map이 같아야 Set을 Map으로 쉽게 바꿀 수 있고 이를 통해 다른 코드를 그대로 유지할 수 있기 때문입니다.

 

 

const ids = new Set(["apple", "banana", "tomato"]);

for (const entry of ids.values()) {
  console.log(entry);
}

만약 entries() 메서드처럼 중복된 값을 가진 이터러블을 반환하고 싶지 않다면 values() 메서드를 사용하시면 됩니다. 

 

 

 

const ids = new Set(["apple", "banana", "tomato"]);

ids.delete("banana");

console.log(ids);

delete() 메서드를 사용하면 Set에서 값을 지우는 것이 가능합니다.

 

 

 

 

참고

Set은 고유한 값을 관리할 때 유용합니다. 

 

만약 애플리케이션이 복잡한 애플리케이션이어서 로그인한 사용자가 이미 사용하고 있는 ID를 관리하고 싶다면 Set을 이용하여 ID를 추적하면 좋을 것입니다.

 

배열보다는 Set을 사용하면 하나의 ID가 Set에 한 번 이상 존재하지 않게 보장하고 길이가 길어지지 않게 보장하여 메모리를 많이 소비하거나 코드에서 다른 논리적인 오류를 낳지 않도록 할 것입니다.

 

이렇게 데이터의 고유함이 필요할 때 Set은 유용하게 사용할 수 있습니다.

 

'JavaScript' 카테고리의 다른 글

프로퍼티 추가 / 삭제  (0) 2022.09.13
Map  (0) 2022.09.11
JavaScript의 주요 이터러블(배열, Set, Map)  (0) 2022.09.10
배열 구조 분해(비구조화할당)  (2) 2022.09.10
Spread Operator - 전개 연산자  (0) 2022.09.10