[JS]맵(Map)과 셋(Set) -1

ES6에서 새로 도입한 데이터 구조인 맵과 셋에 대해서 알아보겠습니다. 맵은 키와 값을 연결한다는 점에서 객체와 비슷하고, 셋은 중복을 허용하지 않는다는 점만 제외하면 배열과 비슷합니다.

 

이번 포스팅에서는 맵(Map)에 대해서 알아보겠습니다.

 

맵(Map)

---

ES6 이전에는 키와 값을 연결하려면 객체를 사용해야 했습니다. 하지만 객체를 이런 목족으로 사용하면 여러 가지 단점이 생깁니다.

 

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

 

Map 객체는 위의 단점들을 모두 해결했고, 키와 값을 연결할 때는 객체보다 좋은 선택입니다. 예를 들어 사용자 객체가 여럿 있고 이들에게 각각 역할을 부여한다고 해보겠습니다.

const user1 = {
    name : "Cynthia"
};

const user2 = {
    name : "Jackson"
};

const user3 = {
    name : "Olive"
};

const user4 = {
    name : "James"
};

 

맵을 만들어 보겠습니다.

const userRoles = new Map();

 

다음에는 맵의 set() 메서드를 사용하여 사용자 역할을 할당합니다.

userRoles.set(user1, 'User');
userRoles.set(user2, 'User');
userRoles.set(user3, 'Admin');
//James에게는 역할을 할당하지 않았습니다.

 

set() 메서드는 체인으로 연결할 수 있기 때문에 번거로운 타이핑을 줄일 수 있습니다.

userRoles.set(user1, 'User')
         .set(user2, 'User')
         .set(user3, 'Admin');

 

생성자에 배열의 배열 형식으로 넘기는 형태도 가능합니다.

const userRoles = new Map([
    [user1, 'User'],
    [user2, 'User'],
    [user3, 'Admin']
]);

 

user2의 역할을 알아볼 때는 get()메서드를 사용하면 됩니다.

userRoles.get(user2);
//User

 

맵에 존재하지 않는 키에 get()을 호출하면 undefined를 반환합니다.

맵에 키가 존재하는지 확인하는 has()메서드도 있습니다.

userRoles.has(user1);
//true
userRoles.get(user1);
//"User"
userRoles.has(user4);
//false
userRoles.get(user4);
//undefined

 

맵에 이미 존재하는 키에 set()을 호출하면 값이 교체됩니다.

userRoles.get(user1);
//"User"
userRoles.set(user1, 'Admin');
userRoles.get(user1);
//"Admin"

 

맵의 요소 숫자를 반환하는 프로퍼티로 size프로퍼티가 있습니다.

userRoles.size;

 

keys() 메서드는 맵의 키를,

values() 메서드는 값을,

entries() 메서드는 첫 번째 요소가 키이고 두 번째 요소가 값인 배열을 각각 반환합니다.

이들 메서드가 반환하는 것은 모두 이터러블 객체이므로 for... of 루프를 쓸 수 있습니다.

 

keys() 메서드

for(let user of userRoles.keys()){
    console.log(user.name);
}
/*
Cynthia
Jackson
Olive
*/

 

values() 메서드

for(let role of userRoles.values()){
    console.log(role);
}
/*
Admin
User
Admin
*/

 

entries() 메서드

for(let ur of userRoles.entries()){
    console.log(`${ur[0].name} : ${ur[1]}`);
}
/*
Cynthia : Admin
Jackson : User
Olive : Admin
*/

 

맵의 요소를 지울 때는 delete() 메서드를 사용합니다.

userRoles.delete(user2);
userRoles.size;
//2

 

맵의 요소를 모두 지울 때는 clear() 메서드를 사용합니다.

userRoles.clear();
userRoles.size;
//0