10 ECMAScript - Map, Set

10. Map, Set

JAVA에서 사용할 수 있는 Map, Set을 ES6에서 지원한다.

먼저 자바에서 set과 map의 특징은 다음과 같다.

Map

- key와 value로 저장한다.

- 순서가 없고, key는 중복된 값을 가질 수 없다.

Set

- 배열이다.

- 순서가 없다.

- 중복된 데이터를 가질 수 없다.

ES6에서도 거의 유사하지만 자바와는 다르게 set, map 모두 순서가 있다.

그래서 for문으로 돌려 값을 가져올 수 있다.

이제 하나씩 예제를 보면서 알아보자

(1) Map

기본적으로 .set(key, value) 메서드로 데이터를 저장하고, .get(key) 메서드로 데이터를 가져온다.

Map의 크기는 length가 아닌 size를 사용하여 구하며, .has(값) 메서드로 해당 값으로 되어 있는 key가 있는지 확인할 수 있다.

.entries() 메소드를 사용하면 [key,value] 형식으로 반환하는 iterator 객체를 반환하며, next() 메서드나 for of문 등을 사용하여 entry를 가져 온다.

.keys() 메소드를 사용하면 key 값들을 반환하는 iterator 객체를 반환하며, next() 메서드나 for of문 등을 사용하여 key 값을 불러 올 수 있다.

.values() 메소드를 사용하면 value 값들을 반환하는 iterator 객체를 반환하며, next() 메서드나 for of문 등을 사용하여 value 값을 불러 올 수 있다.

.delete(key) 메소드를 사용하면 해당 key 값에 해당 하는 데이터를 삭제할 수 있다.

.claer() 메소드를 사용하면 Map의 모든 값을 삭제할 수 있다.

(2) Set

set의 사용법도 크게 다르지 않다. 

Map에서 데이터를 저장할 때 .set(key, value) 메서드를 썼다면 Set에서는 .add(값) 메서드를 사용한다.

Set에는 key가 없기 때문에 .get(key) 메서드도 존재하지 않는다.

예제를 통해서 알아보자.

예제에서 보다싶이 Map처럼 has(), entries(), keys(), values() 메서드가 모두 사용이 가능하다.

위에서 이상한 걸 못 느꼈는가?

바로 keys() 메서드가 동작한다는 점과 entries로 데이터를 가져오면 [값, 값] 형태로 가져온다는 것이다!!!

그렇지만 keys()의 값이 실제로 key로 동작하지는 못한다.

get() method를 사용할 수 없기 때문이다.

Off The Record)

ES6에서 Map과 Set은 Javascript의 기본 Array를 활용해 만들었다고 한다. 

key와 value를 나타내는 것도 단순 위치 값인 것 같다. Map과 Set을 만들 때 메서드를 동일하게 사용할 수 있게 구성한 것으로 추측된다.

그래서 Set이 값을 하나만 가지는 것이 아니라 [값, 값] 형태로 구성되는것 같다.

이 부분은 확실하지 않으니 다음 번에 구조를 파악해보는 게시글을 작성해 보도록 하겠다.

Off The Record)

.delete()와 .clear() 메서드도 동일하게 사용할 수 있다.

(3) 중복 문제

Map에서는 Key 값이, Set에서는 데이터 값이 중복이 불가능하다.

중복하여 저장하면 어떤 일이 일어날지 알아보자.

Map에서 동일한 key값으로 set() 메서드를 사용해 보면 해당 key값의 value가 변경된 것을 알 수 있다.

Set에서 중복된 값을 저장하게 되면 에러가 발생하지는 않으나 저장되지도 않는다.

위치를 보더라도 기존 홍길동이 남아있는 걸 알 수 있다.