JavaScript Set object란 무엇인가?

1. JavaScript Set object란?

ES6은 모든 유형의 고유 값 모음을 저장하는 Set이라는 새로운 유형을 제공합니다. 새 빈 집합을 만들려면 다음 구문을 사용합니다.

 

let setObject = new Set();

 

Set 생성자는 또한 선택적 반복 가능한 객체를 허용합니다. 반복 가능한 객체를 Set 생성자에 전달하면 반복 가능한 객체의 모든 요소가 새 집합에 추가됩니다.

let setObject = new Set(iterableObject);

 

2. Useful Set methods 유용한 Set 메소드

Set 개체는 다음과 같은 유용한 메서드를 제공합니다.

 

• add(value) – 지정된 값을 가진 새 요소를 집합에 추가합니다. Set 개체를 반환하므로 이 메서드를 다른 Set 메서드와 연결할 수 있습니다.
• clear() – Set 객체에서 모든 요소를 제거합니다.
• delete(value) – 값으로 지정된 요소를 삭제합니다.
• entries() - [value, value] 배열을 포함하는 새 Iterator를 반환합니다.
• forEach(callback [, thisArg]) – 각 호출에서 this 값을 thisArg로 설정하여 Set의 각 요소에 대한 콜백을 호출합니다.
• has(value) – 주어진 값을 가진 요소가 집합에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.
• keys() – values() 함수와 동일합니다.
• [@@iterator] – 삽입 순서에 저장된 모든 요소의 값을 포함하는 새 Iterator 객체를 반환합니다.

 

3. Set examples

1) 배열에서 Set 생성

다음 예제는 배열에서 새 집합을 만드는 방법을 보여줍니다.

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

세트의 모든 요소는 고유해야 하므로 문자에는 3개의 개별 요소 a, b 및 c만 포함됩니다.

console.log(chars);

Output:

Set { 'a', 'b', 'c' }

문자에 typeof 연산자를 사용하면 객체를 반환합니다.

console.log(typeof(chars));

Output:

object

chars set은 Set 유형의 인스턴스이므로 다음 명령문은 true를 반환합니다.

let result = chars instanceof Set;
console.log(result);

 

2) Set 크기 가져오기

집합이 보유하는 요소의 수를 얻으려면 Set 객체의 size 속성을 사용합니다.

let size = chars.size;
console.log(size);//  3

 

3) Set 객체에 요소(elements) 추가하기

집합에 요소를 추가하려면 add() 메서드를 사용합니다.

chars.add('d');
console.log(chars);

Output:

Set { 'a', 'b', 'c', 'd' }

add() 메서드는 연결 가능하므로 chain 문을 사용하여 집합에 여러 항목을 추가할 수 있습니다.

chars.add('e')
     .add('f');

 

4) Set객체에 Value 값 체크하기

집합에 특정 요소가 있는지 확인하려면 has() 메서드를 사용합니다. has() 메서드는 집합에 요소가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. chars 세트에 'a'가 포함되어 있으므로 다음 명령문은 true를 반환합니다.

let exist = chars.has('a');
console.log(exist);// true

다음 문은 chars 세트에 'z' 값이 포함되어 있지 않기 때문에 false를 반환합니다.

exist = chars.has('z');
console.log(exist); // false

 

5) Set객체의 요소(element) 삭제(delete)하기

집합에서 지정된 요소를 삭제하려면 delete() 메서드를 사용합니다. 다음 명령문은 chars 세트에서 'f' 값을 삭제합니다.

chars.delete('f');
console.log(chars); // Set {"a", "b", "c", "d", "e"}

Output:

Set { 'a', 'b', 'c', 'd', 'e' }

delete() 메서드는 요소가 성공적으로 제거되었음을 나타내는 true를 반환합니다. 세트의 모든 요소를 삭제하려면 clear() 메서드를 사용합니다.

chars.clear();
console.log(chars); // Set{}

 

6) Set객체의 반목문사용하기

Set 개체는 요소의 삽입 순서를 유지하므로 요소를 반복할 때 요소의 순서는 삽입된 순서와 동일합니다. 다음과 같은 사용자 역할 집합이 있다고 가정합니다.

let roles = new Set();
roles.add('admin')
    .add('editor')
    .add('subscriber');

다음 예제에서는 for…of 루프를 사용하여 문자 집합을 반복합니다.

for (let role of roles) {
    console.log(role);
}

Output:

admin
editor
subscriber

Set은 또한 Map과 같은 keys(), values() 및 entries() 메서드를 제공합니다. 그러나 Set의 키와 값은 동일합니다. 예를 들어:

for (let [key, value] of roles.entries()) {
    console.log(key === value);
}

Output:

true
true
true

 

7) Set객체 각 요소에 대해 콜백 함수 호출하기

집합의 모든 요소에 대해 콜백을 호출하려면 forEach() 메서드를 사용할 수 있습니다.

roles.forEach(role => console.log(role.toUpperCase()));

 

4. WeakSets

WeakSet은 객체만 포함한다는 점을 제외하면 Set과 유사합니다. WeakSet의 개체는 자동으로 가비지 수집될 수 있으므로 WeakSet에는 크기 속성이 없습니다. WeakMap과 마찬가지로 WeakSet의 요소를 반복할 수 없으므로 WeakSet은 실제로 거의 사용되지 않습니다. 실제로 WeakSet을 사용하여 지정된 값이 집합에 있는지 확인합니다. 다음은 예입니다.

let computer = {type: 'laptop'};
let server = {type: 'server'};
let equipment = new WeakSet([computer, server]);

if (equipment.has(server)) {
    console.log('We have a server');
}

Output:

We have a server

 

 

 

 

Referance: https://www.javascripttutorial.net/es6/javascript-set/