Search
Duplicate

Set 오브젝트

1. Set 오브젝트 개요, new Set(), Set과 Map 비교

Set 오브젝트

value(값)의 컬렉션
[value1,,, valueN]형태로 작성
Set은 Map과 다르게 대괄호[]가 하나입니다.
작성한 순서대로 전개됩니다.
const obj = new Set([ 1, 2, "ABC" ]); console.log(`size: ${obj.size}`); for(let value of obj){ console.log(value); };
JavaScript
복사
[실행 결과]
size: 3 1 2 ABC

new Set()

Set 인스턴스 생성, 반환
파라미터에 값을 작성
Primitive, Object Type 사용이 가능합니다.
size 프로퍼티
Set 인스턴스의 엘리먼트 수를 반환합니다.
const obj = new Set([ 1, 2, 1, [], {}]); console.log(`size: ${obj.size}`); for(let value of obj){ console.log(value); };
JavaScript
복사
[실행 결과]
size: 4
1
2
[]
{}
1.
같은 값이 있으면 첫 번째의 1을 유지하며 세 번째의 1을 설정하지 않습니다.
2.
Same-Value-Zero 비교 알고리즘으로 비교합니다.
3.
obj.size는 세 번째의 1이 설정되지 않았기에 4가 됩니다.

Set과 Map 비교

저장 형태
Map: key와 value를 pair로 작성 [key, value]
Set: value만 작성하여 value를 key로 사용하여 [value]저장
값을 구하는 형태
Map: get(key)형태로 value를 구할수 있습니다.
Set: get()메소드가 없으며 값을 하나만 구할 수 없으며 반복이터레이터 사용

2. 값 설정, 추출 메소드: add(), has()

add()

Set 인스턴스 끝에 value를 추가합니다.
사용 형태
함수를 생성후 value로 사용
value에 생성한 함수 이름 작성
Object를 value로 사용
let obj = new Set(); obj.add("축구").add("농구"); obj.add("축구"); for(let value of obj){ console.log(value); }; let obj2 = new Set(); obj2.add(function sports(){return 100;}); obj2.add(function sports(){return 200;}); for(let value of obj2){ console.log(value()); }; const sports = () =>{return 100;}; let obj3 = new Set(); obj3.add(sports); obj3.add(sports); for(let value of obj3){ console.log(value()); }; const sports2 = {"축구": 11, "야구": 9}; let obj4 = new Set(); obj4.add(sports2); for(let value of obj4){ console.log(value); };
JavaScript
복사
1.
obj.add("축구").add("농구");
⇒ add()를 실행 후 인스턴스를 반환하기 때문에 method chain 형태가 가능합니다.
2.
obj.add("축구");
⇒ 이미 등록된 value(축구)이기 때문에 추가되지 않습니다.
3.
obj2.add(function sports(){return 100;}); obj2.add(function sports(){return 200;});
⇒같은 이름의 function 을 작성했지만 Function 오브젝트의 메모리 주소가 다르기 때문에 이름이 같더라도 설정됩니다.
4.
let obj3 = new Set(); obj3.add(sports);
⇒ Function 오브젝트로 생성한 뒤 sports에 할당하면 sports는 해당 오브젝트의 메모리 주소를 참조하기 때문에 동일한 value로 판단해 하나만 설정됩니다.
5.
obj4.add(sports2);
⇒ Object를 value로 설정할수도 있습니다.

has()

Set 인스턴스에서 값의 존재 여부를 반환합니다.
존재하면 true, 아니면 false 반환
get() 메소드가 없으므로 has()로 값의 존재여부를 체크한 뒤 존재하면 체크한 값을 값으로 사용합니다.
const sports = () =>{}; const obj= new Set([ sports]); console.log(obj.has(sports)); console.log(obj.has("book"));
JavaScript
복사
[실행 결과]
true
false

3. Set과 이터레이터 오브젝트: entries(), keys(), values(), Symbol.iterator()

Previous

Map 오브젝트와 유사하고 메소드 사용법인지라 간단한 스펙과 사용법만 작성합니다.

entries()

Set 인스턴스로 이터레이터 오브젝트를 생성 및 반환합니다.
Set 인스턴스에 설정된 순서로 반환하며 next()로 [value, value]로 반환합니다.
const obj = new Set([ "one", () =>{} ]); const iterObj = obj.entries(); console.log(iterObj.next()); console.log(iterObj.next()); console.log(iterObj.next());
JavaScript
복사
[실행 결과]
{value: ["one", "one"], done: false}done: false} {value: [()⇒{}, ()⇒{}], done: false} {value: undefined, done: true}
1.
value만 작성했는데 [value, value]가 반환되는 것은 Map오브젝트와 같은 모듈을 사용하기에 형태를 맞추기 위한 것으로 [key, value]에서 value를 key로 반환합니다.

keys()

value가 key가 되기에 keys()는 의미가 없으며 Map오브젝트와 맞추기 위한 것입니다.
Set 인스턴스의 value를 key로 사용하여 이터레이터 오브젝트를 생성, 반환합니다.
next()로 value(key) 반환합니다.
const obj = new Set([ "one", () =>{} ]); const iterObj = obj.keys(); console.log(iterObj.next()); console.log(iterObj.next()); console.log(iterObj.next());
JavaScript
복사
[실행 결과]
{value: "one", done: false} {value: ()⇒{}, done: false} {value: undefined, done: true}

values()

Set 인스턴스의 value로 이터레이터 오브젝트를 생성 및 반환합니다.
Set 인스턴스에 설정된 순서로 반환합니다.
next()로 value 반환
const obj = new Set([ "one", () =>{} ]); const iterObj = obj.values(); console.log(iterObj.next()); console.log(iterObj.next()); console.log(iterObj.next());
JavaScript
복사
[실행 결과]
{value: "one", done: false} {value: ()⇒{}, done: false} {value: undefined, done: true}

Symbol.iterator()

Set 인스턴스로 이터레이터 오브젝트를 생성 및 반환합니다.
Set.prototype.values()와 동일합니다.
next()로 value 반환합니다.
const obj = new Set([ "one", () =>{} ]); const iterObj = obj[Symbol.iterator](); console.log(iterObj.next()); console.log(iterObj.next()); console.log(iterObj.next());
JavaScript
복사
[실행 결과]
{value: "one", done: false} {value: ()⇒{}, done: false} {value: undefined, done: true}

4. 콜백 함수, 삭제 지우기: forEach(), delete(), clear()

Previous

Map 오브젝트와 유사하고 메소드 사용법인지라 간단한 스펙과 사용법만 작성합니다.

forEach()

Set 인스턴스를 반복하면서 callback 함수를 호출합니다.
map(), filter()등의 callback 함수가 동반되는 메소드는 사용이 불가능합니다.
callback 함수에 넘겨주는 파라미터
value, key(value), Set인스턴스
콜백 함수에서 this 사용
const obj = new Set([ "one", () =>{} ]); function callback(value, key, set){ console.log(`${value}, ${this.check}`); }; obj.forEach(callback, {check: 500});
JavaScript
복사
[실행 결과]
one, 500
() ⇒ {}, 500

delete()

Set 인스턴스에서 파라미터 값과 같은 엘리먼트를 삭제합니다.
같은 value가 있어 삭제에 성공하면 true를 반환하고 아니면 false를 반환합니다.
const obj = new Set([ "one", "two" ]); console.log(obj.delete("one")); console.log(obj.delete("one"));
JavaScript
복사
[실행 결과]
true
false

clear()

Set인스턴스의 모든 엘리먼트를 지웁니다.
이때 Set 인스턴스를 삭제하는 것은 아니기에 다시 value를 추가하여 사용 가능합니다.
const obj = new Set([ "one", "two" ]); obj.clear(); console.log(obj); console.log(obj.size); obj.add("three") console.log(obj.size); for(let value of obj){ console.log(value); }
JavaScript
복사
[실행 결과]
Set(0){}
0
1
three