설모의 기록

Map 과 Set 본문

언어/Javascript

Map 과 Set

HA_Kwon 2018. 1. 4. 02:27

ES5 에서는 key를 value 에 매핑해야하는 유일한 데이터 구조는 Object 였습니다. 그래서 Object 를 아래의 예제와 같이 사용해왔습니다.

let obj = {key: "value", a: 1}
console.log(obj.a); // 1
console.log(obj['key']); // "value"

let base = {a:1,b:2};
let obj = Object.create(base);
obj[c] = 3;

for (prop in obj) { console.log(prop); }
// a
// b
// c
// obj 에 존재하는 프로퍼티들을 돌면서 출력한다.

for (prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(prop)
    }
}
// c
// hasOwnProperty() 메소드는 현재 객체가 가지고 있는 프로퍼티만 검사한다. 
// 따라서 base 프로퍼티는 검사하지 않고 obj 프로퍼티들만 검사한다.



ES6 에서는 Map 이라는 새로운 데이터 구조가 나왔습니다. Map 은 Object를 사용하면서 존재했던 문제점 없이 key 를 value 에 매핑시킵니다. Map 사용 방법은 아래와 같습니다.

// 선언

let map = new Map();
map.set("A",1);
map.set("B",2);
map.set("C",3);
let map = new Map()
    .set("A",1)
    .set("B",2)
    .set("C",3);
// 체이닝으로 set 을 연결할수 있습니다.
let map = new Map([
    [ "A", 1 ],
    [ "B", 2 ],
    [ "C", 3 ]
]);
// 생성자에 key-value 쌍의 배열을 넣어도 됩니다.

// 값 가져오기

map.get("A");
// 1

// 인자로 입력한 key 가 Map 에 존재하는지 알아보기

map.has("A");
// true

// key-value 지우기

map.delete("A");
// true


// Map 비우고 size 구하기

map.clear()
map.size
// 0


Map 을 순회하는 방법은 아래와 같이 여러개가 있습니다,

let map = new Map([
    [ "APPLE", 1 ],
    [ "ORANGE", 2 ],
    [ "MANGO", 3 ]
]);


//map.keys() : map 에 존재하는 key 들을 배열에 담아 반환합니다.

for (let key of map.keys()) {
    console.log(key);
}
// APPLE
// ORANGE
// MANGO


//map.values() : map 에 존재하는 value 들을 배열에 담아 반환합니다.

for (let value of map.values()) {
    console.log(value);
}
// 1:
// 2
// 3


// map.entries() : [key, value] 쌍을 배열에 담아 반환한다.

// 호출해서 for-of 문을 이용해도 되지만, 이것보다는 두번쨰 예제를 이용하는 것이 좋습니다.

for (let entry of map.entries()) {
    console.log(entry[0], entry[1]);
}
// "APPLE" 1
// "ORANGE" 2
// "MANGO" 3

for (let [key, value] of map) {
    console.log(key, value);
}
// "APPLE" 1
// "ORANGE" 2
// "MANGO" 3



ES6 의 Set 도 Map 과 비슷하게 사용합니다. Set 은 Map 과는 다르게 key 값만이 존재합니다.

// 선언

let set = new Set();
set.add('APPLE');
set.add('ORANGE');
set.add('MANGO');
let set = new Set()
    .add('APPLE')
    .add('ORANGE')
    .add('MANGO');
// 체이닝으로 add() 를 연결할 수 있습니다.
let set = new Set(['APPLE', 'ORANGE', 'MANGO']);
// 생성자에 키 값들을 배열로 담아 넣어도 됩니다.


// Set 비우기

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


// Set 은 중복된 값은 저장하지 않습니다. 아래의 예제에서도 set 의 size 는 변하지 않습니다.

let set = new Set();
set.add('Moo');
set.size
// 1
set.add('Moo');
set.size
// 1


// Set 순회

let set = new Set(['APPLE', 'ORANGE', 'MANGO']);
for (let entry of set) {
    console.log(entry);
}
// APPLE
// ORANGE
// MANGO



  Map 과  Object 사이에 가장 큰 차이점은 element 가 추가된 순서를 기억하다 순회할 때 그 순서대로 사용한다는 것입니다. 또한 Object 의 key 값에는 number 와 string, Symbol 만 가능했지만, Map 어떤 값도 가능합니다.
  Set 도 Map 과 마찬가지로 데이터를 추가할 때 마다 순서를 기억하고, 순회하려할 때 그 순서대로 사용합니다. Map 과 Set 이 다른 점은, Set 에는 중복된 값이 들어가지 않는다는 것입니다. 따라서 앞으로는 Object 의 사촌정도로 Map 과 Set 을 생각해서는 안됩니다.

'언어 > Javascript' 카테고리의 다른 글

async.waterfall() 메소드  (1) 2018.01.08
bcrypt-nodejs 모듈 사용하기  (0) 2018.01.08
싱글톤(singleton) 패턴  (0) 2017.12.16
자바스크립트 메모이제이션(Memoization) 패턴  (0) 2017.12.16
자바스크립트 함수  (0) 2017.12.16
Comments