3.1 Map 컬렉션
ECMAScript 2015 (ES6)에서 JavaScript에 두 가지 새로운 데이터 구조: Map과 Set을 추가했어. 이 데이터 구조는 기존의 객체와 배열에 비해 더 유연하고 효율적인 데이터 컬렉션 저장 및 관리 방법을 제공해.
Map은 key-value 쌍을 저장할 수 있는 데이터 구조야. 여기서 키는 객체와 함수 포함 아무 타입이나 될 수 있어.
1. Map 생성 및 초기화:
const map = new Map();
2. 요소 추가:
set 메소드는 Map에 새로운 key-value 쌍을 추가하는 데 사용돼.
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. 요소 가져오기:
get 메소드는 키를 통해 값을 가져오는 데 사용돼.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.get('key1')); // 'value1'
console.log(map.get(2)); // 'value2'
4. 키 존재 여부 확인:
has 메소드는 Map에 키가 존재하는지 확인해.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false
5. 요소 삭제:
delete 메소드는 키로 요소를 삭제해.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.delete('key1');
console.log(map.has('key1')); // false
6. Map 초기화:
clear 메소드는 Map의 모든 요소를 삭제해.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.clear();
console.log(map.size); // 0
7. Map 반복:
for...of 루프를 사용하여 Map을 반복할 수 있어.
예:
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 'key1: value1'
// '2: value2'
3.2 Set 컬렉션
Set은 고유한 값을 아무 타입이나 저장할 수 있는 데이터 구조야. 객체와 원시 타입 모두 포함될 수 있어.
1. Set 생성 및 초기화:
const set = new Set();
2. 요소 추가:
add 메소드는 Set에 새로운 값을 추가하는 데 사용돼.
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. 값 존재 여부 확인:
has 메소드는 Set에 값이 존재하는지 확인해.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
console.log(set.has(1)); // true
console.log(set.has('value3')); // false
4. 요소 삭제:
delete 메소드는 Set에서 값을 삭제해.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. Set 초기화:
clear 메소드는 Set의 모든 요소를 삭제해.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. Set 반복:
for...of 루프를 사용하여 Set을 반복할 수 있어.
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 Map과 Set 비교
Map의 장점:
- 임의의 키:
Map에서는 키가 객체와 함수 포함 아무 타입이나 될 수 있어. 반면 객체에서는 키가 문자열이나 심볼일 수 밖에 없어. - 정렬된 요소:
Map의 요소는 추가된 순서를 유지해서, 추가된 순서대로 쉽게 반복할 수 있어. - 컬렉션 크기:
size메소드는Map의 요소 개수를 빠르게 알려줘.
Set의 장점:
- 고유한 값:
Set은 모든 요소가 고유하도록 자동으로 보장해. - 정렬된 요소:
Set의 요소도 추가된 순서를 유지해서, 추가된 순서대로 쉽게 반복할 수 있어. - 최적화된 연산:
Set은 요소 추가, 삭제 및 존재 여부 확인에 최적화된 메소드를 제공해.
실용적인 예제들
사용자 정보를 저장하기 위해 Map을 사용하는 예:
const users = new Map();
users.set(1, { name: 'Alice', age: 25 });
users.set(2, { name: 'Bob', age: 30 });
for (const [id, user] of users) {
console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
}
// User ID: 1, Name: Alice, Age: 25
// User ID: 2, Name: Bob, Age: 30
고유한 값들을 필터링하기 위해 Set을 사용하는 예:
const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
const uniqueNumbers = new Set(numbers);
for (const number of uniqueNumbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5
GO TO FULL VERSION