[자바스크립트 ES6+ 기본] 23. Set 오브젝트

Speedwell🍀·2022년 2월 5일
0

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

0개의 댓글