JavaScript에는 키-값 쌍을 저장하고 관리하기 위해 다양한 방법이 있습니다. 그 중에서도 Map 객체와 일반 객체({})는 많이 사용되는 두 가지 주요 방법입니다. 이 글에서는 Map과 일반 객체의 차이점, 선언 및 사용 방법, 그리고 성능 비교에 대해 자세히 살펴보겠습니다.
Map과 일반 객체의 차이점
객체 ({}) |
Map | |
| 키의 유형 | 키는 문자열 또는 심볼만 가능 | 키는 문자열, 객체, 함수 등 모든 유형 가능 |
| 순서 보장 | 키의 순서가 보장되지 않음 | 삽입된 순서대로 키의 순서를 유지 |
| 크기 | Object.keys(obj).length와 같은 방법으로 크기 측정 |
size 속성이 있어 map.size로 크기 확인 |
| 성능 |
|
|
Map과 객체의 선언 차이점
객체 ({})
|
1 |
var authToken = {}; // 또는 let authToken = {}; |
객체 리터럴로 초기화된 빈 객체를 만듭니다. 키-값 쌍을 추가하는 방식은 다음과 같습니다.
|
1 |
authToken['exampleCallType'] = 'exampleToken'; |
Map
|
1 |
let authToken = new Map(); |
Map 객체로 초기화된 빈 맵을 만듭니다. 키-값 쌍을 추가하는 방식은 다음과 같습니다.
|
1 |
authToken.set('exampleCallType', 'exampleToken'); |
예제: Map을 사용하여 키-값 쌍 저장 및 로그 출력
다음은 Map을 사용하여 주어진 코틀린 코드를 JavaScript로 변환하고 결과를 로그로 출력하는 예제입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 객체를 사용하여 gtvAuthToken을 선언 var authTokens = {}; // callType과 result 변수를 예제로 정의 var exampleCallType = "exampleCallType"; // 실제 값으로 대체 var result = { authToken: "exampleToken" // 실제 값으로 대체 }; // result에서 "authToken" 값을 추출하여 authTokens 객체에 저장 authTokens[exampleCallType] = result.authToken; // 결과를 로그로 출력 console.log(authTokens); // { exampleCallType: 'exampleToken' } |
예제: 일반 객체를 사용하여 키-값 쌍 저장 및 로그 출력
다음은 일반 객체를 사용하여 동일한 작업을 수행하는 예제입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Map을 사용하여 authTokens을 선언 let authTokens = new Map(); // callType과 result 변수를 예제로 정의 let exampleCallType = "exampleCallType"; // 실제 값으로 대체 let result = new Map(); result.set("authToken", "exampleToken"); // 실제 값으로 대체 // result에서 "authToken" 값을 추출하여 authTokens Map에 저장 authTokens.set(exampleCallType, result.get("authToken")); // 결과를 로그로 출력 console.log(authTokens); // Map { 'exampleCallType' => 'exampleToken' } |
객체와 Map의 성능 차이
JavaScript에서 일반 객체와 Map의 성능 차이는 특정 시나리오에 따라 다를 수 있습니다. 두 자료형은 서로 다른 목적으로 설계되었으며, 성능 특성도 다릅니다. 여기 몇 가지 중요한 성능 관련 차이점을 설명합니다.
삽입 및 삭제 성능
- 객체 (
{}): 삽입 및 삭제가 매우 빠르며, 객체 크기에 관계없이 상수 시간(O(1))이 걸립니다. 객체의 키는 문자열이나 심볼이어야 합니다. - Map: Map 역시 삽입 및 삭제가 빠르며 상수 시간(O(1))이 걸립니다. 다양한 유형의 키를 지원하며, 객체 키나 함수 키도 사용할 수 있습니다.
검색 및 접근 성능
- 객체 (
{}): 키를 사용한 값 접근 및 검색은 상수 시간(O(1))이 걸립니다. 객체에 포함된 키의 개수가 많아질수록 성능이 약간 저하될 수 있습니다. - Map: Map의 검색 및 접근도 상수 시간(O(1))이 걸립니다. Map은 해시 테이블을 사용하므로, 많은 양의 데이터를 처리할 때 더 일관된 성능을 제공합니다.
순회 성능
- 객체 (
{}): 객체의 키를 순회하려면for...in루프 또는Object.keys(),Object.values(),Object.entries()와 같은 메서드를 사용해야 합니다. 순회 성능은 키의 개수에 비례합니다(O(n)). - Map: Map은
forEach메서드를 제공하며, Map의 키, 값, 엔트리를 직접 순회할 수 있는 이터레이터(map.keys(),map.values(),map.entries())를 제공합니다. 순회 성능은 키의 개수에 비례합니다(O(n)).
메모리 사용
- 객체 (
{}): 일반 객체는 메모리를 효율적으로 사용하지만, 내부적으로 해시 테이블 구조를 사용하지 않습니다. - Map: Map은 해시 테이블을 사용하여 키와 값을 저장하므로, 매우 많은 데이터를 다룰 때 메모리 사용량이 더 많을 수 있습니다.
기타 기능
- 객체 (
{}): 단순한 키-값 저장에 적합합니다. 프로토타입 체인 상속의 영향을 받을 수 있습니다. - Map: 다양한 키 유형을 지원하며, 삽입 순서를 유지합니다.
size속성으로 항목의 개수를 쉽게 알 수 있습니다. 추가 기능(map.set(),map.get(),map.has(),map.delete(),map.clear())을 제공합니다.
실제 성능 테스트
간단한 성능 테스트를 통해 차이를 확인할 수 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
console.time('Object Insertion'); let obj = {}; for (let i = 0; i < 1000000; i++) { obj[i] = i; } console.timeEnd('Object Insertion'); console.time('Map Insertion'); let map = new Map(); for (let i = 0; i < 1000000; i++) { map.set(i, i); } console.timeEnd('Map Insertion'); console.time('Object Lookup'); for (let i = 0; i < 1000000; i++) { let value = obj[i]; } console.timeEnd('Object Lookup'); console.time('Map Lookup'); for (let i = 0; i < 1000000; i++) { let value = map.get(i); } console.timeEnd('Map Lookup'); |
위 코드는 객체와 Map의 삽입 및 검색 성능을 비교하는 간단한 테스트입니다. 실제 성능은 브라우저 또는 JavaScript 엔진의 구현에 따라 다를 수 있습니다.
결론
- 객체는 단순한 키-값 쌍 저장에 유용하며, 키는 문자열 또는 심볼로 제한됩니다.
- Map은 더 다양한 유형의 키를 지원하고, 삽입 순서가 유지되며, 크기 확인과 같은 추가 기능을 제공합니다.
- 특정 시나리오에서 성능이 중요한 경우, 객체와 Map의 성능 특성을 고려하여 적합한 자료형을 선택하는 것이 좋습니다.
핵심 요약
- 객체는 키-값 쌍을 저장하는 데 유용하며, 키는 문자열 또는 심볼만 될 수 있습니다.
- Map은 다양한 유형의 키를 지원하고, 삽입 순서를 유지하며, 크기를 쉽게 확인할 수 있는
size속성을 제공합니다. - 성능: Map은 대용량 데이터 처리에서 더 나은 성능을 제공할 수 있으며, 다양한 유형의 키를 지원합니다.
용어 정리
- 객체 (
{}): 키-값 쌍을 저장하는 JavaScript의 기본 자료형으로, 키는 문자열 또는 심볼만 가능합니다. - Map: ES6에서 도입된 키-값 쌍을 저장하는 객체로, 모든 유형의 키를 지원하고 삽입 순서를 유지합니다.
- 해시 테이블: 데이터를 키-값 쌍으로 저장하고 검색하는 자료 구조로, Map의 내부 구현 방식 중 하나입니다.
- 프로토타입 체인: JavaScript 객체가 상속을 구현하는 메커니즘으로, 객체의 키-값 접근 시 체인을 따라 검색합니다.
