javascript - Map 에 대해

Map 이란?

javascript에는 배열이나 객체가 있지만, es6에 들어와서 Map 이라는 기능이 생겼습니다.

key와 value 쌍으로 이루어져있는데, key 값으로 여러가지가 가능하다는 장점이 있습니다.

 

사용방법

// 비어있는 Map 생성
const rest = new Map();

// key,value쌍 삽입
rest.set('name', 'korea');
rest.set(1, 'over');
rest.set(2, 'action');

console.log(rest)

 

 

연쇄적으로 선언하거나, 여러 데이터 타입을 key값으로 사용할 수 있습니다.

boolean 값인 true나 false, 심지어는 배열도 key값이 될 수 있습니다.

// 연쇄해서 선언 가능 , 여러 데이터 타입을 key로 사용 가능
rest.set('categories', ['kor','jp','cn']).set('open',11).set('close',23).set(true,'We are open').set(false,'We are closed')

console.log(rest.get('name'));
console.log(rest.get(true))

key값에 대한 value값을 가져오기 위해 get 키워드를 사용하면 됩니다.

 

또는 수식을 사용해서 원하는 key값을 사용할 수도 있습니다.

// 수식을 사용
const time = 21;
const isOpen = rest.get(time > rest.get('open') && time < rest.get('close'));

 

 

delete를 통해 값을 삭제할 수 있으며,

앞에서 말했듯이 배열을 key값으로 사용할 수 있으며 심지어는 querySelector도 적용이 됩니다

// 삭제
rest.delete(2);
console.log(rest);


// 배열을 사용
const arr = [2,3];
rest.set(arr,'Test');

console.log(rest.get(arr));


// querySelector 사용
rest.set(document.querySelector('h1'), 'Heading');

console.log(rest);

 

 

초기값 지정, spread

Map도 역시 초기값을 지정할 수 있으며, iterable하기 때문에 spread operator 적용이 가능합니다.

const question = new Map([
  ['question', 'language'],
  [1, 'C'],
  [2, 'Java'],
  [3, 'Javascript'],
  ['correct', 3],
  [true, 'correct'],
  [false, 'Try again!']
])

console.log(question)

 

console.log([...question.keys()])
console.log([...question.values()])