Set & Map 객체

1Hoit·2023년 2월 13일
0

자바스크립트

목록 보기
16/25

Set 객체

Set 객체는 배열과 다음과 같은 차이가 있다.
1. 동일한 값을 중복할 수 없다.
2. 요소 순서에 의미가 없다.
3. 인덱스로 요소에 접근할 수 없다.

  • Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.
const setObj = array => [...new Set(array)];
console.log(setObj([2,1,3,2,1])); // [2,1,3]

const set = new Set([1,2,3]);
//요소 개수 확인시 size
console.log(set.size); //3
//요소 추가 add
set.add(4); // 
console.log(set); // Set(4) {1,2,3,4}
set.add(5).add(6);
console.log(set); // Set(4) {1,2,3,4,5,6}
//만약 중복된 값을 추가시에는 무시된다.
//요소 존재 확인 has
console.log(set.has(5)); // true
// 요소 삭제 delete
set.delete(5);
console.log(set.has(5)); // false
//요소 전체 삭제 clear
set.clear();
console.log(set) // Set(0) {}

Set 객체의 순회

  • forEach 메서드 사용
  • for .. of 문 사용
const set = new Set([1,2,3]);
//배열에서의 forEach 메서드와 인터페이스 통일을 위해
// 1번,2번 인수에 같은 값이 들어간다.
// 즉, v와 v2는 같은 값이다.
set.forEach( (v,v2,set) => console.log(v,v2,set) );
/*
1 1 Set(3) {1,2,3}
2 2 Set(3) {1,2,3}
3 3 Set(3) {1,2,3}
*/

//Set 객체는 Set. prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in set); // true

//이터러블인 Set 객체는 for ... of 문으로 순회 가능.
for (const value of set) {
console.log(value); // 1 2 3
}

//이터러블인 Set 객체는 스프레드 문법의 대상이 될 수 있다.
console. log([...set]); // [1, 2, 3]

추가적으로 Set 객체는 요소의 순서에 의미를 갖진 않지만
Set 객체를 순회하는 순서는 요소가 추가된 순서를 따른다.

Set 객체는 수학적 집합을 구현하기 위한 자료구조로
이를 통해 교집합, 합집합, 차집합 등을 구현할 수 있다.

//교집합 구하기
Set.prototype.intersection = function (set) {
  const result = new Set();
  for (const value of set) {
  //2개의 set의 요소가 공통되는 요소이면 교집합의 대상이다.
    if (this.has(value)) result.add(value);
  }
  return result;
};

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([2, 4]);
//setA와 setB의 교집합
console.log(setA.intersection(setB)); // Set (2) {2, 4}
//setB와 setA의 교집합
console.log(setB.intersection(setA)); // Set (2) {2, 4}

//아래와 같은 방법으로도 가능하다.
Set.prototype.intersection = function (set) {
return new Set([...this].filter(v => set.has (v)));
};

이밖의 합집합 차지합 등도 구할 수 있다.


Map 객체

  • 키와 값의 쌍으로 이루어진 컬렉션이다.

    Map 객체는 객체와 유사하지만 아래와 같은 차이가 있다.

    구분객체Map 객체
    문자열 또는 심벌값객체를 포함한 모든 값
    이터러블XO
    요소 개수 확인Object.keys(obj).lengthmap.size
  • Map 객체에는 중복된 키를 갖는 요소가 존재할 수 없다.
  • 이터러블을 전달 받으며 이터러블은 키 - 값의 쌍으로 이루어진 요소로 구성되어야 한다.
const map = new Map();
console.log(map); // Map(0) {}

//요소 추가 set
map.set('key1', 'value1').set('key2','value2');
console.log(map); // Map(2) {"key1"=>"value1","key2"=>"value2"}
// 요소 개수 확인
console.log(map.size); // 2
// 중복된 키를 갖는 요소 추가시 값이 덮어 써진다.
map.set('key2','value3');
console.log(map); // Map(2) {"key1"=>"value1","key2"=>"value3"}
// 키 타입에 제한이 없다.
map.set(0,'제한없음');
console.log(map); // Map(3) {"key1"=>"value1","key2"=>"value3", 0=>"제한없음"}
//요소 취득 get
console.log(map.get(0)); // 제한없음
// 요소 존재 여부 확인과 삭제 , 전체삭제는 Set과 같다. (has, delete, clear)
console.log(map.has(0)); // true

Map 객체의 순회

  • forEach 메서드 사용
  • for .. of 문 사용
 //배열에서의 forEach 메서드와 유사함.
// 1번 인수: 현재 순회중인 요소 값,2번 인수: 현재 순회중인 키.
// 3번 인수: 현재 순회중인 Map 객체 자체
const lee = { name: 'Lee' };
const kim = { name: 'Kim' };
const map = new Map([[lee, 'developer'], [kim, 'designer']]);
map.forEach((v, k, map) => console. log(v, k, map));
/*
developer {name: "Lee"} Map(2) {
{name: "Lee"} => "developer" {name: "Kim"} => "designer"
}
designer {name: "Kim"} Map(2) {
{name: "Lee"? =› "developer' {name: "Kim"} => "designer
*/

//Map 객체는 Map. prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in map); // true
//이터러블인 Map 객체는 for ... of 문으로 순회할 수 있다.
for (const entry of map) {
console. log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}

//이터러블인 Map 객체는 스프레드 문법의 대상이 될 수 있다.
console. log([ ... map]);
// [[{name: "Lee"}, "developer"], [{name: "Kim"}, "designer"]]

//이터러블인 Map 객체는 배열 디스트럭처링 할당의 대상이 될 수 있다.
const [a, b] = map;
console.log(a, b); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]

//Map.prototype.keys는 Map 객체에서 요소키를 값으로 갖는 이터레이터를 반환한다.
for (const key of map.keys )) {
console.log(key); // {name: "Lee"} {name: "Kim"}
}

//Map.prototype.values는 Map 객체에서 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const value of map.values ()) {
console.log(value); // developer designer
}

//Map.prototype.entries는 Map 객체에서 요소키와 요소값을 값으로 갖는 이터레이터를 반환한다.
for (const entry of map.entries()) {
console. log(entry); // [{name: "Lee"}, "developer"] [{name: "Kim"}, "designer"]
}

추가적으로 Map 객체는 요소의 순서에 의미를 갖진 않지만
Map 객체를 순회하는 순서는 요소가 추가된 순서를 따른다.

profile
프론트엔드 개발자를 꿈꾸는 원호잇!

0개의 댓글