Map 객체의 특징과 예시
JavaScript에서 Map 객체는 객체와 유사하지만 조작을 위한 추가 기능과 메서드가 있는 키-값 쌍의 모음입니다.
1. key-value : 맵 개체는 함수, 개체 및 문자열 및 숫자와 같은 원시 데이터 유형을 포함하여 모든 값을 키 또는 값으로 저장할 수 있습니다.
2. 반복가능: Map 객체에는 키, 값 및 키-값 쌍을 반복하는 방법이 내장되어 있으므로 일반 객체보다 작업하기가 더 쉽습니다.
3. size 속성: 맵 개체에는 맵의 키-값 쌍 수를 반환하는 크기 속성이 있습니다.
4. 자동 문자열화 불가능: 개체와 달리 맵은 키를 문자열로 자동 변환하지 않습니다. 이를 통해 기호와 같은 문자열이 아닌 유형을 포함하여 모든 데이터 유형의 키를 저장할 수 있습니다.
즉, 들어온 데이터 타입 그대로를 유지합니다. 마치 어떤 자료형도 담을 수 있는 배열의 특성을 닮았습니다. |
맵 키는 임의의 값일 수 있으며 기본적으로 고유하기 때문에 맵은 고유한 사용자 목록과 같은 고유한 값의 컬렉션으로 작업할 때 유용합니다. 또한 개체보다 반복하기가 더 쉬워서 특정 사용 사례에 유용한 대안이 됩니다.
// Map 객체 생성
const map = new Map();
//키-값 쌍 데이터를 Map 에 셋팅한다.
map.set("name", "John");
map.set("age", 30);
// map.get("키 명") 으로 해당 키의 값에 접근할 수 있다.
console.log(map.get("name")); // outputs "John"
console.log(map.get("age")); // outputs 30
// map.has("키 명") 으로 해당 키가 map에 존재하는지 알 수 있다.(true/false)
console.log(map.has("name")); // outputs true
// 반복이 가능하므로 각 키 값을 각각 변수에 담아서 저장할 수 있다.
for (let [key, value] of map) {
console.log(key + ": " + value);
}
// 위 예시의 출력값
// outputs "name: John"
// "age: 30"
//map.size 을 사용하면 map에서 key가 몇 개 있는지 갯수를 반환한다.
// Get the number of key-value pairs in the map
console.log(map.size); // outputs 2
일반 객체와 Map 객체의 성능 비교
JavaScript에서 일반 객체와 Map 객체의 성능상 차이점은 몇 가지 측면에서 나타납니다.
검색 속도
일반 객체: 일반 객체의 속성에 접근할 때는 해시 맵과 유사한 방식으로 동작합니다. 이는 일반 객체의 속성 검색이 일반적으로 매우 빠르다는 것을 의미합니다. 하지만 속성 이름이 문자열로 변환되어야 하기 때문에 특정 경우에는 성능에 영향을 줄 수 있습니다.
Map 객체: Map 객체는 키-값 쌍을 저장하며, 키를 사용하여 값을 검색합니다. 이는 특정 상황에서 일반 객체보다 느릴 수 있지만, 특히 키가 객체나 함수와 같은 복잡한 데이터 타입인 경우에 유용합니다.
이터레이션 성능
일반 객체: 객체의 속성을 순회할 때 일반적으로 for...in 루프를 사용합니다. 이는 객체의 속성을 순회하는 데 있어 일반적으로 빠르지만, 프로토타입 체인 상에 있는 속성도 열거될 수 있다는 단점이 있습니다.
Map 객체: Map 객체의 경우 forEach 메서드나 for...of 루프를 사용하여 순회할 수 있습니다. 이는 Map 객체의 키-값 쌍을 순회하는 데 있어 더 직관적이고 효율적일 수 있습니다.
메모리 사용
일반 객체: JavaScript 엔진은 일반 객체를 최적화하기 위해 많은 노력을 기울입니다. 일반 객체는 해시 테이블과 유사한 내부 구조를 가지고 있으며, 메모리 사용을 최소화하기 위해 노력합니다.
Map 객체: Map 객체는 일반 객체보다 메모리를 더 많이 사용할 수 있습니다. 각 키-값 쌍은 별도의 객체로 저장되므로 메모리 사용이 더 많이 발생할 수 있습니다.
정리하자면...
일반 객체와 Map 객체는 각각의 장단점이 있으며, 사용 사례에 따라 성능상의 차이점이 발생할 수 있습니다.
종종 단순한 키-값 저장용으로는 일반 객체가 충분하고 더 빠를 수 있지만, 특정 상황에서는 Map 객체가 더 유용할 수 있습니다.
'자바스크립트' 카테고리의 다른 글
[javascript] 자바스크립트 내부 동작 (0) | 2023.02.09 |
---|---|
[간단정리js] aysnc / await (0) | 2023.01.29 |
[간단정리js] this 키워드 (0) | 2023.01.29 |
[간단정리 js] 실행 컨텍스트 (0) | 2023.01.29 |
[간단정리 js] promise "비동기 작업의 최종 완료 또는 실패를 나타내는 개체" (0) | 2023.01.29 |