[JS] Map

codeCYJ·2022년 7월 19일
0

javaScript

목록 보기
33/35

Map이란?

Map객체는 키와 값의 쌍으로 이루어진 컬렉션이다.
객체와 유사하지만

  • 객체를 포함한 모든 값을 키로 사용할 수 있다.
  • 이터러블 객체이다.
  • 요소 개수 확인을 map.size로 한다.
  • 중복된 키를 갖는 요소가 존재하면 값을 덮어쓴다 = 중복된 키를 갖는 요소가 있을수 없다.

Map.set

객체에 요소를 추가할때는 Map.set 메서드를 사용한다.
새로운 요소가 추가된 Map객체를 반환하므로 연속적 호출이 가능하다.

const map = new Map();
console.log(map);  // Map(0){}

map.set('key1', 'value1');
console.log(map);  // Map(1){"key1" => "value1"}

map
  .set('key2', 'value2');
  .set('key3', 'value3');
console.log(map);  // Map(3){"key1" => "value1","key2" => "value2","key3" => "value3"}


// 중복된 키를 사용하면 덮어 씌어진다.
const map = new Map();
console.log(map);  // Map(0){}

map
  .set('key1', 'value1');
  .set('key1', 'value2');
console.log(map);  // Map(1){"key1" => "value2"}


//객체를 포함한 모든 값을 키로 사용 가능하다.
const map = new Map();
const lee = {name:'Lee'};
const kim = {name:'Kim'};

map
  .set(lee, 'developer')
  .set(kim, 'designer');
console.log(map);
// Map(2) {{name:"Lee"} => "developer", {name:"Kim"}=> "designer"}

Map.get

Map에서 특정 요소를 취득할때 사용한다. 인수로 키를 전달하면 전달한 키를 갖는 값을 반환한다. 전달한 키를 갖는요소가 없으면 undefined를 반환한다.

const map = new Map();
const lee = {name:'Lee'};
const kim = {name:'Kim'};
map
  .set(lee, 'developer')
  .set(kim, 'designer');

console.log(map.get(lee)); // developer
console.log(map.get('key')); // undefined

Map.has

특정 요소가 존재하는지 확인할때 사용한다. 불리언값을 반환한다.

const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

console.log(map.has(lee)); // true
console.log(map.has('key')); // false

Map.delete

특정 요소를 삭제한다. 삭제성공여부를 불리언값으로 반환한다.

const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.delete(kim);
console.log(map); // Map(1) {{name:"Lee"} => "developer"}

// 존재하지 않는 키로 삭제하면 에러없이 무시된다.
map.delete(asd);
console.log(map); // Map(1) {{name:"Lee"} => "developer"}

Map.clear

객체의 요소를 일괄삭제한다. 언제나 undefined를 반환한다.

const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.clear();
console.log(map); // Map(0) {}

Map.forEach

객체의 요소를 순회할때 사용한다.

  • 첫번째 인수 : 현재 순회중인 요소 값
  • 두번째 인수 : 현재 순회중인 요소 키
  • 세번째 인수 : 현재 순회중인 Map 객체 자체
const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

map.forEach((v,k,map)=>console.log(v,k,map));
/*
developer {name:"Lee} Map(2) {
{name:"Lee"} => "developer",
{name:"Kim"} => "designer",
}
developer {name:"Kim} Map(2) {
{name:"Lee"} => "developer",
{name:"Kim"} => "designer",
}
*/

// for...of문으로 순회할 수 있고, 스프레드문법과 배열디스트럭처링이 가능하다.
const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

for (const entry of map) {
  console.log(entry); 
  // [{name:"Lee"},"developer"][{name:"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.keys, Map.values, Map.entries

  • Map.keys : Map 객체에서 요소키를 값으로 갖는 객체를 반환.
  • Map.values : Map 객체에서 요소값 값으로 갖는 객체를 반환.
  • Map.entries : Map 객체에서 요소키와 요소값을 값으로 갖는 객체를 반환.
const lee = {name:'Lee'};
const kim = {name:'Kim'};
const map = new Map([[lee, 'developer'], [kim, 'designer']]);

for (const key of map.keys()) {
  console.log(key);
}
  // {name:"Lee"}{name:"Kim"}
 

for (const value of map.values()) {
  console.log(value);
}
  // developer designer
 

for (const entry of map.entries()) {
  console.log(entries);
}
  // [{name:"Lee"}, "developer"],[{name:"Kim"},"designer"]
 
profile
안녕하세요

0개의 댓글