TIL/JS

Map

yyeon111 2023. 3. 28. 22:45

Map은 Set과 함께 new 연산자를 통해 생성 할 수 있다.

초기에 배열로 감싸서 다수의 인자를 전달 할 수 있으며, [key, value]를 세트로 전달 해야 한다.

 

Map.prototype.methods

 

⚪ set()

데이터를 추가 하는 함수이다.

Set에서는 add를 사용하지만 Map에서는 set을 사용한다.

인자를 key, value로 전달 하는데, key만을 전달 할 경우 value는 undefined인 상태로 담긴다.

set이 된 결과를 반환하기 떄문에 메서드 체이닝이 가능하다.

즉슨, 참조형 데이터 이기 때문에(Map 자체가 object) 변경하면 원본도 함께 변경된다.

 

⚪ get()

Map에 해당 key가 있는 여부에 대해 불리언으로 반환한다.

Set에는 has가 사용되지만 Map에는 get이 사용된다.

 

⚪ delete()

Map에서 해당 키를 삭제 할 수 있다.

데이터를 삭제 할 경우 Set과 같은 메서드를 사용한다.

 

⚪ clear()

모든 데이터를 삭제 할 때 사용한다.

Set과 사용하는 함수가 같다.

 

⚪ keys(), values(), entries()

Set과 다르게 Map은 key와 value가 세트로 들어가기 때문에 key의 개념이 있다.

다라서 key와 values가 다르게 값이 조회된다.

entries는 Set과 같이, [key, value]로 반환한다.

 

iterable

 

Map또한 유사 배열이기 때문에 iterable기능을 사용 할 수 있다.

⚪ for...of

⚪ 스프레드

⚪ 디스트럭쳐링

⚪ array.prototype.forEach()

 

💡 key와 value로 구성되어 있기 때문에 for..of사용시 key와 value만을 뽑아서 사용 할 수 있다.

const arr = new Map(
  [
    ['x', 1],
    ['y', 2],
    ['z', 3]
  ]
);

for (const [key, value] of arr) {
  console.log(`key(${key}) = value(${value})`);
}
// key(x) = value(1)
// key(y) = value(2)
// key(z) = value(3)

💡 디스트럭쳐링 사용시, 배열과 같이 rest parameters 처럼 순서대로 데이터를 키에 할당이 된다.

다만, key와 value로 되어 있기 때문에 배열로서 담기게 된다.

const arr = new Map(
  [
    ['a', 1],
    ['b', 2],
    ['c', 3]
  ]
);

const [x, ...rest] = arr;
console.log(x); // ['a', 1]
console.log(rest); // [['b', 2],['c', 3]]

 

'TIL > JS' 카테고리의 다른 글

generator  (0) 2023.03.29
iterable, iterator  (0) 2023.03.29
Set  (0) 2023.03.28
BigInt  (0) 2023.03.28
2, 8, 16진법과 비트 연산  (0) 2023.03.28