[JavaScript] Hash Map

Eugenius1st·5일 전
0

JavaScript

목록 보기
67/67

[JavaScript] Hash Map

코테하면서 해시맵을 배우게되었습니다.
객체랑 유사하지만, 훨씬 활용도가 높습니다.

Map

Map은 JavaScript의 내장 객체 중 하나로, 키와 값을 저장하는 데이터 구조입니다. Map과 일반 객체 {}는 비슷해 보이지만, 중요한 차이점이 있습니다. 아래에서 자세히 설명할게요.

객체({})와 Map의 차이점

1. 키의 타입:

  • 객체 ({}):
    객체에서는 문자열이나 심볼만 키로 사용할 수 있습니다. 숫자도 객체에서는 자동으로 문자열로 변환됩니다.
const obj = {};
obj["key"] = "value";
obj[123] = "number";  // 키가 "123"으로 변환됩니다.
console.log(obj);  // { "key": "value", "123": "number" }
  • Map: Map에서는 모든 타입의 값을 키로 사용할 수 있습니다. 즉, 문자열뿐만 아니라 숫자, 객체, 함수도 키로 쓸 수 있습니다.
const map = new Map();
map.set("key", "value");
map.set(123, "number");  // 숫자 123이 그대로 키로 사용됩니다.
map.set({}, "object");   // 객체도 키로 사용 가능
console.log(map);  // Map(3) { 'key' => 'value', 123 => 'number', {} => 'object' }

2. 순서 보장

  • 객체 ({}): 객체는 키의 순서를 보장하지 않습니다. (ECMAScript 2015 이후, 일부 정렬 규칙이 있지만 완전한 순서 보장은 아님.)
    Map: Map은 삽입된 순서대로 키를 저장합니다. 따라서, Map에서 반복문을 돌리면 입력한 순서대로 값이 나옵니다.

3. 성능

객체는 작은 규모에서는 성능이 좋을 수 있지만, 키의 갯수가 많아질수록 해시 테이블을 사용하는 Map이 성능적으로 더 유리할 수 있습니다.


4. 메서드와 속성:

  • 객체 ({}): 객체는 키-값 쌍을 저장하는 메서드가 따로 없으며, 기본적인 연산은 수동으로 처리해야 합니다.
코드 복사
const obj = {};
obj["key"] = "value";  // 키 추가
delete obj["key"];  // 키 삭제
console.log("key" in obj);  // true (키 존재 여부 확인)
  • Map: Map은 다양한 유용한 메서드를 제공합니다.
const map = new Map();
map.set("key", "value");  // 키-값 추가
map.get("key");  // "value" (값 가져오기)
map.has("key");  // true (키 존재 여부 확인)
map.delete("key");  // true (키 삭제)
map.size;  // 0 (Map에 저장된 항목 수)

MAP 사용 예시

const map = new Map();

// 값 추가
map.set("name", "Eugene");
map.set(123, "numberValue");
map.set({}, "objectValue");

// 값 조회
console.log(map.get("name"));  // "Eugene"
console.log(map.get(123));  // "numberValue"

// 키 존재 여부 확인
console.log(map.has("name"));  // true
console.log(map.has("age"));   // false

// 크기 확인
console.log(map.size);  // 3

// 값 삭제
map.delete("name");
console.log(map.size);  // 2

결론

  1. 객체 ({})는 기본적인 키-값 쌍 저장에 사용되며, 키는 문자열/심볼로 제한됩니다.
  2. Map은 모든 자료형을 키로 사용할 수 있고, 삽입된 순서를 유지하며, 객체보다 다양한 메서드를 제공합니다.
  3. 따라서, 키로 숫자나 객체 등 다양한 자료형을 써야 하거나, 삽입 순서를 유지해야 하는 경우에는 Map을 사용하는 것이 좋습니다.
profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다

0개의 댓글