Map & Set

rlorxl·2022년 2월 2일

Javascript

목록 보기

6/12

Map

다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장할 수 있는 Collection
Object대비 비교해 다양한 key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 가능하다.

메서드

생성자 : new Map()
개수 확인 : Map.size()
요소 추가 : Map.set(key,value)
요소 접근 : Map.get(key)
요소 삭제 : Map.delete(key)
전체 삭제 : Map.clear()
요소 존재 여부 확인 : Map.has(key)
그 밖의 메서드 : Map.keys() Map.values() Map.entires()

let map = new Map();

map.set("name", "john"); //string key
map.set(123, 456); //number key
map.set(true, "bool_type"); //boolean key

console.log(map);
console.log(map.get(123));
console.log(map.get("name"));
console.log(map.size);

map.clear();
console.log(map);
map.set("name", "alice").set(123, 789).set(false, "bool_type); // map.set 호출 시 map이 반환되므로 체이닝(chaining)이 가능하다.
console.log(map);

--- 결과

Map(3) { 'name' => 'john', 123 => 456, true => 'bool_type' }
456
john
3
Map(0) {}
Map(3) { 'name' => 'alice', 123 => 789, false => 'bool_type' }

Map 반복문

collection 객체인 Map이 가지고 있는 iterotor 속성을 이용하여 for...of 구문을 통해 반복문 수행이 가능하다.

let recipe_juice = new Map([
	["strawberry", 50],
  	["banana", 100],
  	["ice", 150],
]);

for(let item of recipe_juice.keys()) console.log(item);
for(let amount of recipe_juice.values()) console.log(amount);
for(let entity of recipe_juice) console.log(entity);

console.log(recipe_juice.entries());

--- 결과

strawberry banana ice
50 100 150
[ 'strawberry', 50] [ 'banana', 100 ] [ 'ice', 150 ]
[Map Entries] {
	[ 'strawberry', 50],
    [ 'banana', 100 ],
    [ 'ice', 150 ]
}

forEach()를 사용한 반복문

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

myMap.forEach(function(value, key){
	console.log(key + '=' + value)
})

--- 결과

0 = zero
1 = one

Map <-> Object 변환

Object.fromEntries(Map)
Object.entries(Object)

let recipe_juice = new Map([
	["strawberry", 50],
  	["banana", 100],
  	["ice", 150],
]);

// Map -> object
let recipe_juice_obj = Object.fromEntries(recipe_juice);
// object -> key, value
let recipe_juice_kv = Object.entries(recipe_juice_obj);
// key, value -> Map
let recipe_juice_map = new Map(recipe_juice_kv);

console.log(recipe_juice);
console.log(recipe_juice_obj);
console.log(recipe_juice_kv);
console.log(recipe_juice_map);

--- 결과

Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }
{ strawberry: 50, banana: 100, ice: 150 }
[ [ 'strawberry', 50 ], [ 'banana', 100 ], [ 'ice', 150 ] ]
Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

Set

value만을 저장하며 중복을 허용하지 않는 Collection

생성자 : new Set()
개수 확인 : Set.size
요소 추가 : Set.add(value)
요소 삭제 : Set.delete(value)
전체 삭제 : Set.clear()
요소 존재 여부 확인 : Set.has(key)
그 밖의 메서드Set.keys() Set.values() Set,entires()

let set = new Set();
let num = new Set([1, 2, 3, 4, 5]);
let str = new Set("Hello!");

console.log(set);
console.log(num);
console.log(str);

set.add(1).add(1).add(10).add(20);
console.log(set);
console.log(set.has(10));
console.log(set.has(2));
set.delete(1);
set.delete(-1); // no error
console.log(set);

--- 결과

set(0) {}
Set(5) { 1, 2, 3, 4, 5 }
Set(5) { 'H', 'e', 'l', 'o', '!' }
Set(3) { 1, 10, 20 }
true
false
Set(2) { 10, 20 }

Set 반복문

Collection 객체인 Set이 가지고 있는 iterator 속성을 이용하여 for...of 구문을 통해 반복문 수행이 가능하다.

let str = new Set("Hello!");

console.log(str);
for(let item of str) console.log(item);
for(let item of str.keys()) console.log(item);
for(let item of str.values()) console.log(item);
for(let item of str.entries()) console.log(item);

console.log(str.keys());
console.log(str.entries());

--- 결과

Set(5) { 'H', 'e', 'l', 'o', '!' }
H e l o ! (중복허용X)
H e l o ! (key가 없기 때문에 value값 반환)
H e l o !	
[ 'H', 'H' ] [ 'e', 'e' ] [ 'l', 'l' ] [ 'o', 'o' ] [ '!', '!' ]
[value]
[value, value] (Map과의 호환성을 위해 존재한다.)

Set<->Array

1. Array.from

const mySet1 = new Set()
mySet1.add(1).add(5)
const o = {a: 1, b: 2}
mySet1.add(o)
mySet1.add({a: 1, b: 2}) // mySet1 = Set(4) { 1, 5, {a: 1, b: 2}, {a: 1, b: 2} }

const myArr = Array.from(myset1); 
// [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

let myArray = ['value1', 'value2', 'value3']

// Array -> Set
let mySet = new Set(myArray);
mySet.has('value1') // true

// Set -> Array (spread연산자 사용)
console.log([...mySet]) // ['value1', 'value2', 'value3']