[JavaScript] Map Object (맵)
자바스크립트에서 map은 두 가지이다
1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 새로운 배열로 만들어서 반환한다. 이때 원본 배열에는 영향을 주지 않는다
2. Map : Java의 HashMap와 같은 key:value로 이루어진 자료구조
자바스크립트를 공부하다가 Map이 Java와는 다른 걸 느꼈다. Java에서 Map 객체는 키-값을 쌍으로 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다. 아무 값이라도 키와 값으로 사용할 수 있다. 즉, key:value 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value값을 가져올 수 있다
let max = new Map();
// set으로 맵 객체에 삽입
max.set("id", 0);
max.set("이름", "마이클");
max.set("전공", "영문학");
max.set("나이", 25);
// 이차원 배열로 넘겨주는 것도 가능합니다
let michael = new Map([
["id", 0],
["이름", "마이클"],
["전공", "영문학"],
["나이", 29]
])
// get으로 맵 객체 조회
max.get("이름"); // "마이클"
// delete로 삭제
max.delete("나이"); // 삭제가 성공하면 true를 반환
// clear로 맵 안의 프로퍼티 전부삭제
max.clear();
- 맴 객체는 기존 객체와는 다르게 메소드만을 이용해 값을 넣고 뺀다
- 기본적으로 삽입, 조회, 삭제를 할 수 있다
Array.map()
이러한 map 메서드는 배열을 반복해주는데, callback 함수에서 reutnr한 값으로 (each) 요소를 수정해 준다. map 메서드의 리턴값은 수정된 값으로 생성된 배열이다
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * number);
console.log(numbers); // [1, 2, 3, 4, 5];
console.log(result); // [1, 4, 9, 16, 25]
- 주어진 array의 값들을 map으로 제곱을 해서 다시 result안에 배열을 만들어준다
- 여기서 numbers라는 배열에는 아무런 영향이 없는 걸 볼 수 있다
위에 예시를 for문으로 돌린다면
const numbers = [1, 2, 3, 4, 5];
const result = []; for (i = 0; i < numbers.length; i++) {
result.push(numbers[i] * numbers[i]);
}
console.log(result); // [1, 4, 9, 16, 25]
- 보이다시피 map메서드는 간결하지만 for문을 사용하면 순환이라는 부분까지 직접 처리해야 하기 때문에 좀 더 길고 간결하지가 않다
장점
문자열 아닌 값도 키로 사용 가능하다
객체에서는 문자열 (string) 혹은 심볼 (symbol)만 프로퍼티의 키로 사용할 수 있었지만 맵 객체에서는 함수나 객체를 포함해서 모든 자료형이 키로 쓰일 수 있다
- 문자열이 아닌 숫자일 때 보기 더 편한 경우도 있다
메서드 사용의 명확성
객체처럼 . 이나 []로 접근하지 않고 메소드만으로 객체의 프로퍼티들을 수정하거나 조회할 수 있으므로 객체보다 동작과 의도를 더 정확하게 보여준다
let maxInfoObj = {
name:"voyage",
age:29,
major:"경영정보",
}
const maxInfoMap = new Map([
["name", "voyage"],
["age", 29],
["major", "경영정보"],
])
// 객체 : let으로 선언해 빈 객체 할당해서 빈 객체로 초기화
maxInfoObj = {}
// 맵 객체 : clear 메소드 사용해 빈 맵 객체로 초기화
maxInfoMap.clear()
깔끔한 순회
맴 객체의 가장 장점이라고 생각되는 부분이다. 맴 객체는 그 자체로 for..of문을 통해 순회가 가능하다. 맵 이터레이터의 형태로 이루어지는데 키-값을 쌍으로 묶은 배열이다. entries 메소드로 확인할 수 있다
const maxInfoMap = new Map([
["name", "voyage"],
["age", 29],
["major", "경영정보"],
])
maxInfoMap.entries();
// MapIterator { ["name", "voyage"],["age", 29],["major", "경영정보"]}
for (const [key, value] of maxInfoMap) {
console.log(key, value);
}
// 결과
// "name" "voyage"
// "age" 29
// "major" "경영정보"
주의사항
- map 함수는 객체를 직접 사용하거나 변경시키지는 않지만 callback 함수를 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 된다
- callback 함수가 호출되는 범위는 콜백함수가 처음 호출되기 이전이며, map이 순회하는 도중에 추가된 요소는 접근하지 않는다. 반대로 순회하는 도중 수정이 일어나면 변경된 값이 콜백함수에 전달되고 삭제된 요소는 접근하지 않는다
// array 요소가 추가되는 경우
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => {
numbers.push(number);
return number * number;
});
console.log(result); // [1, 4, 9, 16, 25];
// array 요소가 수정되는 경우
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => {
numbers.pop(); return number * number;
});
console.log(result); // [1, 4, 9, empty × 2];
결론
맵 객체는 객체의 프로퍼티를 자주 변경해야할 때 빛을 발한다. 메서드 이름들이 예측 가능하여 동작이 명확하고, 기존 객체와 달리 순회도 쉽게 이러우져 데이터를 조작하기 적합하다
출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다
https://maxkim-j.github.io/posts/js-map
https://erim1005.tistory.com/entry/Javascript-에서-Object를-해시맵처럼-사용하지-마세요
https://dev-note-97.tistory.com/276