코테하면서 해시맵을 배우게되었습니다.
객체랑 유사하지만, 훨씬 활용도가 높습니다.
Map은 JavaScript의 내장 객체 중 하나로, 키와 값을 저장하는 데이터 구조입니다. Map과 일반 객체 {}는 비슷해 보이지만, 중요한 차이점이 있습니다. 아래에서 자세히 설명할게요.
const obj = {};
obj["key"] = "value";
obj[123] = "number"; // 키가 "123"으로 변환됩니다.
console.log(obj); // { "key": "value", "123": "number" }
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' }
객체는 작은 규모에서는 성능이 좋을 수 있지만, 키의 갯수가 많아질수록 해시 테이블을 사용하는 Map이 성능적으로 더 유리할 수 있습니다.
코드 복사
const obj = {};
obj["key"] = "value"; // 키 추가
delete obj["key"]; // 키 삭제
console.log("key" in obj); // true (키 존재 여부 확인)
const map = new Map();
map.set("key", "value"); // 키-값 추가
map.get("key"); // "value" (값 가져오기)
map.has("key"); // true (키 존재 여부 확인)
map.delete("key"); // true (키 삭제)
map.size; // 0 (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
결론
- 객체 ({})는 기본적인 키-값 쌍 저장에 사용되며, 키는 문자열/심볼로 제한됩니다.
- Map은 모든 자료형을 키로 사용할 수 있고, 삽입된 순서를 유지하며, 객체보다 다양한 메서드를 제공합니다.
- 따라서, 키로 숫자나 객체 등 다양한 자료형을 써야 하거나, 삽입 순서를 유지해야 하는 경우에는 Map을 사용하는 것이 좋습니다.