21-2 맵(Map) 2

맵의 요소에 반복 작업하기

  다음 세 가지 메서드를 사용해 맵의 각 요소에 반복 작업을 할 수 있다.

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환한다.
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환한다.
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다. 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.

let fruit = new Map([
	['apple', 1000],
    ['banana', 3000],
    ['orange', 1500]
]);

// 키(key)를 대상으로 순회합니다.
for (let keys of fruit.keys()) {
	console.log(keys); // apple banana orange 순으로 출력
}

for (let values of fruit.values()) {
	console.log(values); // 1000 3000 1500 순으로 출력
}

for (let entries of fruit) { // let entries of fruit.entries()와 동일
	console.log(entries); // ['apple', 1000] ['banana', 3000] ['orange', 1500] 순으로 출력
}

 

 - 맵은 값이 삽입된 순서대로 순회를 실시합니다. 객체가 프로퍼티 순서를 기억하지 못하는 것과는 다릅니다. 여기에 더하여 맵은 배열과 유사하게 내장 메서드 forEach도 지원합니다.

fruit.forEach((val, key) => {
    console.log(`${key}: ${val}`);
}) // apple: 1000  banana: 3000  orange: 1500 순으로 출력

 

---

 

Object.entries: 객체를 맵으로 바꾸기

 - 각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 맵에 전달해 새로운 맵을 만들 수 있다.

 - 평범한 객체를 가지고 맵을 만들고 싶가면 메서드 Object.entrice()를 활용하면 된다. 이 메서드는 객체의 키-값을 요소 ([key, value])로 가지는 배열을 반환한다.

 

let fruit = {
	name: 'apple',
    price: 1000
};

let map = new Map(Object.entries(fruit));
map.get('name'); // apple

 

---

 

Object.fromEntries: 맵을 객체로 바꾸기

 - Object.fromEntries를 사용하면 각 요소가 [키, 값] 쌍인 배열을 객체로 바뀐다.

let fruit = new Map([
	['apple', 1000],
    ['banana', 3000],
    ['orange', 1500]
]);

let fruitObject = Object.fromEntries(fruit);

fruitObject.banana; // 3000

 - 자료가 맵에 저장되어있는데, 서드파티 코드에서 자료를 객체형태로 넘겨받길 원할 때 이 방법을 사용할 수 있습니다.

let fruit = new Map();
map.set('apple', 1000);
map.set('banana', 3000);
map.set('orange', 1500);

let fruitObj = Object.fromEntries(fruit); // let fruitObj = Object.fromEntries(fruit.entries()); 동일

fruitObj.banana; // 3000

 

---

공부한 곳!! 모던 JavaScript 튜터리얼

바로가기!!