개발야옹

Set Object in JS

Set은 Javascript 표준 내장 객체로, 원시값(primitive)과 객체 참조 모두 유일한 값을 저장할 수 있다.

Array와 다르게 중복된 값을 허용하지 않는다.

const set = new Set();

console.log(typeof set); // object
console.log(set); // Set(0){ size : 0 }

Set의 type은 object이며, Set의 내장 메서드는 아래와 같다.

1. Set.prototype.add() : set에 값 추가한다.
2. Set.prototype.clear() : set을 비워준다.
3. Set.prototype.delet() : set에서 특정 값을 삭제한다.
4. Set.prototype.entries() 
5. Set.prototype.forEach()
6. Set.prototype.has()
7. Set.prototype.keys()
8. Set.prototype.values()

Set.prototype.add(value) : Set 값 추가하기

const set = new Set();
set.add(1);
set.add('string');
set.add(['a','r','r','a','y']);
set.add({ "0" : "object" });

console.log(set); // Set(4) { 1, 'string', Array(5), {...} }

set에는 객체(object), 배열(array), 숫자(number), 문자열(string)등 다양한 값을 추가할 수 있다.

Set.prototype.clear() : Set 비워주기

const set = new Set();
set.add(1);
set.add(2);

console.log(set); // Set(2) { 1, 2 }

set.clear();
console.log(set); // Set(0) {size : 0}

Set.prototype.delete(value) : Set  특정 값 삭제하기

return false or true ( 삭제 성공 시 true, 삭제 실패 시 false )

const set = new Set();
set.add(1);
set.add('string');
set.add(['a','r','r','a','y']);
set.add({ "0" : "object" });

console.log(set); // Set(4) { 1, 'string', Array(5), {...} }

set.delete("string"); // true
set.delete("string"); // false

console.log(set); // Set(3) { 1, Array(5), {...} }

Set.prototype.entries() : Set 순회하기

entries() method는 Set 객체의 각각의 요소를 삽입순서대로 [ 값, 값 ]의 형태로 가진 배열의 새로운 iterator 객체를 반환한다.

Set 객체에는 Map 객체처럼 Key가 존재하지 않는다. 그러나 Map 객체의 API와 비슷하게 유지하기 위해, 각각의 "요소"는 "키"와 "값"자리에 같은 값을 가지게 된다. 결과적으로 entries는 [ 값, 값 ] 형태의 배열을 반환한다. 

const set = new Set();

set.add(1);
set.add(2);
set.add(3);

const iterator = set.entries();

console.log(iterator);
// output : SetIterator {1 => 1, 2 => 2, 3 => 3}

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

// output 
// [1, 1]
// [2, 2]
// [3, 3]

console.log(iterator); // SetIterator {}
// output : undefined

for .. of .. 문법으로 entries() 함수로 반환된 iterator를 순회하면서 console.log()로 찍어본 결과 [ 값, 값 ] 의 형태로 set에 추가했던 1, 2, 3이 순서대로 나오는 것을 확인할 수 있다. 

이후 iterator를 다시 console.log()로 확인해보면 해당 iterator가 비어있는 것을 확인할 수 있다.

이것은 iteration protocols 를 확인해보면 더 자세히 알 수 있다.

쉽게 생각하면 iterator는 한번 가리켰던 value는 다음 value를 가리키게 되는 순간 다시 바라볼 수 없다. 즉 한번 순회하면 다시 반복할 수 없는 것이다.

 iterator에 우리가 set에 값을 넣은 순서대로 [1,1], [2,2], [3,3]이 들어있다. 처음에 iterator는 [1,1]을 가리키고있다. 다음에 [2,2]를 가리키게 되면 iterator에서 [1,1]은 사라지고 [2,2], [3,3]만 남아있다. 

아래 코드를 통해서 확인할 수 있다.

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

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

// output
// [1,1]
// SetIterator {2 => 2, 3 => 3}

// [2,2]
// SetIterator {3 => 3}

// [3,3]
// SetIterator {}

Set.prototype.forEach(callbackFunction) : Set 반복하기

set의 forEach method는 Array의 forEach method와 동일하다.

set의 value들을 순차적으로 한번씩 순회한다. forEach대신 위에서 사용했던 for..of를 사용해서도 set을 반복할 수 있다.

const set = new Set();

set.add(1);
set.add(2);
set.add(3);

set.forEach((s)=>{
	console.log(s);
});

// output : 
// 1
// 2
// 3

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

// output : 
// 1
// 2
// 3

Set.prototype.has(value) : Set에 특정 value 존재 여부 확인하기

Set 객체에 특정 value가 존재하는지 확인하기 위한 함수이다. 특정 value가 존재한다면 true, 존재하지 않는다면 false를 반환한다.

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(set.has(1)); // true
console.log(set.has(4)); // false

Set.prototype.values() : Set의 value iterator 반환한다. 

Set 객체의 value들에 대한 iterator를 반환한다.

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

let valueIterator = set.values();

console.log(valueIterator); // SetIterator {1, 2, 3}

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

// output
// 1
// 2
// 3

valueIterator = set.values();

console.log(valueIterator.next()); // {value: 1, done: false}
console.log(valueIterator.next()); // {value: 2, done: false}
console.log(valueIterator.next()); // {value: 3, done: false}
console.log(valueIterator.next()); // {value: undefined, done: true}

next()는 iterator의 method이다. 참고

Set.prototype.keys() : Set의 key iterator 반환한다. 

❗️Set object에서는 keys() 메서드와 values() 메서드는 동일한 기능을 한다. 왜냐하면 Set 객체의 경우 value 값을 키값으로 사용하기 때문에 [ key, value ] 쌍의 값으 [ value, value]와 동일하기 때문이다.

const set = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(set.keys());
// output : SetIterator {1, 2, 3, 'string'}