TIL: 2023-05-11

⚙️ 오늘 학습한 내용

Map

🗝 키워드

Map

🗣 스스로에게 설명

Map도 ECMAScript 2015(ES6)에서 도입되었다.
'모던 자바스크립트 딥다이브'를 참고해 정리했다.

Map

키와 값의 쌍으로 이루어진 컬렉션

객체와 유사하지만 몇몇 차이가 있다.

• Map은 객체를 키로 사용할 수 있다.
• Map은 이터러블이다.
• Map은 map.size로 사이즈를 확인할 수 있다.

Map 생성

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1) // Map(2) {"key1" => "value1", "key2" => "value2"}

키와 값의 쌍으로 이루어진 요소를 넣어야 한다.

개수 확인

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1.size); // 2

요소 추가
Map.prototype.set으로 키,값 쌍을 추가할 수 있다. 연속 호출이 가능하다.

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
map1.set('key3', 'value3');
console.log(map1); // Map(3) {"key1" => "value1", "key2" => "value2", "key3" => "value3"}

중복된 키를 가진 값을 넣으면 값이 덮어씌워진다.

요소 취득
특정 키를 갖는 값을 취득하려면 Map.prototype.get을 쓸 수 있다.

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1.get('key1')); // value1

요소 존재 여부 확인
Map.prototype.has로 요소의 존재 여부를 확인할 수 있다. 불리언값을 리턴한다.

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map1.has('kim')); // false
console.log(map1.has('key1')); // true

삭제, 일괄 삭제

const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]);
map1.delete('key1')

키를 전달하면 삭제해준다.
만약 존재하지 않는 키로 삭제하려고 하면 에러가 나지 않고 그냥 무시된다.
연속 호출이 불가능하다.
Map.prototype.clear로 map 내부 요소의 일괄 삭제가 가능하다.

요소 순회
Set.prototype.forEach로 set 내부의 요소를 순회할 수 있다.
Array.prototype.forEach와 유사하게 동작한다.

• 첫 번째 인수: 순회 중인 요소값
• 두 번째 인수: 순회 중인 요소키
• 세 번째 인수: 순회 중인 Map 객체 자체

마찬가지로 이터러블이기 때문에 for...of문으로도 순회할 수 있고, 스프레드 문법이나 비구조화 할당도 가능하다.

const lee = {name: 'Lee'};
const kim = {name: 'Kim'};

const map = new Map([[lee, 'developer'], [kim, 'designer']]);

console.log([...map]); // [[{name: 'Lee'}, 'developer'], [{name: 'Kim'}, 'designer']]
const [a, b] = map;
console.log(a, b) // [{name: 'Lee'}, 'developer'], [{name: 'Kim'}, 'designer']

Map 객체는 순서에 의미를 갖지 않는다.
하지만 요소를 순회하는 순서는 추가된 순서를 따르는데, 이는 다른 이터러블과 호환성을 맞추기 위함이다.