9. 맵과 펼침 연산자로 키-값을 순회하자
for-in 과 for-of 로도 순회를 할 수 있다. 하지만 맵은 직접 순회를 할 수 있다.
그전에 객체의 순환을 보고가자. 아래의 코드는 객체를 직접 순회하지 않고 정보를 꺼내어 순환한다.
const filters = {
색상: `검정색`,
견종: `래브라도레트리버`,
};
function getAppliedFilters(filters) {
const keys = Object.keys(filters);
const applied = [];
for (const key of keys) {
applied.push(`${key}:${filters[key]}`);
}
return `선택한 조건은 ${applied.join(`, `)} 입니다.`
}
우선, Object.keys()로 빼낸 정보를 배열로 옮겨(Object.keys()는 배열로 반환)놓는다. 그리고 for문으로 순회를 한다.
복잡할 뿐더러, 객체를 정렬할 수 없기에 키를 정렬해야한다.
function getSortedAppliedFilters(filters) {
const keys = Object.keys(filters);
keys.sort();
const applied = [];
for (const key of keys) {
applied.push(`${key}:${filters[key]}`);
}
return `선택한 조건은 ${applied.join(`, `)} 입니다.`;
}
위의 코드는 간단한 순회를 위해 관리할 것이 너무 많다....
하지만 맵과 이전시간에 잠깐 나온 맵이터레이터를 이용하면 쉽게 순회할 수 있다.
const filters2 = new Map()
.set(`색상`, `검정색`)
.set(`견종`, `래브라도레트리버`);
function checkFilters(filters) {
for (const entry of filters) {
console.log(entry);
}
}
이때 이터레이터는 키-값 쌍을 넘겨줍니다.
set()을 이용해 맵을 구성했지만 정보를 배열로 변환하여 넘겨줌.
하지만 entries()를 이용하면 맵에 있는 키-값을 쌍으로 묶는 맵이터레이터로 반환한다.
filters2.entries();
// MapIterator { [ `색상`, `검정색 ], [ `견종`, `래브라도레트리버` ] }
맵이터레이터는 중요하니 꼭 기억하자.
일단 맵을 순회할 때 키와 값을 쌍으로 받아서 사용한다는 점만 기억해도 된다.
for문을 이용해서 맵을 다시 순회시켜보자. for문을 사용하면 더 단순하고 원래 데이터 구조를 유지하는 코드 작성이 가능하다.
function getAppliedFilters2(filters) {
const applied = [];
for (const [key, value] of filters) {
applied.push(`${key}:${value}`);
}
return `선택한 조건은 ${applied.join(`, `)} 입니다.`;
}
위의 코드에서는 맵이 순서를 저장해서 좋지만, 정렬 메서트가 내장되어 있지 않다는 점이 안좋다.
즉 filters.sort()처럼 정렬이 불가능 하다는 것이다.
하지만 펼침연산자를 이용하여 이러한 문제를 해결할 수 있다. 또한 맵 객체를 다른곳에 펼처 넣을수 도 있다.
const arry1 = [...filters2];
한번 정렬을 하는 코드를 작성해 보자
function sortByKey(a, b) {
return a[0] > b[0] ? 1 : -1;
}
function getSortedAppliedFilters2(filters) {
const applied = [];
for (const [key, value] of [...filters].sort(sortByKey)) {
applied.push(`${key}:${value}`);
}
console.log(applied.join(`, `));
return `선택한 조건은 ${applied.join(`, `)} 입니다.`;
}
이것이 우리가 원하던 결과이다. 하지만 문제도 있다.
첫번째 함수에서 정렬의 규칙을 만들고, 두번째 함수의 for문에서 ❌맵이아닌 ⭕새로운 배열을 순회하며 정렬을 한다는 것을 볼 수 있다. 맵을 배열로 변환한 덕분에 함수를 훨씬 단순하게 만들 수 있었다.
이와같이 , 배열의 모든 값을 같은 방식으로 바꾸기 때문에 let arry = [] 같이 결과 수집을 위해 배열을 만들 필요가 없다.
그냥 map() 메서드를 이용하면 된다. 아래의 코드를 보자.
function getAppliedFilters3(filters) {
const applied = [...filters].map(([key, value]) => {
return `${key}:${value}`;
});
return `선택한 조건은 ${applied.join(`, `)} 입니다.`;
}
또한, 체이닝을 통해 정렬도 가능한 코드를 아래에 작성해보자
function getAppliedFilters4(filters) {
const applied = [...filters]
.sort(sortByKey)
.map(([key, value]) => {
return `${key}:${value}`;
});
return `선택하신 조건은 ${applied.join(`, `)} 입니다.`;
}
이렇게 오늘도 끝났다.... 이번 파트가 제일 이해하기 힘들었다....
지금 정리하면서 다시 이해한 것도 있었다....
그정도로 내가 이 파트에 대해 이해력이 낮은거같다...
이 글을 작성한 후 다시 한번 확인해봐야겠다.
오늘도
Just 두 IT!!!
