코드에 현실 세계를 반영하기 위해서 다양한 자료구조들이 있지만 기존의 것들 만으로는 부족하기 때문에 Map, Set이 추가되었다. 이 Map과 Set은 기존의 자료구조와 비슷한 점이 있으면서도 다른 점이 있다. 기존에 사용하던 객체와 배열로는 구현하기 어려웠던 특정한 기능들 또한 제공한다.
Map
Map은 객체와 같이 key-value의 형태로 데이터를 저장한다는 점에서 객체와 유사하다. 하지만 몇 가지 중요한 차이점들이 존재한다.
1. 차이점
- 키의 값으로 모든 타입의 값을 사용할 수 있다. (객체는 문자열 형태로 저장)
- 데이터의 삽입 순서를 가지고 있다.
- 크기를 쉽게 얻을 수 있다.
- 반복이 쉽다.
2. Map 생성하기
const myMap = new Map();
Map( ) 생성자를 통해 Map을 생성하고 반드시 new 키워드가 있어야 한다. new 키워드가 없다면 타입 에러가 발생한다.
3. Map에 데이터 추가하기
const myMap = new Map(); // myMap.set(key, value) 의 형식
myMap.set(1, 'one')
myMap.set(2, 'two')
myMap.set(3, 'three')
console.log(myMap)
// Map(3) {1 => 'one', 2 => 'two', 3 => 'three'} 출력
Map( ) 생성자를 통해 Map을 생성하고 set(key, value) 메서드를 통해 Map에 데이터를 추가할 수 있다. 위와 같이 set( ) 메서드를 통해 생성한 맵은 new Map( ) 생성자에 2차원 배열을 통해 한 번에 생성할 수 있다.
const myMap = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
console.log(myMap);
// Map(3) {1 => 'one', 2 => 'two', 3 => 'three'}
Map은 값이 삽입된 순서를 기억하기 때문에 set( )을 통해 삽입했다면 그 삽입한 순서대로 순서를 가지고 있다.
4. Map 데이터 가져오기
const myMap = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
console.log(myMap.get(1)) // one 출력
get(key) 메서드를 통해 값을 가져올 수 있다. key가 존재하지 않는다면 undefined를 출력한다.
5. 그 외 다양한 메서드
const myMap = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
console.log(myMap.has(1)) // true
console.log(myMap.delete(1)) // Map(2) {2 => 'two', 3 => 'three'}
console.log(myMap.size) // 요소의 크기 확인 2출력
console.log(myMpa.clear()) // 모든 요소를 삭제
- has(key) : 메서드를 통해 주어진 키의 요소의 존재 여부를 불리언 값으로 반환한다.
- delete(key) : 메서드를 통해 주어진 키의 요소를 삭제한다.
- size : 속성을 통해 요소의 크기를 확인한다.
- clear( ) : 메서드를 통해 모든 요소를 삭제한다.
6. Map의 반복작업
const myMap = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
console.log(myMap.keys()) // MapIterator {1, 2, 3}
console.log(myMap.values()) // MapIterator {'one', 'two', 'three'}
console.log(myMap.entries()) // MapIterator {1 => 'one', 2 => 'two', 3 => 'three'}
Map은 반복작업을 수행할 수 있는데 이는 Map 자체적으로 iterable(반복 가능) 하기 때문이다. Map의 반복작업에 수행되는 메서드는 keys( ), values( ), entries( ) 가 있는데 모두 iterable 한 객체를 반환한다. keys( )는 각 요소의 키를 모아 반환, values( )는 각 요소의 value를 모아 반환, entries( )는 key, value를 한 쌍으로 하여 반환한다. 그렇기 때문에 for ...of 문을 통해 반복을 사용할 수 있는 아래의 예시를 보면 좀 더 이해하기 쉽다.
const myMap = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
const myObj = {
1: "one",
2: "two",
3: "three",
};
for (const [key, value] of myMap) {
console.log(value);
}
for (const value of myObj) {
console.log(value); //TypeError: myObj is not iterable
}
각각의 Map과 객체를 만들고 각각의 값에 접근하기 위해 for ... of 문을 사용하려고 하면 객체의 for 문에서 타입 에러가 발생하는데 iterable 하지 않다. 즉 반복이 가능하지 않다는 문구가 출력된다. Map은 바로 for ...of 문을 사용해서 key 값과 value 값에 접근할 수 있다.
for (const key in myObj) {
console.log(myObj[key]);
}
하지만 객체는 for ... in 문을 사용하여 key에 접근 후 다시 값에 접근해야 하는 문제가 있다. 이것이 iterable의 차이라고 볼 수 있다.
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}
하지만 Object.entries( )를 사용해서 각각의 키와 값에 접근할 수 있는데 객체를 iterable 한 key, value 쌍의 배열로 반환하여 주기 때문에 for ...of 문을 사용할 수 있다. 하지만 순서를 가지고 있는 Map 과 다르게 Object.entries( )는 순서를 가지지 않는다.
'JavaScript' 카테고리의 다른 글
자바스크립트 실행 컨텍스트 복습 및 정리하기 (1) | 2024.10.11 |
---|---|
자바스크립트 자료형 Set 학습 및 정리하기 (0) | 2024.10.10 |
자바스크립트와 객체 지향 프로그래밍 (0) | 2024.10.08 |
JavaScript 변수 선언 var, let, const의 차이와 활용 (0) | 2024.10.04 |
현대적인 네트워크 통신 방법 : fetch API (0) | 2024.10.01 |
댓글