> For the complete documentation index, see [llms.txt](https://april.gitbook.io/learning-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://april.gitbook.io/learning-js/chapter-10./10.1-map.md).

# 10.1 맵 (Map)

### 객체의 단점

* 프로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있음
* 객체 안에 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 수 있는 방법이 없음
* 키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없음
* 객체는 프로퍼티 순서를 전혀 보장하지 않음

### 맵

* 객체의 결함을 모두 해결했음
* **키와 값을 연결할 목적이라면 맵이 객체보다 더 나음**

```javascript
// 사용자 객체에 역할 부여
  const u1 = { name: 'Cynthia' };
  const u2 = { name: 'Jackson' };
  const u3 = { name: 'Olive' };
  const u4 = { name: 'James' };

  // 방법 1
  // 맵 생성
  const userRoles = new Map();

  // 사용자 역할 할당
  userRoles.set(u1, 'User');
  userRoles.set(u2, 'User');
  userRoles.set(u3, 'Admin');

  // set() 메서드는 체인으로도 가능
  userRoles
    .set(u1, 'User')
    .set(u2, 'User')
    .set(u3, 'Admin');

  // 방법 2
  // 생성자에 배열의 배열을 넘기는 형태로도 가능
  const userRoles2 = new Map([
    [u1, 'User'],
    [u2, 'User'],
    [u3, 'Admin'],
  ]);
```

#### get() 메서드

* 맵에 존재하는 키의 값을 호출할 때 사용
* 맵에 존재하지 않는 키에 get을 호출하면 undefined 반환
  * 맵에 키가 존재하는지 확인하려면? has() 메서드 사용

```javascript
userRoles.get(u2); // "User"
```

#### set() 메서드

* 이미 존재하는 키에 set()을 호출하면 값을 변환할 수 있음

```javascript
  userRoles.get(u1);
  console.log("before : " + userRoles.get(u1));

  userRoles.set(u1, 'Admin');
  console.log("after : " + userRoles.get(u1));
```

결과

```bash
before : User
after : Admin
```

#### size 프로퍼티

* 맵의 요소 숫자를 반환

```javascript
userRoles.size; // 3
```

#### keys() 메서드

* 맵의 키 반환

#### values() 메서드

* 값을 반환

#### entries() 메서드

* 첫 번째 요소가 키이고 두 번째 요소가 값인 배열을 반환

```javascript
  for (let u of userRoles.keys())
    console.log(u.name);

  for (let r of userRoles.values())
    console.log(r);

  for(let [u, r] of userRoles.entries())
    console.log(`${u.name}: ${r}`);

// 위의 entries() 사용한 코드를 단축해서 아래처럼 쓸 수 있음
  for (let [u, r] of userRoles)
    console.log(`${u.name}: ${r}`);
```

#### delete() 메서드

* 맵의 요소를 지울 때 사용

#### clear() 메서드

* 맵의 모든 요소를 지울 때 사용