[자바스크립트 ES6+ 기본] 23. Set 오브젝트
Set 오브젝트
-
Set 오브젝트는
- value(값)의 컬렉션
-
[value1,,, valueN] 형태로 작성
- Set은 대괄호[]가 하나
const obj = new Set([
1, 2, "ABC"
]);
log(`size: ${obj.size}`);
for (let value of obj){
log(value);
};
// size: 3
// 1
// 2
// ABC
- 작성한 순서로 전개 됨
new Set()
- Set 인스턴스 생성, 반환
- 파라미터에 값을 작성
- 프리미티브, 오브젝트 타입 사용 가능
const obj = new Set([
1, 2, 1, [], {}
]);
log(`size: ${obj.size}`);
for (let size of obj){
log(value);
};
// size: 4
// 1
// 2
// []
// {}
-
size 프로퍼티
- Set 인스턴스의 엘리먼트 수를 반환
-
Set 오브젝트 구조
// Set 오브젝트 구조
const set = Set;
/*
1. Set 오브젝트에 Symbol(Symbol.species)가 있음
- 따라서, constructor를 오버라이드할 수 있음
2. prototype을 펼치면 Symbol.iterator가 있음
*/
const obj = new Set([
"one", "two"
]);
/*
1. 오른쪽의 obj를 펼치면 [[Entries]]가 있음
2. [[Entries]]를 펼치면 0: "one" 형태
3. 인덱스를 부여하여 key로 사용하고 "one", "two"를 value로 설정
4. 인덱스를 부여하는 구조는 Map과 같음
5. 인덱스를 부여하여 저장하므로 작성한 순서로 읽힘
*/
Set과 Map 비교
- 저장 형태
-
Map: key와 value 작성
- key를 key로 사용하여 [key, value]로 저장
-
Set: value만 작성
- value를 key로 사용하여 [value]로 저장
- 값을 구하는 형태
- Map: get(key) 형태로 value를 구할 수 있음
- Set: get() 메소드가 없음. 값 하나를 구할 수 없음. 반복으로 값을 구하거나 이터레이터 사용
값 추가, 존재 여부 체크 메소드
add()
- Set 인스턴스 끝에 value 추가
let obj = new Set();
obj.add("축구").add("농구");
obj.add("축구");
for (let value of obj){
log(value);
};
// 축구
// 농구
- 사용 형태
- 함수를 생성하여 value로 사용
- value에 생성한 함수 이름 작성
- Object를 value로 사용
// 함수를 생성하여 value로 사용
let obj = new Set();
obj.add(function sports(){ return 100; });
obj.add(function sports(){ return 200; });
for (let value of obj) {
log(value());
};
// 100
// 200
// value에 생성한 함수 이름 작성
const sports = () => { return 100; };
let obj = new Set();
obj.add(sports);
obj.add(sports);
for (let value of obj){
log(value());
};
// 100
// Object를 value로 사용
const sports = {
"축구": 11, "야구": 9
};
let obj = new Set();
obj.add(sports);
for (let value of obj){
log(value);
};
// {축구: 11, 야구: 9}
has()
- Set 인스턴스에서 값의 존재 여부를 반환
- 존재하면 true, 아니면 false 반환
const sports = () => {};
const obj = new Set([
sports
]);
log(obj.has(sports));
log(obj.has("book"));
// true
// false
- get() 메소드가 없으므로
- has()로 값의 존재 여부를 체크한 후 존재하면 체크한 값을 값으로 사용
Set과 이터레이터 오브젝트
entries()
- Set 인스턴스로 이터레이터 오브젝트 생성, 반환
- Set 인스턴스에 설정된 순서로 반환
- next()로 [value, value] 반환
const obj = new Set([
"one", () => {}
]);
const iterObj = obj.entries();
log(iterObj.next());
log(iterObj.next());
log(iterObj.next());
// {value: [one,one], done: false}
// {value: [() => {},() => {}], done: false}
// {value: undefined, done: true}
keys()
-
value가 key가 되므로
- keys()는 의미가 없음
- Map 오브젝트와 맞추기 위한 것
-
Set 인스턴스의 value를 key로 사용하여 이터레이터 오브젝트 생성, 반환
- Set 인스턴스에 설정된 순서로 반환
-
next()로 value(key) 반환
const obj = new Set([
"one", () => {}
]);
const iterObj = obj.keys();
log(iterObj.next());
log(iterObj.next());
log(iterObj.next());
// {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();
log(iterObj.next());
log(iterObj.next());
// {value: one, done: false}
// {value: () => {}, done: false}
// {values: undefined, done: true}
Symbol.iterator()
- Set 인스턴스로 이터레이터 오브젝트 생성, 반환
- Set.prototype.values()와 같음
- next()로 value 반환
const obj = new Set([
"one", () => {}
]);
const iter = obj[Symbol.iterator]();
log(iter.next());
log(iter.next());
log(iter.next());
// {value: one, done: false}
// {value: () => {}, done: false}
// {value: undefined, done: true}
콜백 함수, 삭제, 지우기
forEach()
- Set 인스턴스를 반복하면서 callback 함수 호출
- map(), filter() 등의 callback 함수가 동반되는 메소드 사용 불가
- callback 함수에 넘겨주는 파라미터
- value, key(value), Set 인스턴스
- 콜백 함수에서 this 사용
// value, key(value), Set 인스턴스
const obj = new Set([
"one", () => {}
]);
function callback(value, key, set){
log(value);
};
obj.forEach(callback);
// one
// () => {}
// 콜백 함수에서 this 사용
const obj = new Set([
"one", "two"
]);
function callback(value, key, set){
log(`${value}, ${this.check}`);
};
obj.forEach(callback, {check: "ABC"});
// one, ABC
// two, ABC
delete()
-
Set 인스턴스에서 파라미터 값과 같은 엘리먼트 삭제
-
같은 value가 있어 삭제에 성공하면 true 반환
- 삭제에 실패하면 false 반환
const obj = new Set([
"one", "two"
]);
log(obj.delete("one"));
log(obj.delete("one"));
// true
// false
clear()
- Set 인스턴스의 모든 엘리먼트를 지움
- Set 인스턴스를 삭제하는 것은 아님
- 따라서 value를 추가할 수 있음
const obj = new Set([
"one", "two"
]);
log(obj.size);
obj.clear();
log(obj.size);
obj.add("one");
log(obj.size);
// 2
// 0
// 1
Author And Source
이 문제에 관하여([자바스크립트 ES6+ 기본] 23. Set 오브젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@bbirong/자바스크립트-ES6-기본-23.-Set-오브젝트
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Set 오브젝트는
- value(값)의 컬렉션
[value1,,, valueN] 형태로 작성
- Set은 대괄호[]가 하나
const obj = new Set([
1, 2, "ABC"
]);
log(`size: ${obj.size}`);
for (let value of obj){
log(value);
};
// size: 3
// 1
// 2
// ABC
- 파라미터에 값을 작성
- 프리미티브, 오브젝트 타입 사용 가능
const obj = new Set([
1, 2, 1, [], {}
]);
log(`size: ${obj.size}`);
for (let size of obj){
log(value);
};
// size: 4
// 1
// 2
// []
// {}
size 프로퍼티
- Set 인스턴스의 엘리먼트 수를 반환
Set 오브젝트 구조
// Set 오브젝트 구조
const set = Set;
/*
1. Set 오브젝트에 Symbol(Symbol.species)가 있음
- 따라서, constructor를 오버라이드할 수 있음
2. prototype을 펼치면 Symbol.iterator가 있음
*/
const obj = new Set([
"one", "two"
]);
/*
1. 오른쪽의 obj를 펼치면 [[Entries]]가 있음
2. [[Entries]]를 펼치면 0: "one" 형태
3. 인덱스를 부여하여 key로 사용하고 "one", "two"를 value로 설정
4. 인덱스를 부여하는 구조는 Map과 같음
5. 인덱스를 부여하여 저장하므로 작성한 순서로 읽힘
*/
-
Map: key와 value 작성
- key를 key로 사용하여 [key, value]로 저장
-
Set: value만 작성
- value를 key로 사용하여 [value]로 저장
- Map: get(key) 형태로 value를 구할 수 있음
- Set: get() 메소드가 없음. 값 하나를 구할 수 없음. 반복으로 값을 구하거나 이터레이터 사용
let obj = new Set();
obj.add("축구").add("농구");
obj.add("축구");
for (let value of obj){
log(value);
};
// 축구
// 농구
- 함수를 생성하여 value로 사용
- value에 생성한 함수 이름 작성
- Object를 value로 사용
// 함수를 생성하여 value로 사용
let obj = new Set();
obj.add(function sports(){ return 100; });
obj.add(function sports(){ return 200; });
for (let value of obj) {
log(value());
};
// 100
// 200
// value에 생성한 함수 이름 작성
const sports = () => { return 100; };
let obj = new Set();
obj.add(sports);
obj.add(sports);
for (let value of obj){
log(value());
};
// 100
// Object를 value로 사용
const sports = {
"축구": 11, "야구": 9
};
let obj = new Set();
obj.add(sports);
for (let value of obj){
log(value);
};
// {축구: 11, 야구: 9}
- 존재하면 true, 아니면 false 반환
const sports = () => {};
const obj = new Set([
sports
]);
log(obj.has(sports));
log(obj.has("book"));
// true
// false
- has()로 값의 존재 여부를 체크한 후 존재하면 체크한 값을 값으로 사용
- Set 인스턴스에 설정된 순서로 반환
- next()로 [value, value] 반환
const obj = new Set([
"one", () => {}
]);
const iterObj = obj.entries();
log(iterObj.next());
log(iterObj.next());
log(iterObj.next());
// {value: [one,one], done: false}
// {value: [() => {},() => {}], done: false}
// {value: undefined, done: true}
value가 key가 되므로
- keys()는 의미가 없음
- Map 오브젝트와 맞추기 위한 것
Set 인스턴스의 value를 key로 사용하여 이터레이터 오브젝트 생성, 반환
- Set 인스턴스에 설정된 순서로 반환
next()로 value(key) 반환
const obj = new Set([
"one", () => {}
]);
const iterObj = obj.keys();
log(iterObj.next());
log(iterObj.next());
log(iterObj.next());
// {value: one, done: false}
// {value: () => {}, done: false}
// {value: undefined, done: true}
Set 인스턴스의 value로 이터레이터 오브젝트 생성, 반환
- Set 인스턴스에 설정된 순서로 반환
next()로 value 반환
const obj = new Set([
"one", () => {}
]);
const iterObj = obj.values();
log(iterObj.next());
log(iterObj.next());
// {value: one, done: false}
// {value: () => {}, done: false}
// {values: undefined, done: true}
- Set.prototype.values()와 같음
- next()로 value 반환
const obj = new Set([
"one", () => {}
]);
const iter = obj[Symbol.iterator]();
log(iter.next());
log(iter.next());
log(iter.next());
// {value: one, done: false}
// {value: () => {}, done: false}
// {value: undefined, done: true}
- map(), filter() 등의 callback 함수가 동반되는 메소드 사용 불가
- value, key(value), Set 인스턴스
- 콜백 함수에서 this 사용
// value, key(value), Set 인스턴스
const obj = new Set([
"one", () => {}
]);
function callback(value, key, set){
log(value);
};
obj.forEach(callback);
// one
// () => {}
// 콜백 함수에서 this 사용
const obj = new Set([
"one", "two"
]);
function callback(value, key, set){
log(`${value}, ${this.check}`);
};
obj.forEach(callback, {check: "ABC"});
// one, ABC
// two, ABC
Set 인스턴스에서 파라미터 값과 같은 엘리먼트 삭제
같은 value가 있어 삭제에 성공하면 true 반환
- 삭제에 실패하면 false 반환
const obj = new Set([
"one", "two"
]);
log(obj.delete("one"));
log(obj.delete("one"));
// true
// false
- Set 인스턴스를 삭제하는 것은 아님
- 따라서 value를 추가할 수 있음
const obj = new Set([
"one", "two"
]);
log(obj.size);
obj.clear();
log(obj.size);
obj.add("one");
log(obj.size);
// 2
// 0
// 1
Author And Source
이 문제에 관하여([자바스크립트 ES6+ 기본] 23. Set 오브젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bbirong/자바스크립트-ES6-기본-23.-Set-오브젝트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)