SPACE RUMI

Hi, I am rumi. Let's Splattack!

[STUDY] 스터디/Deep Dive JS

js Set과 Map

백루미 2023. 1. 14. 05:29
반응형

Set

중복되지 않는 값들의 집합. 배열과 유사하지만, 값이 중복될수없고, 순서에 의미가 없으며 인덱스로 접근할수없다.
교집합, 합집합, 차집합, 여집합 등을 구현할수있다.

set 객체는 이터러블이다
for ... of로 순회 가능하며 스프레드, 디스트럭처링의 대상이 될수있다.

new 연산자와 함께 Set 생성자 함수로 생성한다.

const set = new Set();
console.log(set) // Set(0) {size: 0}

const set1 = new Set([1,2,3,3,3]);
console.log(set1) // Set(3) {1, 2, 3}
// 중복제거 함수
const uniq = (arr) => arr.filter((item, idx, self) => self.indexOf(item) === idx);
uniq([1,2,1,2,1,2,3]) // [1,2,3]

// Set을 사용한 중복제거
const uniq = (arr) => [...new Set(arr)]
uniq([1,2,1,2,1,2,3]) // [1,2,3]

 

Set.prototype.size
set의 요소 갯수를 확인한다.

const set = new Set([1,2,3,4]);
console.log(set.size) //4

 

Set.prototype.add
set의 요소를 추가할 수 있다. add를 이어서 호출 가능.
객체나 배열과 같이 JS의 모든 값을 요소로 저장할 수 있다.

const set = new Set([1,2,3,4]);
console.log(set.add(5).add(6).add(7)) // Set(5) {1, 2, 3, 4, 5}

set.add(1).add([]).add(null).add(undefined)

 

Set.prototype.has
요소가 있는지 확인한다. 있으면 true, 없으면 false

const set = new Set([1,2,3,4]);
set.has(4) //true

 

Set.prototype.delete
요소를 삭제한다. 인수로 삭제할 값을 전달한다.
add처럼 이어서 호출 할 수 없다.

const set = new Set([1,2,3,4]);
set.delete(2) // true 삭제 성공여부를 나타내는 불리언 반환

console.log(set) // Set(3) {1, 3, 4}

 

Set.prototype.clear
요소를 일괄삭제한다. 언제나 undefined를 반환한다.

const set = new Set([1,2,3,4]);
set.clear() // Set(0) {size: 0}

 

Map

키와 값의 쌍으로 이루어진 컬렉션.
Map은 객체와 유사하지만, 키로 모든 값을 사용할수있으며 이터러블이라는 차이가 있다.

new 연산자와 함께 Map 생성자 함수로 생성한다.

const map = new Map();
console.log(map); // Map(0) {size: 0}

 

이터러블을 인수로 전달받아 Map 객체를 생성한다.
전달하는 인수인 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야한다.
중복된 키를 갖는 요소는 존재할수없다.

const map2 = new Map([1, 2]) // Iterator value 1 is not an entry object

const map2 = new Map([['key1', 'value1']])
console.log(map2) // Map(1) {'key1' => 'value1'}

 

Map.prototype.size
요소의 개수를 알수있다.

Map.prototype.set
요소를 추가할 수 있다. 연속적으로 호출할 수 있다. 중복된 키를 갖는 요소를 추가하면 값이 덮어 써진다.
키값에 객체를 사용할수있다.

const map = new Map();

map.set('key', 'value') // Map(1) {'key' => 'value'}

map.set('key', 'value').set('key2', 'value2').set({name:'rumi'}, 'rumi rumi')

 

Map.prototype.get
요소를 취득할수있다.

const map = new Map();
const rumi = {name:'rumi'};

map.set(rumi,'rumirumi')

map.get(map) // 'rumirumi'

 

Map.prototype.has
요소가 존재하는지 확인할수있다.

Map.prototype.delete
요소를 삭제한다.

Map.prototype.clear
요소를 일괄삭제한다.

Map.prototype.keys(), Map.prototype.values(), Map.prototype.entries() 를 통해
for ... of 문 내에서 이터레이터를 반환받을수있다.

const rumi = {name:'rumi'};
const ray = {name:'ray'};

const map = new Map([[rumi, 'FE'],[ray, 'BE']])

for (const key of map.keys()){
	console.log(key) 
}

// {name: 'rumi'}
// {name: 'ray'}

 

반응형