[JS] JavaScript 자바스크립트 Map 더 잘 사용하기

Map은 key, value로 이루어진 순서가 있는 컬렉션이다. 삽입 순서를 기억하며 key/value 추가/제거가 빈번할 때 객체보다 더 좋은 성능을 가진다 MDN - Map 페이지를 보면 아래와 같이 적혀있다.

Map: 키-값 쌍의 빈번한 추가 및 제거와 관련된 상황에서는 성능이 좀 더 좋습니다.
Object: 키-값 쌍의 빈번한 추가 및 제거에 최적화되지 않았습니다.

 

벤치마크 출처 Perf.link

실제로 랜덤 숫자 10,000개로 구성된 객체를 추가/삭제할 때 Map은 901 ops/s, 객체는 183 ops/s로 측정된다. 즉, 1초 동안 Map은 901번의 작업을 처리하고, 객체는 183번의 작업을 처리한다. Map이 일반 객체보다 거의 4~5배 가량 빠르다는 것을 의미한다. 물론 이 벤치마크를 100% 신뢰할 수 없지만 key/value 추가/제거에 있어 Map이 객체보다 최적화된 것은 자명해보인다.

 

💡ops/s는 초당 연산 횟수를 가리킨다.

 

내장 키

---

키가 없는 빈 객체라도 자바스크립트의 모든 객체는 Object.prototype에 정의된 속성과 메서드를 상속받는다. 즉, 빈 객체라도 프로토타입 체인에 의해 아래와 같은 결과를 출력한다. 이는 잠재적인 버그로 이어질 수 있다.

const myMap = {};

myMap.valueOf; // [Function: valueOf]
myMap.toString; // [Function: toString]
myMap.hasOwnProperty; // [Function: hasOwnProperty]
myMap.isPrototypeOf; // [Function: isPrototypeOf]
myMap.propertyIsEnumerable; // [Function: propertyIsEnumerable]
myMap.toLocaleString; // [Function: toLocaleString]
myMap.constructor; // [Function: Object]

 

참고로 ES2022에 공개한 Object.hasOwn(obj, propKey) 메서드를 이용하면 인자로 넘긴 프로퍼티가 객체 자신이 소유한 것인지 확인할 수 있다. e.g. Object.hasOwn(myMap, valueOf) → false

 

Map을 사용하면 이러한 문제에서 자유로울 수 있다.

 

반복

---

만약 생성자 함수의 프로토타입을 수정한 상황에서 for in으로 순회하면 자신이 소유하지 않은 프로퍼티도 출력한다. 이를 방지하기 위해 if (Object.hasOwn(...)) 같은 조건을 추가 할 수 있지만 번거롭다.

// JS 내장 프로토타입을 수정하는 것은 권장하지 않는다.
// 아래는 예시를 위한 수정인 점 참고
Object.prototype.fullName = 'Obama';
const obj = { name: 'smith', age: 30 };

for (const key in obj) {
  console.log(key); // name, age, fullName
}

 

Map은 이터러블이므로 for of 문으로 순회할 수 있으며, 위와 같은 문제도 발생하지 않는다. 또한, 구조 분해 할당을 이용해 key, value를 한 번에 가져올 수 있어 편하다.

const myMap = new Map([
  ['name', 'smith'],
  ['age', 30],
]);

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`); // name: smith, age: 30
}

Symbol.iterator 메서드가 구현되어 있는 객체를 이터러블(iterable)이라고 한다. 간단히 말하면 이터러블은 반복 가능한 객체다. 배열, 문자열은 Symbol.iterator 메서드가 이미 구현되어 있는 대표적인 내장 이터러블이다. 이터러블을 사용하면 어떤 객체든 ➊for of 반복문 ➋전개 문법 ➌배열 구조분해 할당의 대상으로 사용할 수도 있다.

 

키 순서

---

Map은 삽입 순서를 유지하므로, 요소를 순회할 때도 항상 일정한 순서로 반환한다. 이런 특성 때문에 Map을 구조 분해 할당하여 요소에 더 쉽게 액세스할 수 있다.

const user = { name: 'smith', age: 30 };
const map = new Map(Object.entries(user));
const [firstEntry, secondEntry] = map; // ['name', 'smith'], ['age', 30]
const [[firstKey, firstValue]] = map; // firstKey -> 'name', firstValue -> 30

 

복사

---

객체는 전개문법이나 Object.assign 메서드로 쉽게 복사할 수 있다.

const user = { name: 'smith', age: 30 };
const cloned1 = { ...user };
const cloned2 = Object.assign({}, user);

 

Map 생성자는 [key, value] 튜플의 이터러블을 사용하므로 기존 맵 객체를 생성자에 전달하면 복사할 수 있다.

const userMap = new Map([
  ['name', 'smith'],
  ['age', 30],
]);

const cloned = new Map(userMap); // Map(2) {'name' => 'smith', 'age' => 30}

 

깊은 복사는 structuredClone 함수를 사용하면 된다.

const users = { smith: { age: 30 }, john: { age: 20 } };
// entries -> [['smith', { age: 30 }], ['john', { age: 20 }]]

// 얕은 복사
const usersMap = new Map(Object.entries(users));
const clonedMap = new Map(usersMap);
usersMap.get('smith') === clonedMap.get('smith'); // true

// 깊은 복사
const clonedMap = new Map(structuredClone(usersMap));
usersMap.get('smith') === clonedMap.get('smith'); // false

 

헬퍼 함수 ⚡️

---

Object.fromEntries, Object.entries 메서드를 사용해서 객체 ⇆ Map 변형을 자유롭게 할 수 있다.

const user = { name: 'smith', age: 30 };
const map = new Map(Object.entries(user)); // Map(2) {'name' => 'smith', 'age' => 30}
const userFromMap = Object.fromEntries(map); // {name: 'smith', age: 30}

 

새로운 Map 객체를 생성할 때 [[key ,value], [key, value]] 튜플을 인자로 넘겨야 한다. 그리 직관적이진 않다. Object.entries를 활용해 헬퍼 함수를 만들어두면 더 편하게 사용할 수 있다.

const makeMap = (obj) => new Map(Object.entries(obj));
const myMap = makeMap({ name: 'smith', age: 30 }); // Map(2) {'name' => 'smith', 'age' => 30}

 

아래는 타입스크립트를 사용했을 때 예시. V 제네릭 타입을 전달하지 않으면 unknown을 기본값으로 가지며, key는 string, value는 V 제네릭 타입을 가지는 Map 객체를 반환한다.

const makeMap = <V = unknown,>(obj: Record<string, V>) => {
  return new Map<string, V>(Object.entries(obj));
};

 

Map 활용 ⚡️

---

자바스크립트에선 string과 symbol 타입만 객체의 key로 사용할 수 있다. 반면 Map은 원시형은 물론 객체 같은 참조형도 key로 사용할 수 있다.

myMap.set({}, value);
myMap.set([], value);
myMap.set(document.body, value);
myMap.set(function () {}, value);

 

💡 메타데이터는 특정 데이터에 대한 추가 정보를 나타내는 데이터를 의미한다.

 

이를 활용하면 객체를 직접 수정하지 않고 객체와 메타데이터를 연결하는 방식으로 상태를 다룰 수 있다. 아래 예시에선 $h3 요소에 대한 메타데이터를 Map 객체에 저장해두고, get 메서드로 메타데이터에 접근하고 있다.

const $h3 = document.querySelector('h3');
const metadata = new Map();

metadata.set($h3, { color: 'red' });
metadata.get($h3); // {color: 'red'}

 

원본 객체(toDoList)에 영향을 주지 않으면서 임시 데이터(focused 상태)를 설정할 때도 유용하다.

const metadata = new Map();

metadata.set(toDoList, { focused: true });
metadata.get(toDoList); // {focused: true}

 

WeakMap

---

💡 WeakMap과 유사한 WeakSet도 있다. WeakSet 역시 key에 객체(참조형)만 저장할 수 있다.

 

자바스크립트 가비지 컬렉터는 동적으로 할당된 메모리를 관리한다. 객체나 함수를 생성하면 메모리에 할당되고, 해당 객체가 더 이상 참조되지 않으면(사용하는 곳 없음; 도달 불가) 메모리에서 해제하여 자원을 확보한다.

let user = { name: 'smith', age: 30 };
user = null;
// 참조를 null로 덮어써서 객체에 더이상 접근할 수 없음
// 따라서 위 객체는 가비지 컬렉터에 의해 메모리에서 삭제됨

 

①객체 프로퍼티, ②배열 요소, ③Map/Set을 구성하는 요소는 자신이 속한 자료구조가 메모리에 남아 있으면 도달할 수 있는 값으로 취급해서 메모리에서 삭제되지 않는다.

 

아래 코드에서 smith 변수를 null로 덮어썼는데도 불구하고 users 에선 여전히 접근할 수 있다. smith가 가리켰던 객체는 users 배열 요소로 존재하기 때문에 가비지 컬렉터 대상이 되지 않은 것이다.

let smith = { name: 'smith' };
const users = [smith];

smith = null;
console.log(users); // [{"name": "smith"}]

 

Map에서 객체를 key/value로 사용했을 때도 Map이 메모리에 남아있는 한 key 혹은 value로 사용한 객체도 메모리에 계속 남게 된다.

let smith = { name: 'smith' };
const map = new Map();
map.set(smith, '스미스'); // Map(1) {{name: 'smith'} => '스미스'}

smith = null;
for (const key of map.keys()) console.log(key); // {name: 'smith'}

 

반면 WeakMap에서 객체를 key로 사용할 경우, 해당 객체를 참조하는 곳이 없다면 가비지 컬렉션 대상이 돼서 메모리와 WeakMap에서 삭제된다.

const weakMap = new WeakMap();
let smith = { name: 'smith' };
weakMap.set(smith, '스미스'); // WeakMap {{name: 'smith'} => '스미스'}

smith = null;
console.log(weakMap); // WeakMap {}

 

WeakMap의 key는 객체만 사용할 수 있는 특징이 있다.

const weakMap = new WeakMap();
const smith = { name: 'smith' };

weakMap.set('smith', smith); // Invalid value used as weak map key
weakMap.set(smith, 'smith'); // OK

 

💡 Map과 달리 WeakMap은 이터러블이 아니다. 따라서 for of 반복도 사용할 수 없다.

 

WeakMap에선 keys(), values(), entries() 같은 순회(traversal) 메서드를 지원하지 않는다. 가비지 컬렉터가 작동하는 시점은 자바스크립트 엔진이 결정하며, 정확한 동작 시점을 예측할 수 없다. 즉, 객체로 존재하는 WeakMap 키(key)가 가비지 컬렉터에 의해 언제 삭제될지 모르기 때문에 WeakMap 요소 개수를 파악하는 것도 불가능하다. 이러한 이유로 요소 전체를 대상으로 하는 메서드를 제공하지 않는 것.

 

WeakMap에선 아래 메서드만 사용할 수 있다.

• weakMap.get(key)
• weakMap.set(key, value)
• weakMap.delete(key)
• weakMap.has(key)

 

직렬화 / 역직렬화

---

JSON.stringify(value[, replacer[, space]])

 

자바스크립트 객체를 JSON으로 변환(직렬화)할 때 JSON.stringify를 사용한다. JSON.stringify 두번째 선택적 파라미터로 replacer를 받을 수 있는데, 직렬화전 값을 변형하거나 원하는 속성만 포함시키기 위해 사용한다. replacer는 용도에 따라 함수와 배열 2가지 방식으로 사용할 수 있다.

• 함수 : 변환 전 값 변형. 함수 인자로 key, value를 받음
• 배열 : 지정한 프로퍼티만 결과에 포함

 

replacer 톺아보기

replacer 함수 반환값이 null, undefined 이면 결과에서 제외된다. 따라서 아래 replacer 함수는 string 타입의 value는 결과에 포함하지 않는다.

// 함수 replacer 예시 1
function replacer(key, value) {
  if (typeof value === 'string') return undefined;
  return value;
}

const foo = {
  foundation: 'Mozilla',
  model: 'box',
  week: 45,
  transport: 'car',
  month: 7,
};

const jsonString = JSON.stringify(foo, replacer); // '{"week":45,"month":7}'

 

replacer 함수는 첫번째 순회시 JSON.stringify에 넘겼던 객체를 value로 받는다. 이때 객체 구조의 value를 리턴하지 않으면 더이상 순회하지 않는다. 즉, 객체 key/value 쌍에 대한 순회는 두번째부터 이뤄지는 셈이다. 객체 key의 value가 객체 일 때도 재귀적으로 동작하여 순회 방식은 동일하다.

// 함수 replacer 예시 2
function replacer(key, value) {
  console.log('key:', key, '|', 'value:', value);
  if (typeof value === 'string') return value + '-modified';
  return value;
}

JSON.stringify({ name: 'smith' }, replacer);
// [순회 1] key: '', value: {name: 'smith'} -> JSON.stringify 인자로 넘겼던 객체
// [순회 2] key: 'name', value: 'smith' -> 첫번째 key/value 순회
// [결과] '{"name":"smith-modified"}'

 

replacer가 배열일 땐 포함하고 싶은 key를 배열 요소로 추가한다.

// 배열 replacer 예시
const foo = {
  foundation: 'Mozilla',
  model: 'box',
  week: 45,
  transport: 'car',
  month: 7,
};

JSON.stringify(foo, ['weak, month']); // '{"week":45,"month":7}'

 

Map, Set 직렬화

위에서 소개한 JSON.stringify 메서드의 replacer 함수를 이용하면 Map/Set도 쉽게 직렬화할 수 있다.

function replacer(key, value) {
  // Map을 일반 객체로 변환
  if (value instanceof Map) return Object.fromEntries(value);
  // Set을 일반 객체로 변환
  if (value instanceof Set) return Array.from(value);
  return value;
}

const obj = { set: new Set([1, 2]), map: new Map([['smith', 30]]) };
JSON.stringify(obj, replacer); // '{"set":[1,2],"map":{"smith":30}}'

 

Map, Set 역직렬화

JSON.parse(text[, reviver])

 

역직렬화는 JSON.parse 메서드를 이용한다. JSON.parse도 두번째 인자로 reviver 함수를 받을 수 있으며, value 값을 변형하거나 특정 속성을 제외할 때 사용한다.

 

작동 방식은 JSON.stringify 메서드의 replacer 함수와 유사하지만, reviver 함수는 각 key-value 쌍을 먼저 순회하고, 마지막 순회에서 최종적으로 변환된 객체가 value로 전달된다. 

function reviver(key, value) {
  console.log('key:', key, '|', 'value:', value);
  return value;
}

JSON.parse('{"name":"smith"}', reviver);
// [순회1] key: 'name', value: 'smith'
// [순회2] key: '', value: {name: 'smith'}
// [결과] {name: 'smith'}

 

reviver 함수를 이용하면 직렬화된 Map/Set을 역직렬화할 수 있다. 하지만 아래 코드에선 모든 객체를 Map으로 반환하고 있다. object 타입의 value를 Map으로 변환시키는 조건 때문에 그런것.

function reviver(key, value) {
  console.log('key:', key, '|', 'value:', value);
  if (Array.isArray(value)) {
    return new Set(value);
  }
  if (value && typeof value === 'object') {
    return new Map(Object.entries(value));
  }
  return value;
}

const obj = { set: new Set([1, 2]), map: new Map([['smith', 30]]) };
const jsonString = JSON.stringify(obj, replacer); // '{"set":[1,2],"map":{"smith":30}}'
JSON.parse(jsonString, reviver);
// [순회1] key: 0     | value: 1
// [순회2] key: 1     | value: 2
// [순회3] key: set   | value: [1, 2] -> Set으로 변환
// [순회4] key: smith | value: 30
// [순회5] key: map   | value: {smith: 30} -> Map으로 변환
// [순회6] key: ''    | value: {set: Set(2), map: Map(1)} -> Map으로 변환
// [결과] Map(2) {'set' => Set(2), 'map' => Map(1)}

 

일반 객체와 Map/Set을 구별할 수 있는 방법이 없으므로 __type 임의 프로퍼티를 만들어서 해결할 수 있다.

function replacer(key, value) {
  if (value instanceof Map) {
    return { __type: 'Map', value: Object.fromEntries(value) };
  }
  if (value instanceof Set) {
    return { __type: 'Set', value: Array.from(value) };
  }
  return value;
}

function reviver(key, value) {
  if (value?.__type === 'Set') {
    return new Set(value.value);
  }
  if (value?.__type === 'Map') {
    return new Map(Object.entries(value.value));
  }
  return value;
}

const obj = { set: new Set([1, 2]), map: new Map([['smith', 30]]) };
const jsonString = JSON.stringify(obj, replacer); // '{"set":{"__type":"Set","value":[1,2]},"map":{"__type":"Map","value":{"smith":30}}}'
JSON.parse(jsonString, reviver); // {set: Set(2), map: Map(1)}

 

레퍼런스

---

• Use Maps More and Objects Less
• 위크맵과 위크셋

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요