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 = oneMap <-> 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}]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']자바스크립트 강의 정리 map & set
