[모던 JavaScript 튜토리얼] 26. Map, Set

본문 바로가기

Map

객체는 키-값 쌍의 프로퍼티가 사용된다. Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 키에 다양한 자료형을 허용한다는 차이점이 있다.

주요 메서드는 다음과 같다.

• new Map() : Map을 생성한다. 파라미터로 이터러블 객체를 전달해서 초기 요소를 설정할 수 있다.
• map.set(key, value) : key 를 이용해 value 를 저장한다. 이미 key 가 존재할 시, value 를 덮어 씌운다.
• map.get(key) : key 에 해당하는 값을 리턴한다. key가 존재하지 않을 시 undefined 를 리턴한다.
• map.has(key) : key 가 존재하면 true, 존재하지 않으면 false 를 리턴한다.
• map.delete(key) : key 에 해당하는 값을 삭제한다.
• map.clear() : Map 안의 모든 요소를 제거한다.
• map.size : Map 안의 모든 요소의 개수를 리턴한다.

let arr = [
    ["1", "str1"],
    [1, "num1"],
    [true, "bool1"],
];
let map = new Map(arr);

console.log(map); // Map(3) { '1' => 'str1', 1 => 'num1', true => 'bool1' }

위와 같이 이터러블을 생성자의 인자로 전달해 Map을 생성할 수 있다.

let map = new Map();

map.set("1", "str1");
map.set(1, "num1");
map.set(true, "bool1");

console.log(map.get(1)); // "num1"
console.log(map.get("1")); // "str1"
console.log(map.get(true)); // "bool1"

위 예제에서 볼 수 있듯이, 숫자 1과 문자열 1이 다른 키로 저장된다. 자동 형변환이 되지 않는다. 별도의 키를 찾아간다.

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

📕참고:
위 예제 코드의 set 메서드 호출부를 다음과 같이 체이닝할 수 있다.

Map의 요소에 반복 작업하기

다음 세 메서드를 통해 반복 작업을 할 수 있다.

• map.keys() : 각 요소의 키를 모은 이터러블 객체를 리턴한다.
• map.values() : 각 요소의 값을 모은 이터러블 객체를 리턴한다.
• map.entries() : 각 요소의 키-값을 쌍으로 하는 이터러블 객체를 리턴한다.
• map.forEach() : 배열 내장 메서드 forEach 도 지원한다.

📕참고:
Map은 Java의 LinkedHashMap 처럼 입력된 순서가 보장된다.

Object.entries 를 통해 객체를 맵으로 바꾸기

let obj = { name: "John", age: 30 };
let map = new Map(Object.entries(obj));

console.log(map); // Map(2) { 'name' => 'John', 'age' => 30 }

Object.entries 는 인자로 전달받은 객체 내부의 각 키-값 쌍을 [key, value] 요소로 변환한 배열을 리턴한다.

Object.fromEntries 를 통해 맵을 객체로 바꾸기

let prices = [
    ["banana", 1],
    ["orange", 2],
    ["meat", 4],
];
prices = Object.fromEntries(prices);

console.log(prices); // { banana: 1, orange: 2, meat: 4 }

Object.fromEntries 는 인자로 전달받은 [key, value]를 각 요소로 갖는 배열(이터러블 객체)을 객체로 변환한다.

let map = new Map();
map.set("banana", 1).set("orange", 2).set("meat", 4);
let obj = Object.fromEntries(map.entries());
// let obj = Object.fromEntries(map);

console.log(obj); // { banana: 1, orange: 2, meat: 4 }

map.entries() 는 각 요소의 키-값을 쌍으로 하는 이터러블 객체를 리턴하므로, 위와 같이 Object.fromEntries 메서드 를 호출할 수 있다. 혹은, Map 그 자체를 전달해도 가능한데, 그 이유는 Map 자체가 이터러블 객체이기 때문이다.

let map = new Map();
map.set("banana", 1).set("orange", 2).set("meat", 4);

for (let obj of map) {
    console.log(obj); // [ 'banana', 1 ], [ 'orange', 2 ], [ 'meat', 4 ]
}

Map도 이터러블 객체이기 때문에 for...of 반복문을 사용할 수 있다.

Set

Set은 중복을 허용하지 않는 값을 모은 컬렉션이다. Set은 Map과 달리 키 없이 값만 저장된다.

주요 메서드는 다음과 같다.

• new Set() : Set을 생성한다. 파라미터로 이터러블 객체를 전달해서 초기 요소를 설정할 수 있다.
• set.add(value) : 값을 추가하고 갱신된 Set을 리턴한다.
• set.delete(value) : 값을 제거한다.
• set.has(value) : Set 내에 value가 존재하면 true를, 존재하지 않으면 false를 리턴한다.
• set.clear() : Set 을 비운다.
• set.size : Set 내부 값의 개수를 리턴한다.

Set의 값에 반복 작업하기

Map과 마찬가지로 아래와 같은 메서드들이 사용 가능하다.

• set.keys() : Set엔 key가 없지만, Map과의 호환성을 위해 만들어진 메서드다. key 대신 value를 모은 이터러블 객체를 리턴한다.
• set.values() : Set 내부의 모든 값들을 모은 이터러블 객체를 리턴한다.
• set.entries() : keys()와 마찬가지로 Map과의 호환성을 위해 만들어진 메서드다. Set 내부의 모든 값들을 모은 이터러블 객체를 리턴한다. key 위치에 value가 들어가, 결론적으로 [value, value] 형태를 띈다.

let set = new Set(["orange", "apple", "banana"]);

for (let key of set.keys()) {
    console.log(key); // orange, apple, banana
}

for (let value of set.values()) {
    console.log(value); // orange, apple, banana
}

for (let entry of set.entries()) {
    console.log(entry); // [ 'orange', 'orange' ], [ 'apple', 'apple' ], [ 'banana', 'banana' ]
}

keys() 가 리턴하는 이터러블을 순회하면 값이, entries() 가 리턴하는 이터러블을 순회하면 [값, 값] 형태의 배열이 출력됨을 확인할 수 있다.