2022-04-04 Map, WeakMap, Array.from

Map

 

Map은 자바스크립트에서 Key Value를 매핑할 수 있는 간단한 자료구조다.

 

var sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");

for (var [key, value] of sayings) {
  console.log(key + " goes " + value);
}

for of 를 통해서 key value를 순회할 수 있고,

 

set, get, has, delete, size 등의 기본적인 메서드들을 가지고 있다.

 

Key Value 구조를 사용할때 객체 대신에 사용하면 편하다.

 

Size도 O(1)의 시간에 구할 수 있고, (객체는 key값들을 다 가져와서 O(n)걸림)

 

Map에서의 Iteratign의 경우 추가한 순서에 따라 순번이 보장된다는 것이 큰 장점이다.

 

 

WeakMap

 

WeakMap은 Map과 상당히 유사한데, 키 값으로 객체만 받고 키 값을 약하게(Weak) 참조한다.

 

Map이 아니라 WeakMap을 쓰는 이유로는

 

Map을 구성하는 데에는 key 배열, value 배열, 그리고 4개의 api 메서드로 이루어져 있는데,

 

1. 요소의 설정과 탐색이 각각 O(N)의 시간 복잡도를 갖는다.

 

2. 두 배열로 인해 Key, value에 대한 참조가 계속 이루어지므로 메모리 누수가 발생할 수 있음. 키를 참조하지 않아도 배열을 참조하므로 가비지 컬렉트가 안됨

 

약한 참조는 Weak Reference라고 하는데, 가비지 컬렉션이 발생하면 무조건 회수가 되는 자원이다. 참조를 하고 있어도 말이다!

 

반대말로는 Strong Reference라고 하는데 이는 Root 객체에 체이닝된 자원인지를 파악해 끊어진 요소를 가비지 컬렉션에 넣는다.

 

또한 WeakMap은 키 열거가 불가능한데, 약한 참조를 하고 있기 때문에 가비지 컬렉션 상태에 따라 열거되는 키들 값이 달라서 비결정성을 야기하기 떄문이다.

 

 

https://github.com/dai-shi/proxy-compare#readme

GitHub - dai-shi/proxy-compare: Compare two objects using accessed properties with Proxy

proxy-compare에서 쓰는 것이 WeakMap이다.

 

 

 

Array.from은 arrary-like 객체나, iterable object를 배열로 변환해준다.

 

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike는 배열로 바꿀 객체,

 

mapFn은 매핑시 적용할 함수,

 

thisArg는 mapFn시의 this값을 의미한다.

 

array-like 객체는 length를 가지고 있는 객체를 의미하며,

 

iterable 객체는 Map, Set등의 객체를 의미한다.

 

const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

위에서의 Map 객체의 values(), keys()는 배열이 아니라 iterable를 반환하는데, Array.from을 통해 이를 배열로 변환시켜줄 수 있다.

 

 

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

이런 식으로 mapFn 함수를 응용하거나, length를 가진 array-like 객체를 사용해 배열을 뽑아낼 수도 있다.