자바스크립트의 Map 객체는 key/value 쌍의 모음으로, key는 객체, 함수 등 모든 타입이 될 수 있습니다.
객체를 생성하고 사용하는 방법과 일반 자바스크립트 Object와의 차이점을 알아보겠습니다.
스크립트를 작성하다 보면 key/value 쌍을 저장하고 조작해야하는 상황을 자주 보게됩니다.
기본 Object로도 이러한 작업을 할 수 있지만 Map 객체는 데이터 처리를 단순화 하고 효율적으로 처리하게 해주는 이점이 있습니다.
이 포스트에서는 Map 객체가 무엇인지, 어떻게 생성하고 사용하는지, 기본 Object와는 어떤 차이점이 있는지 알아보겠습니다.
Table of Contents
Map 객체란?
이는 key/value 쌍의 모음으로, key는 객체나 함수를 포함한 모든 타입이 될 수 있습니다.
여기서 연관된 key를 기반으로 value를 효율적으로 저장하고 검색할 수 있습니다.
또한 데이터 관계를 관리하고 특정 key와 관련된 value를 추가, 제거, 업데이트하는 등의 작업을 하는 간단하고 직접적인 방법을 제공합니다.
Map 객체 생성
새로운 객체를 생성하려면 다음과 같이 하면됩니다:
const map = new Map();위 코드에서는 new 키워드를 사용해 비어있는 새로운 객체를 생성하고 변수에 할당했습니다.
객체 생성 시 데이터를 초기화하려면 key/value 쌍의 배열을 전달하면 됩니다:
const map = new Map([
["key1", "value1"],
["key2", "value2"],
["key3", "value3"],
]);위의 코드에서는 세 개의 key/value 쌍으로 초기화한 객체를 생성했습니다.
Map 객체 사용 방법
객체가 생성되면 객체의 프로토타입에서 제공하는 다양한 메소드를 사용하여 데이터를 조작할 수 있습니다.
몇 가지 일반적인 작업을 살펴보겠습니다:
key/value 쌍 추가 및 갱신
객체의 특정 key와 value를 추가하거나 갱신하려면 set() 메소드를 사용할 수 있습니다.
개발자 도구를 열어 다음을 테스트 해보겠습니다:
const map = new Map();
map.set("key1", "value1");
map.set("key2", "value2");
console.log(map);
console.log() 메소드로 map 객체의 값을 출력해 보면 두 개의 key/value 쌍이 추가된 것을 확인할 수 있습니다.
여기서 이미 존재하는 key를 넣을 경우 set() 메소드는 해당 key의 value를 갱신합니다.
const map = new Map();
map.set("key", "value");
map.set("key", "updated value");
console.log(map);
value 검색
key를 기반으로 객체의 value를 검색하려면 get() 메소드를 사용할 수 있습니다.
const map = new Map([
["key1", "value1"],
["key2", "value2"],
]);
const value = map.get("key1");
console.log(value);
위 코드에서는 두 개의 key/value 쌍이 있는 객체를 생성했습니다.
그 다음 get() 메소드를 사용하여 key가 “key1″인 value를 검색했습니다.
key 존재 여부 확인
객체에 특정 key가 존재하는지 확인하려면 has() 메소드를 사용하면 됩니다.
const map = new Map([
["key1", "value1"],
["key2", "value2"],
]);
console.log(map.has("key1"));
console.log(map.has("key3"));
예제에서는 두 개의 데이터를 가지는 객체를 생성했고 has() 메소드를 사용하여 “key1″과 “key3″이 존재하는지 확인했습니다.
key/value 쌍 제거
객체에서 key/value 쌍을 제거하려면 delete() 메소드를 사용할 수 있습니다.
const map = new Map([
["key1", "value1"],
["key2", "value2"],
]);
map.delete("key1");
console.log(map);
이번에도 두 개의 데이터를 가지는 객체를 생성하고 delete() 메소드를 통해 key가 “key1″인 쌍을 제거했습니다.
Map 객체의 크기 확인
객체의 크기를 가져오려면 size 속성을 사용하면 됩니다.
const map = new Map([
["key1", "value1"],
["key2", "value2"],
]);
console.log(map.size);
이번 예제에서는 객체의 size 속성을 통해 객체의 크기를 출력했습니다.
Map vs. Standard Objects
표준 자바스크립트 객체(예: {})는 일반적으로 key/value 저장에 사용되지만, Map 객체는 특정 시나리오에서 더 좋은 몇 가지 장점을 가지고 있습니다.
- Flexible key types: 이 객체는 객체, 함수, 프리미티브를 포함한 모든 데이터 타입을 key로 허용하는 반면 표준 객체는 숫자, 문자열 또는 기호 key만 허용합니다.
- Maintaining insertion order: 이 객체는 삽입된 key/value 쌍의 순서를 유지하는 반면, 표준 객체는 키 순서를 보장하지 않습니다.
- Iterating with ease: key/value 쌍을 반복하는 forEach() 및 entries()와 같은 빌트인 메소드를 제공하므로 자료구조 조작이 더 간단해집니다.
- Efficient size retrieval: 이 객체는 전용 size 속성이 있어 key/value 쌍의 갯수를 빠르게 검색할 수 있는 반면, 표준 객체는 수동으로 계산하거나 정확한 개수를 얻기 위해 Object.keys() 메소드를 사용해야 합니다.
key를 문자열로만 쓰거나 간단한 데이터 조작만 할 경우 표준 객체가 더 적합한 선택일 수 있다는 점을 기억해야합니다.
정리
자바스크립트의 Map 객체는 key/value 쌍을 저장하고 조작하는 강력하고 유연한 방법을 제공합니다.
다양한 key 유형을 처리하고 삽입 순서를 유지하며 편리한 반복 루틴을 제공하는 메소드 때문에 특정 시나리오에서 표준 객체 보다 이점이 있습니다.
개발자는 Map 객체를 생성하고 사용하는 방법을 이해함으로써 이 기능을 활용해 보다 표현력 있고 효율적인 코드를 작성할 수 있습니다.