[JavaScript] JS 의 내장객체 Set

프로그래머스 문제를 풀던 중 나는 보통 순수 array와 object의 형태로 푸는 경우가 많은데

중복이 허용되지 않는 배열 혹은 객체를 활용하는 어떤 문제에서 new Set()을 많은 사람이 사용하는 것을 확인했다. 

코딩테스트를 비롯해 여러 방면에 활용도가 높다고 생각해서 정리하기로 했다. 

 

---

📌 Set이란?

>>mdn 참고

 

 

Set - JavaScript | MDN

 

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다.

Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일합니다.

 

 

글만 읽어서는 잘 이해가 되지 않았으나, 

직접 코드를 찍어보면서 특성을 익혀보고자 한다.

 

---

📌실습코드 

var myArray = ['value1', 'value2', 'value3', 'value3','value2'];
var obj={1:'111',2:'222',3:'333',1:'111111',asdf:'asdf',asdf:'asdf',asdf:'asdf1234'}

// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용
//var mySet2= new Set(obj) //error -> obj 는 iterable하지 않기 때문이다. 
var mySet = new Set(myArray); // Set {'value1', 'value2','value3'}형태
mySet.add(obj) // Set {'value1', 'value2','value3',{1:'111111',2: ...}}형태
		//-> 다만 Set은 중복을 허가하지 않기에 키가 같은 asdf중에서 하나만 포함되며 가장 마지막의 asdf키의 value인 'asdf1234'가 들어감  
mySet.add(1) // 위의 Set{} 마지막에 추가됨 -> Set {'value1', 'value2' ... ,1 }

mySet.has('value1'); // true 반환

// set을 Array로 변환하기 위해 전개 연산자 사용함.
console.log(mySet[0])  // undefined
console.log([...mySet]); // 위에 Set {}형태를 array형태로 바꿔줌
console.log([...mySet][3]); //인덱스에 해당하는 객체만 뽑아줄 수 있으며 { 1: '111111', 2: '222', 3: '333', asdf: 'asdf1234' }
console.log([...mySet][3]['asdf']);  //객체의 키에 접근해서 value만 뽑을수도 있음 -> 'asdf1234'출력

특징정리 

1) new Set()

Set 함수를 선언하기 위해서는 일반적으로 new Set() 혹은 new Set(Array)의 형태를 사용한다. 

2) mySet.add()

Set.add(value)로 set에 원하는 value를 추가할 수 있다. 또한 Set.add(object)으로 Set에 객체 형태를 추가하면 key가 중복되면 하나만 남고 가장 마지막 value로 덮어써지는 것을 확인할 수 있다. 

3) mySet.delete()

mySet.delete(value) 를 통해서 set에서 value를 삭제할 수 있다. 

4) mySet.has()

mySet.has('value1')에서 알 수 있듯 element가 Set에 있는지 확인하고 True/False를 반환한다. 

5)[ ...set ]

[...mySet]과 같이 spread 연산자로 풀어서 Array형태로 바꿀 수 있으며 

만약 set내에 객체 형태가 들어있다면 [...mySet][3]['asdf']처럼 따로 뽑아서 각 key를 이용해 value값에 접근할 수 있다.