[javascript] 표준 내장 객체 Set, Map 정리

이번 포스팅에서는 자바스크립트의 내장 객체인 Set과 Map에 대해서 정리를 하려고 한다.

 

프로그래머스에서 열심히 머리 쥐어짜 내서 코딩을 한 뒤 다른 사람의 풀이를 봤는데...

엄청나게 자괴감이 들었다.

 

내가 진짜 가독성 떨어지게 짠 코드를 이 객체들이 가독성을 높여주고 있었다.

 

1. Set

Set 객체는 자료형에 관계없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.

 

다시 풀어서 얘기하면,

Set 객체는 값 컬렉션으로, 삽입 순서대로 요소를 순회할 수 있다. 하나의 Set 내 값은 한 번만 나타날 수 있다. 즉, 어떤 값은 그 Set 컬렉션 내에서 유일하다.

 

아래 코드를 보면 무슨 말인지 이해할 수 있다.

 

var mySet = new Set();

mySet.add(1); // Set { 1 }
mySet.add(5); // Set { 1, 5 }
mySet.add(5); // Set { 1, 5 }
mySet.add('some text'); // Set { 1, 5, 'some text' }
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음

console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}

 

어떤 배열의 중복 값을 제거하는데 아래처럼 사용할 수 있다.

 

const list = [1,2,3,3,3,4,5,6,6,6];
var mySet = new Set(list);
console.log(mySet); // Set {1, 2, 3, 4, 5, 6}

 

아래는 Set 객체를 쉽게 활용하는 방법들이다.

 

var mySet = new Set();

mySet.add(1); // Set { 1 }
mySet.add(5); // Set { 1, 5 }
mySet.add('some text'); // Set { 1, 5, 'some text' }
var o = {a: 1, b: 2};
mySet.add(o);

// has 메서드
mySet.has(1); // true
mySet.has(3); // false, 3은 set에 추가되지 않았음

// size
mySet.size; // 4

// delete 메서드
mySet.delete(5); // Set에서 5를 제거함
mySet.has(5);    // false, 5가 제거되었음

// Set -> Array
var mySetList = [...mySet];
console.log(mySetList); // [1, 'some text', {a: 1, b: 2}]

 

 

 

2. Map

사실 Set도 충격이었지만, Map이 더 충격이었다.

javascript에서는 일반적으로 object를 Map처럼 사용하지만, 실제로는 Map을 사용하는 것이 장점이 훨씬 많다.

 

그럼 어떤 점이 더 좋고 왜 사용해야 하는지 한번 알아보자.

 

2-1. key로 여러 가지 타입을 사용할 수 있다.

사실 key로 굳이 다른 타입을 사용할 것 같진 않지만 제약이 없다는 장점이라고 볼 수 있겠다.

 

// object 사용
const map = {};
 
map['key1'] = 'value1';
map['key2'] = 'value2';
map['key3'] = 'value3';

// Map 사용
const map = new Map();
const myFunction = () => console.log('I am a function.');
const myNumber = 1234;
const myObject = {
  name: 'plainObjectValue',
  otherKey: 'otherValue'
};
 
map.set(myFunction, 'function as a key');
map.set(myNumber, 'number as a key');
map.set(myObject, 'object as a key');
 
console.log(map.get(myFunction)); // key 로 function을 사용한 예
console.log(map.get(myNumber)); // key 로 number를 사용한 예
console.log(map.get(myObject)); // key 로 object를 사용한 예

 

2-2. Map의 크기를 훨씬 빠르고 쉽게 측정할 수 있다.

 

// object 사용
const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 1;
...
plainObjMap['someKey100'] = 1;
 
console.log(Object.keys(plainObjMap).length) // 100, Runtime: O(n)

// Map 사용
const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 1);
...
map.set('someKey100', 1);
 
console.log(map.size) // 100, Runtime: O(1)

 

2-3. 직접 반복한다.

Map은 for.. of를 사용하여 직접 반복문을 돌리지만, object는 entries나 keys를 사용해야 한다.

 

// object 사용
const plainObjMap = {};
plainObjMap['someKey1'] = 1;
plainObjMap['someKey2'] = 2;
plainObjMap['someKey3'] = 3;
 
for (let [key, value] of Object.entries(plainObjMap)) {
  console.log(`${key} = ${value}`);
}
// someKey1 = 1
// someKey2 = 2
// someKey3 = 3

// Map 사용
const map = new Map();
map.set('someKey1', 1);
map.set('someKey2', 2);
map.set('someKey3', 3);
 
for (let [key, value] of map) {
  console.log(`${key} = ${value}`);
}
// someKey1 = 1
// someKey2 = 2
// someKey3 = 3

 

 

장점이 더 많지만 자세한 내용은 공식문서에서 확인하길 바란다.

위 내용만 보더라도 왜 object보다 Map을 사용해야 하는지 알 수 있다.

물론 전적으로 HashMap 용도일 경우만 보는 것이고, 어떻게 사용하는지에 따라 object가 훨씬 편할 수도 있다.

 

아래는 Map 객체를 쉽게 사용하는 방법이다.

 

// 생성자
let map = new Map();

// Map 크기
map.size;

// 모든 key,value 지우기
map.clear();

// key로 value 구하기
map.get(key);

// 특정 key를 가지고 있는지 확인하기
map.has(key);

// 특정 key로 value 를 Map에 넣기 (반환값은 Map object)
map.set(key, value);

[key,value]의 array 를 삽입 된 순서대로 가진 새로운 Iterator 반환
map.entries();

 

 

---

참고: https://shanepark.tistory.com/220#%EC%99%9C-map%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80?