[JS] map 객체에서 key : value vs 객체

JavaScript에서 객체(object)는 키(key)와 값(value)의 쌍으로 이루어져 있다.

 

Map 객체와는 다르게 객체는 키와 값이 각각 문자열, 숫자, 심볼 등의 타입으로 구성될 수 있습니다.

const map = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
};

console.log(map["key1"]); // "value1"
console.log(map["key2"]); // "value2"
console.log(map["key3"]); // "value3"

위 예시에서 map 객체는 세 개의 키와 값을 가지고 있습니다.

"key1", "key2", "key3"는 각각 키(key)이며,

"value1", "value2", "value3"는 각각 값(value)입니다.

객체와 Map 객체의 차이점:

• 객체(Object): JavaScript의 기본 데이터 구조로, 키(key)와 값(value)의 쌍으로 구성됩니다. 키는 반드시 문자열 혹은 심볼이어야 하며, 값은 어떤 데이터 타입이든 가능합니다.
• Map 객체: ES6에서 도입된 데이터 구조로, 키(key)에 다양한 데이터 타입을 사용할 수 있으며, 순서가 보장됩니다. 또한, 객체보다 나은 기능적 특성(크기 속성, 직접적인 반복, 훨씬 쉬운 키-값 쌍 등)을 제공합니다.

// 빈 Map 객체 생성
let map = new Map();

// 요소 추가
map.set("key1", "value1");
map.set(2, "value2");
map.set({}, "value3");

// 요소 접근
console.log(map.get("key1")); // "value1"
console.log(map.get(2)); // "value2"

// 요소 삭제
map.delete("key1");

// 요소 존재 여부 확인
console.log(map.has("key1")); // false

// Map 객체 크기 확인
console.log(map.size); // 2 (남은 요소는 2개)

// Map 객체 순회 (for...of 사용)
for (let [key, value] of map) {
    console.log(key + " = " + value);
}
// 출력:
value1
value2
false
2
2 = value2
[object Object] = value3

주요 기능 설명:

1. 생성 및 요소 추가: new Map()을 사용하여 빈 Map 객체를 생성하고, set() 메서드를 통해 특정 키에 값을 추가합니다. 여기서 키는 어떤 데이터 타입이든 가능합니다.
2. 요소 접근: get() 메서드를 사용하여 특정 키의 값을 가져올 수 있습니다.
3. 요소 삭제: delete() 메서드를 사용하여 특정 키와 그에 해당하는 값을 삭제할 수 있습니다.
4. 요소 존재 여부 확인: has() 메서드를 사용하여 특정 키가 Map 객체에 존재하는지 여부를 확인할 수 있습니다.
5. 크기 확인: size 프로퍼티를 사용하여 Map 객체의 크기(요소의 개수)를 확인할 수 있습니다.
6. 순회: for...of 루프를 사용하여 Map 객체의 모든 키-값 쌍을 순회할 수 있습니다. 이 때 각 요소는 [key, value] 형태의 배열로 반환됩니다.

Map 객체의 장점:

• 다양한 데이터 타입을 키로 사용할 수 있습니다.
• 순서가 유지되기 때문에 요소의 순서대로 처리할 수 있습니다.
• 직관적인 메서드를 통해 요소 추가, 삭제, 순회 등을 쉽게 할 수 있습니다.

주의사항:

• Map 객체의 키로는 객체의 주소(reference)가 아닌, 객체 자체를 사용해야 합니다. 객체를 키로 사용할 경우에는 객체가 참조하는 주소가 아니라는 점에 유의해야 합니다.