JavaScript

[JS] Map 사용 방법

_doit 2024. 9. 8. 20:16
728x90
반응형

Maps (Key-value collections with order)

Map은 순서를 유지하면서 키-값 쌍을 저장하는 자료 구조에요. Object와는 다르게 모든 데이터 타입을 키로 사용할 수 있으며, 내부적으로 해시 테이블을 사용하기 때문에 대규모 데이터를 처리할 때 성능이 좋아요. 

 

Map 생성 및 사용

새로운 Map을 만들려면 Map() 생성자를 사용합니다.

const myMap = new Map();

 

이제 Map에 값을 추가하려면 set() 메소드를 사용합니다.

myMap.set('key', 'value');

 

Map에서 값을 검색하려면 get() 메소드를 사용합니다.

console.log(myMap.get('key')); // 'value' 출력

 

When to use Maps

  • 순서가 중요한 동시에 빠른 데이터 처리(접근, 삽입, 삭제)가 필요한 경우
  • 키로 다양한 데이터 타입을 사용해야 할 때 (객체, 배열 등)

 

Big O of Maps

  • Insertion - O(1): 맨 뒤에만 새로운 키-값 쌍이 추가가능하기 떄문에 상수 시간에 완료.( 중간에 직접 삽입하는 기능은 없음)
  • Removal - O(1): 특정 키를 삭제하는 작업도 상수 시간에 완료.
  • Searching -  O(N): 객체에서 특정 값(value)을 찾는 작업은 최악의 경우 모든 키를 확인해야 하므로 선형 시간(O(N))이 걸릴 수 있다.
  • Access - O(1): 키를 통해 값을 접근하는 작업은 상수 시간에 가능

 

Map Methods

  • set - O(1): 새로운 키-값 쌍을 추가
  • get - O(1): 특정 키에 대한 값을 반환
  • delete - O(1): 특정 키-값 쌍을 삭제
  • has - O(1): 특정 키가 존재하는지 확인
  • size - O(1): Map의 크기(저장된 요소 수)를 반환
  • forEach - O(N): 저장된 모든 요소에 대해 반복 작업을 수행

 

Map의 이점

Map은 자바스크립트에서 Object의 단점을 보완하기 위해 등장한 자료구조에요. Object는 자바스크립트의 기본적인 자료구조로서 키-값 쌍을 저장하는 기능을 제공하지만, 몇 가지 한계점이 있어요. Map은 이러한 제약을 해결하고, 더 유연하고 효율적인 데이터 구조를 제공해요

 

☑️ 다양한 데이터 타입을 키로 사용 가능

  • Object에서는 문자열과 심볼만 키로 사용할 수 있어요. 만약 숫자나 객체를 키로 사용하려면 자동으로 문자열로 변환됩니다.
  • Map은 숫자, 객체, 배열, 함수 등 모든 데이터 타입을 키로 사용할 수 있어요. 즉, 키로 더 많은 종류의 데이터를 사용할 수 있다는 장점이 있어요.

 

// Map에서는 객체를 키로 사용할 수 있음
let obj1 = { id: 1 };
let obj2 = { id: 2 };

let map = new Map();
map.set(obj1, "Object 1"); // 객체를 키로 사용
map.set(obj2, "Object 2");

console.log(map.get(obj1)); // "Object 1"
console.log(map.get(obj2)); // "Object 2"

 

 

☑️ 삽입 순서 유지

  • Object키-값 쌍을 저장하는 순서가 중요하지 않아요. 그래서 순서가 바뀌거나 무작위로 출력될 수 있어요.
  • 반면, Map은 삽입된 순서를 항상 기억해요. 순서대로 데이터를 관리할 때는 Map이 더 유용해요.
let map = new Map();
map.set(1, 'a');
map.set(2, 'b');
map.set(3, 'c');

for (let [key, value] of map) {
  console.log(key, value);
}
// 출력 순서: 1 'a', 2 'b', 3 'c'

 

 

☑️ 성능(특히 많은 데이터를 처리할 때)

  • Object는 적은 데이터를 처리할 때는 괜찮지만, 많은 데이터를 다룰 때는 속도가 느려질 수 있어요.
  • Map은 내부적으로 해시 테이블을 사용해서 더 빠르게 데이터를 추가하고 삭제할 수 있어요. 특히 많은 데이터를 저장하고 빠르게 찾을 때 유리해요.

 

let map = new Map();
for (let i = 0; i < 100000; i++) {
  map.set(i, `value${i}`);
}
console.log(map.get(50000));  // 'value50000', 큰 데이터셋에서도 빠르게 찾을 수 있음

 

 

그러면 Map을 쓰면 굳이 Object는 필요없는거 아닌가?

 

Map이 Object를 대체할 수 없는 경우

☑️ JSON 데이터 처리

  • JSON(JavaScript Object Notation)은 자바스크립트의 표준 데이터 형식으로, 대부분의 웹 API나 데이터 교환에서 많이 쓰여요. JSON은 Object 형태로만 표현됩니다.
  • 따라서 Map은 JSON 형식으로 직렬화(serialize)할 수 없고, 다시 Map으로 역직렬화(deserialize)할 수 없어요. 

 

☑️  프로토타입 기반 상속과 객체 구조

  • 자바스크립트는 프로토타입 기반 상속을 통해 객체(Object)의 기능을 확장할 수 있어요. 하지만 Map은 이런 프로토타입 상속 기능을 지원하지 않아요.
  • 즉, Map은 객체처럼 새로운 기능을 추가하거나 확장할 수 없어요. Map은 키-값 데이터를 저장하는 데에만 집중된 자료구조이기 때문에, 객체 지향 프로그래밍의 특성인 상속을 활용할 수 없어요.
// 'Person'이라는 함수를 정의하고, 이걸로 사람 객체를 만들 수 있음
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Person 객체가 사용할 수 있는 'greet' 메서드를 추가 (프로토타입 상속)
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// John이라는 새로운 사람 객체를 만듦
let john = new Person('John', 18);

// John은 'greet' 메서드를 사용할 수 있음 (상속된 메서드)
john.greet(); // "Hello, my name is John"

 

이런 이유로, 객체 지향 프로그래밍의 특성을 사용하거나 객체의 상속을 활용해야 할 때는 여전히 Object가 필요해요.

 

 

☑️   간단한 구조에서는 Object가 더 직관적

  • Object에서는 점 표기법(.)을 사용해 속에 쉽게 접근할 수 있어 더 직관적이에요.
  • 반면 Map은 set(), get() 메서드를 통해 키에 접근해야 하므로, 코드가 조금 더 복잡해질 수 있어요.
let obj = { name: 'John', age: 18 }; // Object는 직관적
console.log(obj.name); // 'John'

// Map은 더 많은 메서드를 사용해야 함
let map = new Map();
map.set('name', 'John');
map.set('age', 18);
console.log(map.get('name')); // 'John'

 

728x90
반응형