프로그래밍 언어/JavaScript

[JS] Map 사용하기 : prototype으로부터 안전하다

Julie825 2024. 7. 23. 16:20

Map 자료구조란

key와 value를 묶어서 저장할 때 유용한 자료구조이다.

단순히 두 값을 묶을 뿐만 아니라, key를 통해 빠르게 저장된 값을 조회할 수 있다.

따라서 map에서의 key는 항상 유일해야하며, 기준이 되는 연산자는 === 이다.

 

Object와 비슷하게 보일 수도 있다. 실제로 여기 있는 기능 모두 object를 사용해서 구현할 수 있다.

다만 Map 객체와 달리 Object는 프로토타입에 정의된 기본키를 가져서, 예상하지 못한 항목이 추가될 수 있다는 점이 다르다.

object literal 표현식은 정말 인스턴스를 표현하거나 enum class를 구현할 때 사용하고,

key - value 쌍을 저장하고 가공하기 위한 용도로는 명시적으로 Map 객체를 사용하는게 좋다고 생각한다.

 

Map 초기화

// 빈 맵 
let map1 = new Map();

// 이중배열로 초기화한 맵
let map2 = new Map([['a', 1]]); // index 1 이후 값은 무시한다.
let map3 = new Map(['a', 1,2,3,4,5]); // Map(1) { 'a' => 1 }

 

Map 다루기

  • 추가 및 수정
map1.set(키, 값);
// [] 표현법은 속성으로 사용된다.
// 키 충돌시 업데이트 된다.
  • 조회
map1.get(키); // 없는키에 접근하면 undefined 반환
  • 키 존재 확인
map1.has(키);
  • 삭제
map1.delete(키); // 작업 결과는 boolean 형태로 반환된다.

 

Array를 Map으로 바꾸기

const arr = [1, 2, 3]

위와같은 배열의 원소들을 키값으로 하는 Map 객체를 생성하려면 reduce 메서드를 사용하면 된다.

// Array.reduce(변환람다, 초기값);
arr.reduce((map, x) => (map.set(x, 'value')), new Map())
// Map(3) { 1 => 'value', 2 => 'value', 3 => 'value' }

reduce, filter, map 등 배열에 사용할 수 있는 함수형 표현식들이 많다. 

Javascript functional programming 이라고 검색하면 유용한 자료들을 많이 찾을 수 있을 것이다.

 

Map 정렬하기

기본적으로 들어온 순서대로 정렬되지만, 정렬을 바꾸려면 아래처럼 하면 된다.

// sort by key
var mapByKey = new Map([...map.entries()].sort());

// sort variation - 람다 활용
var mapByValue = new Map([...map.entries()].sort(
	(x,y) => {x[1] - y[1]} // value를 기준으로 오름차정렬된다.
));

 

Map 순회하기

for (const[key, value] of map) {
	console.log(key, value); 
}
// [...map.entries()]를 사용해도 된다!

... 연산자는 Spread syntax라고 부른다. 반복 가능한 인스턴스를 여러 인수로 나누는데에 사용할 수 있다.

위 사례에서 map.entries()의 반환값은 배열이 아니라 MapIterable이라는 타입이어서 배열로 변환하기 위해 사용해준 것이다.

 

Map key와 value 배열로 바꾸기

let key_array = [...map.keys()]
let value_array = [...map.values()]

 

Map 필터링하기

var positiveMap = new Map([...map.entries()].filter(
	(x) => {return x[1] > 0} // value가 양수인것만 걸러낸다.
));

 

 


 

참고한 자료

Map - JavaScript | MDN