티스토리 뷰

Dev.FrontEnd/JavaScript

[ES6] 5. Collection - Map, Set

글쓰는 개발자 _Jbee 2016. 9. 6. 11:26

Chapter 5. Collection - Map, Set

Map


Maps는 key-value 쌍으로 이루어진 자료구조이다. key들은 중복될 수 없으며, 하나의 키에 하나의 value만 올 수 있다.
maps를 이용하여 객체를 사용할 때, 객체의 key들은 항상 string 으로 변환된다.
code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//user1, user2라는 다른 두 객체를 생성하자.
let user1 = { name : “Sam” };
let user2 = { name : “Tyler” };
 
//그리고 totalReplies라는 객체에 두 객체를 key 값으로 value값을 추가하자.
let totalReplies = { };
totalReplies[user1] = 5;
totalReplies[user2] = 42;
 
//totalReplies 객체의 value 값을 살펴보면 다음과 같다.
console.log(totalReplies[user1]); // 42
console.log(totalReplies[user2]); // 42
 
//user1, user2가 key 값으로 할당될 때, string으로 변환되어 object라는 key 값으로 들어갔기 때문이다.
console.log( Object.keys(totalReplies) );
console> [ “[object Object]” ]
cs


map을 사용하여 객체에 값을 할당해보자.
map 객체에 값을 할당할 때에는 set 메소드를, 값을 추출할 때는 get 메소드를 사용하여 접근한다.

1
2
3
4
5
6
7
8
9
let user1 = { name : “Sam” };
let user2 = { name : “Tyler” };
 
let totalReplies = new Map( );
totalReplies.set( user1, 5 );
totalReplies.set( user2, 42 );
 
console.log( totalReplies.get( user1 ) ); // 5
console.log( totalReplies.get( user2 ) ); // 42
cs


우리는 이 map 자료구조를 다음과 같은 경우에 사용하면 좋다.

1. 런타임까지 key 값을 모르는 경우에 사용하면 효율적이다. 이미 key 값을 알고 있을 경우에는 object에 프로퍼티를 추가하는 방식으로 하면 된다.

2. 모든 key 값들이 같은 type이고 모든 value가 같은 type 일 경우 map을 사용하는 게 효율적이다. value들이 제각각이라면 object를 사용하면 된다.

map code>
1
2
3
4
5
let recentPosts = new Map( );
createPost( newPost, (data) => {
     recentPosts.set( data.author, data.message );
     // data.author’s type and data.message’s type are unknown until runtime!
});
cs

object code>
1
2
3
4
5
const POSTS_PER_PAGE = 15;
let userSettings = {
     perPage : POSTS_PER_PAGE,
     showRead : true// boolean type
};
cs


Iterating Maps with for - of

1
2
3
4
5
6
7
8
9
let mapSettings = new Map( );
mapSettings.set( “users”, “Sam” );
mapSettings.set( “topic”, “ES2015” )
for( let [key, value] of mapSettings){
     console.log( `${key} = ${value}` );
}
 
> user = Sam
> topic = ES2015
cs


WeakMap
key 값으로 오직 객체만 가능한 자료구조이다. 원시 데이터 타입은 key 값으로 할당할 수 없다.
! weakmap은 for - of 구문을 사용할 수 없다. weakmap은 iterable 하지 않기 때문이다.

weakmap은 한 번 반환되면 가비지 컬렉트 된다.
weakmap은 가비지컬렉터로부터 키 값으로 사용되고 있는 객체를 보호해주지 못한다.

1
2
3
4
let user = { };
let userStatus = new WeakMap( );
userStatus.set(user, “logged”); 
someOtherFunction( user ); // Once ti returns, user can be garbage collected
cs



Set

Array와의 비교를 통해서 접근하면 이해가 쉬울 것이다. Java에서의 set 자료구조와 같다. array는 중복된 값을 허락하지만 set은 그렇지 않다. array와 마찬가지로 object, primitive data type 모두 값으로 할당할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let tags = new Set( );
tags.add(“a”);
tags.add(“b”);
tags.add(“c”);
tags.add(“c”);
console.log(tags.size); // 3
 
let[a, b, c] = tags;
console.log(a, b, c); // a b c
 
for(let tag of tags){
     console.log(tag);
}
> a
> b
> c
cs


map과 마찬가지로 WeakSet이 존재하며
object만을 value로 할당받고
이 weakset 또한 value를 garbage collection으로부터 지켜주지 못한다.


Chapter 5. end

'Dev.FrontEnd > JavaScript' 카테고리의 다른 글

[ES6] 7. Module system  (0) 2016.09.06
[ES6] 6. Class sugar syntax and Template Strings  (0) 2016.09.06
[ES6] 5. Collection - Map, Set  (0) 2016.09.06
[ES6] 4. Array, Symbol  (0) 2016.09.06
[ES6] 3. Object shorthand, destructuring, assign  (0) 2016.09.06
[ES6] 0. Intro  (0) 2016.09.05
«   2021/09   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
Total
1,478,553
Today
396
Yesterday
490