JavaScript

Map 객체

AgileJung 2022. 6. 25. 19:06
728x90
반응형

Map 객체는 키와 값의 쌍(Key : Value)으로 이루어진 컬렉션이다.

객체와 유사하지만 차이점이 존재한다.

 

  • 객체를 포함한 모든 값을 키로 사용할 수 있다.
  • 이터러블
  • 요소 개수를 map.size로 확인한다.

Map 객체를 생성해보자.

Set 객체와 같은 방법으로 생성할 수 있으며, Map 생성자 함수로 생성하고 인수를 전달하지 않으면 빈 Map 객체가 생성된다.

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

Map 생성자 함수는 이터러블을 인수로 전달받아 Map객체를 생성한다.

이때, 이터러블은 키와 값의 쌍으로 이루어져야 한다.

 

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

인수로 전달된 이터러블에 중복된 키가 존재하면 값이 덮어써진다. => 중복된 키를 갖는 요소가 존재할 수 없다.

 

const map = new Map([['key1', 'value1'], ['key1', 'value2']]);
console.log(map) // Map(1) {'key1' => 'value2'}

Map 객체 요소 개수 확인하기

Map.prototype.size  프로퍼티를 사용하여 요소 개수를 확인할 수 있다.

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

Set 객체와 마찬가지로 getter함수만 존재하는 접근자 프로퍼티이며, size 프로퍼티로 요소 개수를 변경할 수 없다.

 

Map 객체 요소  추가하기

Map.prototype.set  메서드를 사용하여 객체 요소를 추가할 수 있다.

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

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

Set객체의 add()처럼 객체를 Map객체를 반환하기 때문에 set메서드를 호출한 후에 연속적으로 호출할 수 있다.

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

map
.set('key1', 'value1')
.set('key2', 'value2');

//Map(2){'key1' => 'value1', 'key2' => 'value2'}

또, 중복된 키를 갖는 요소가 존재할 수 없어 중복된 키를 추가하면 값이 덮어써진다.(에러 발생 X)

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

map
.set('key1', 'value1')
.set('key1', 'value2');

//Map(2){'key1' => 'value2'}

객체는 문자열과 심벌 값만 키로 사용할 수 있지만, Map객체는 키 타입 제한이 없다.

그래서 객체도 키값으로 사용할 수 있다.

const map = new Map();

const jung = { name : 'jung'};
const lim = { name : 'lim'};

// 객체도 키로 사용가능
map
.set(jung, 'developer')
.set(lim, 'worker');

console.log(map);
//Map(2) { { name: 'jung' } => 'developer', { name: 'lim' } => 'worker'}

 

Map 객체 요소  취득하기

특정 요소의 값을 반환하기 위해서 Map.prototype.get 메서드를 사용한다.

get 메서드의 인수로 키를 전달하면 전달한 키를 갖는 값으로 반한하고, 키를 갖는 요소가 없으면 undefined를 반환한다.

const map = new Map();

const jung = { name : 'jung'};
const lim = { lim : 'lim'};

// 객체도 키로 사용가능
map
.set(jung, 'developer')
.set(lim, 'worker');

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

 

Map 객체 요소  존재 여부 확인하기

Map.prototype.has 메서드로 요소 내 존재 여부를 확인할 수 있으며, 특정 존재의 여부를 불리언 값으로 반환한다.

const jung = { name : 'jung'};
const lim = { lim : 'lim'};

const map = new Map([[jung, 'developer'], [lim, 'worker']]);

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

 

Map 객체 요소 삭제하기

Map.prototype.delete 메서드를 사용하여 요소를 삭제할 수 있으며, 삭제 성공 여부를 불리언 값으로 반환한다.

const jung = { name : 'jung'};
const lim = { lim : 'lim'};

const map = new Map([[jung, 'developer'], [lim, 'worker']]);

map.delete(jung); //true
console.log(map); //Map(1) {{ lim: 'lim' } => 'worker'}

Set객체와 같이 존재하지 않는 키로 요소를 삭제하려면 에러 없이 무시당하며 연속적으로 호출할 수 없다.

 

Map 객체 요소  일괄 삭제하기

Map.prototype.clear 메서드로 일괄 삭제를 할 수 있고, 언제나 undefined를 반환한다.

const jung = { name : 'jung'};
const lim = { lim : 'lim'};

const map = new Map([[jung, 'developer'], [lim, 'worker']]);

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

 

Map 객체 요소  순회하기

Map객체의 요소를 순회하려면 Map.prototype.forEach 메서드를 사용한다. 배열의 forEach와 유사하다.

콜백 함수에 전달하는 인수 3개

  1. 현재 순회 중인 요소값
  2. 현재 순회 중인 요소키
  3. 현재 순회 중인 Map 객체 자체
const jung = { name : 'jung'};
const lim = { lim : 'lim'};

const map = new Map([[jung, 'developer'], [lim, 'worker']]);

map.forEach((v, k, map) => console.log(v, k, map));

/*
'developer' { name: 'jung' } Map(2) {
  { name: 'jung' } => 'developer',
  { lim: 'lim' } => 'worker'
  }
  
'worker' { lim: 'lim' } Map(2) {
  { name: 'jung' } => 'developer',
  { lim: 'lim' } => 'worker'
  }
*/

Set 객체와 같이 Map 객체는 이터러블이므로 for...of문 으로 순회 가능하다.

스프레드 문법과 배열 디스트럭처링 할당의 대상이 될 수 있다.

 

Map 객체의  메서드

  • keys 요소키를 값으로 갖는 이터레이터 반환(변수의 값)
  • values 요소값을 값으로 갖는 이터레이터 반환(키와 값 형태의 값)
  • entries 요소키와 요소값을 값으로 갖는 이터레이터 반환(변수의 값, 키와 값 쌍의 값)
const jung = { name : 'jung'};
const lim = { lim : 'lim'};

const map = new Map([[jung, 'developer'], [lim, 'worker']]);

// keys()
for( const key of map.keys()){
  console.log(key)
}
//{ name: 'jung' } { lim: 'lim' }

// values()
for( const value of map.values()){
  console.log(value)
}
//'developer''worker'

// entries()
for( const entry of map.entries()){
  console.log(entry)
}
//[ { name: 'jung' }, 'developer' ][ { lim: 'lim' }, 'worker' ]

 

728x90
반응형