맵(Map)의 이해

맵(Map) 은 키(Key)와 값(Value)을 한쌍으로 해서 저장되는 데이터 저장 구조입니다.

다른 개발언어에 익숙하면 컬렉션(Collection) 이나 딕셔너리(Dictionary) 와 같은 구조입니다.

맵은 자바스크립트의 일반 객체 사용 방식과 동일합니다.

실제 메서드들도 객체의 사용법과 상당히 유사합니다.

자바스크립트 객체와 맵의 결정적인 차이점은 사용할 수 있는 키의 범위입니다.

자바스크립트 객체는 키로 문자열, 또는 잘 사용하지 않지만 심볼 2가지만 가능합니다.

반면에 맵은 문자열, 숫자, 객체, 배열, 함수 등 다양한 데이터 형을 키에 사용할 수 있습니다. 

단, 다양한 데이터형을 사용할 수 있다는 것이 키로 다양한 데이터 자체를 사용하는 것이 아니라 해당 데이터형의 객체에 대한 참조 주소를 키로 사용합니다.

원시 데이터형을 제외한 나머지 객체형인 데이터를 키로 사용할 경우 변수에 객체를 대입해 객체의 참조 주소를 담은 변수를 맵의 키로 사용해야 합니다.

예를 들어보겠습니다.

const map = new Map();//맵 인스턴스 생성let arr = [1, 2];
map.set('item', 1);map.set(3, 2);map.set([1,2], 3); // 배열을 키로 사용 참조 주소를 알 수 없기 때문에 값을 얻을 수 없음.map.set(function(){}, 4);
console.log(map.size);console.log(map([1,2])); //에러 발생
//배열 객체 변수를 키로 사용map.set(arr, 5);console.log(map.get(arr)); // 5 반환

맵은 키-값 의 추가 삭제 속도가 객체보다 일반적으로 더 빠릅니다. 

따라서 많지 않은 키-값 구조의 데이터를 빈번하게 추가/삭제하는 데이터를 다루는데 유용합니다.

맵의 "키-값"의 추가, 삭제

맵의 "키-값" 을 관리하는 메서드는 5개가 있습니다.

맵의 순환

맵의 순환은 객체를 순환하는 방법과 같은 메서드를 지원합니다.

키, 또는 값만을 따로 가져와 순환할 수 있으며, 키-값 쌍을 한꺼번에 가져와 출력할 수도 있습니다.

맵의 길이는 객체의 길이 속성인 "length" 가 아닌 "size" 속성을 사용합니다.

for, for ~ of, forEach() 등의 순환 구문과 메서드를 모두 사용할 수 있습니다.

const map = new Map();//맵 인스턴스 선언
map.set('itema', 1);map.set('itemb', 2);map.set('itemc', 3);map.set('itemd', 4);
console.log('길이: '+map.size);
//파라메터로 키-값을 각각 받아 순환map.forEach(function(value, key){  console.log(key+' '+value);});
//키-값 쌍으로 순환for(let [key,value] of map.entries()){  console.log(key+' '+value);}
//키만 순환for(let key of map.keys()){  console.log(key);}
//값만 순환for(let value of map.values()){  console.log(value);}

맵 <-> 배열 상호 전환하기

맵과 배열은 상호 전환이 가능합니다.

전환에 필요한 별도의 전용 메서드는 없지만, 맵의 구조가 키-값 구조이기 때문에 맵을 배열로 변환할 때, 또는 배열을 맵으로 변환할 때는 배열의 구조가 [[키, 값], [키, 값] ...] 과 같은 중첩 배열 구조로 고정됩니다.

아래 예와 같은 포맷으로 만든 중첩 배열을 맵 인스턴스 생성 인자로 넣으면 자동으로 키-값으로 된 맵이 생성됩니다.

생성된 맵을 배열 메서드인 from() 인자로 넣어 배열을 생성하면 원본 배열과 같은 배열을 다시 만들 수 있습니다.

let friends = [['프로도', 3], ['라이언', 5], ['어피치', 4]];let frMap = new Map(friends);let newFriends = Array.from(frMap);
//frMap 맵 순환frMap.forEach(function(value, key){  console.log(key+', '+value);});//재생성 배열console.log(newFriends);