[JavaScript] 자바스크립트에서 데이터 중복 없는 Set 사용하기

272_자바스크립트에서 데이터 중복 없는 Set 사용하기

[적용]

• 중복 없는 유저 ID 배열을 사용하고 싶을 때
• 여러 데이터에서 중복되는 값을 제외하고 싶을 때

---

[문법 1]

메소드	의미	반환
new Set(반복가능한객체*)	Set 객체 초기화	객체(Set)
세트.add(값)	값 등록	객체(Set)
세트.has(값)	값 존재 여부 확인	진리값
세트.delete(값)	값 삭제	진리값(삭제 여부)
세트.clear()	값 전체 삭제	없음
세트.values()	각 값을 반환	객체(Iterator)
세트.forEach(콜백)	각 값에 대한 처리 실행	없음

* 생략 가능

 

[문법 2]

속성	의미	타입
세트.size	요소의 수	숫자

---

[내용]

Set 객체는 여러 값을 다룬다. 하지만 배열이나 Objext와는 달리 인덱스(Index)와 키를 사용해 값에 접근할 수 없고 중복되는 값의 설정도 불가능한 것이 특징이다. 세트는 add()나 has()를 사용해 값을 추가하거나 존재 여부를 확인하며, 임의의 값 설정이 가능하다.

 

JavaScript       

// 세트 초기화
const userIdList = new Set();

// 세트 값 설정
userIdList.add(20);
userIdList.add(50);
userIdList.add(120);

// 다음과 같이 기술 가능
// userIdList.add(20).add(50).add(120);

// 해당 값 존재 여부 확인
console.log(userIdList.has(50));  // 결과: true

 

[값1, 값2]의 형태로 초기화 지정이 가능하다.

JavaScript        

const userIdList = new Set([20, 50, 120]);

 

values()를 사용해 각 값을 가져오며, 반복자 객체가 반환되므로 for...of 등을 사용해 처리할 수 있다.

JavaScript        

const memberSet = new Set(['사자', '호랑이', '사슴']);

const valueList = memberSet.values();

// '사자', '호랑이', '사슴' 순서로 출력
for (let value of valueList) {
  console.log(value);
}

 

forEach()도 사용할 수 있다.

JavaScript        

const userIdList = new Set([20, 50, 120]);

// 'ID는 20입니다.', 'ID는 50입니다.', ... 출력
userIdList.forEach((value) => {
  console.log(`ID는 ${value}입니다.`);
});

 

중복되는 동일한 값을 설정하면 해당 값은 무시된다.

JavaScript        

const userIdList = new Set([20, 40, 120]);

// 120 설정
userIdList.add(120);

// 스프레드(...) 연산자로 배열 반환
const userIdArray = [...userIdList];

// [20, 50, 120]
// '120'은 하나만 존재
console.log(userIdList);

 

size 속성으로 세트 내부 요소의 수를 확인할 수 있다.

JavaScript    

const userIdList = new Set([20, 50, 120]);

// 사이즈 가져오기
console.log(userIdList.size);  // 결과: 3

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김