✅ Collection

• collection은 구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간을 뜻한다.
• 자바스크립트에서 제공하는 collection은 크게 두가지로 나뉜다.
  1) indexed Collection → Array, typed Array
  2) keyed collection → Object, Map, Set, weak Map, Set

Array와 Object는 글을 작성하여 이번글에서는 Map과 Set에 대해 알아보자.

✅ 1. Map

• 다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장 가능할 수 있는 Collection이다.
• Map은 Object와 비교하면 다양한 key의 사용을 허용하고, 값의 추가 / 삭제 시 메서드를 통해 수행이 필요하다.

Map에서는 key값을 다양하게 지정할 수 있다. Boolean Type도 가능하다.

map.set(true, "bool_type");

Object에서는 값을 추가 / 삭제를 하고자 하면

Object[key] = "value"

와 같은 방법으로 동등 연산자로 값을 추가하거나 수정할 수 있다. 하지만 Map에서는 불가능하다.

Map 대표 속성(property) 및 메서드(method)

1) Map 생성

• new 연산자를 사용하여 생상할 수 있다.

let map = new Map();

// 배열을 인자로 넣어 생성도 가능하다.
// 이렇게 되면 key : strawberry value : 50 이런식으로 생성이 된다.
let recipe_juice2 = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

2) 개수 확인

• Map의 크기를 확인한다.

Map.size

let recipe_juice2 = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

recipe_juice2.size // 3

3) 요소 추가

• Map의 요소를 추가한다.
• 만약, 이미 key를 가지고 있다면 value가 수정이 된다.
• 요소를 추가할 때 한번에 여러개의 요소를 추가할 수 있다.

Map.set(key, value)

map.set(123, 789).set(false, "bool_type").set("fruit", "banana");

4) 요소 접근

• key로 value를 출력한다.

Map.get(key)

recipe_juice2.get("strawberry");

5) 요소 삭제

Map.delete(key)

recipe_juice2.delete("strawberry")

6) 전체 삭제

Map.clear()

recipe_juice2.clear()

7) 요소 존재 여부 확인

• 해당 key를 가지고 있는 요소가 있는지 여부를 확인한다. 있으면 true, 없으면 false로 불리언 타입으로 출력이 된다.

let recipe_juice2 = new Map([
  ["strawberry", 50],
  ["banana", 100],
  ["ice", 150],
]);

console.log(recipe_juice2.has("strawberry")); // output : true

8) key값만 출력

• Map key값들만 출력을 할 수 있다.

recipe_juice2.keys();

• 다른 방법으로 for .. of 문으로 key값을 반복하여 출력할 수 있다.

// key값 출력
for (let item of recipe_juice.keys()) {
   console.log(item);
}

9) value값만 출력

• Map value값들만 출력할 수 있다.

recipe_juice2.values()

• key와 마찬가지로 for .. in 문으로 값들만 출력할 수 있다.

// value 출력
for (let itme of recipe_juice.values()) {
   console.log(itme);
}

for .. in은 요소를 출력
for .. of는 키를 출력

10) entity

• Map을 key, value 형태로 출력을 할 수 있다.

recipe_juice2.entries()

for문으로도 출력이 가능하다.

// 위와 동일
for (let entity of recipe_juice.entries) {
   console.log(entity);
}

11) Map을 Object로 변경

• Map을 Object로 변환할 수 있다.

let recipe_juice_obj = Object.fromEntries(recipe_juice);

// map을 객체로 변경하는데 [key, value] 형태로 변경하기
let recipe_juice_kv = Object.entries(recipe_juice_obj);

반대로, Object를 Map으로 변환할 수 있다.

let recipe_juice_map = new Map(recipe_juice_kv);

✅ 2. Set

• value만을 저장하며 중복을 허용하지 않는 Collection 이다.

대표 속성(property) 및 메서드(method)

1) Set 생성

let set = new Set();

let num = new Set([1, 2, 3, 4, 5]);

let str = new Set("HELLO!");

2) Set 크기 확인

console.log(Set.size)

3) 요소 추가

Set.add(value)

let num = new Set([1, 2, 3, 4, 5]);

num.add(6);

num.add(5); // 이 경우에는 이미 num에 5라는 값이 있기 때문에 추가가 되어도 중복값이기 중복제거가 된다.

4) 요소 삭제

let num = new Set([1, 2, 3, 4, 5]);

num.delete(1);

5) 전체 삭제

num.clear()

6) 요소 존재 여부 확인

num.has(1) // true

7) key값만 출력

• Set은 Key가 존재하지 않는다고 했는데, 실제로 set을 출력하면 set은 key와 value가 동일하게 출력이 된다. 따라서, Set의 key는 value와 같다. 실제로 출력하면

console.log(num.keys()); // output : [Set Iterator] { 1, 2, 3, 4, 5 }

이렇게 value와 key가 같다는 걸 알 수 있다.

8) value값만 출력

console.log(num.values()); // output : [Set Iterator] { 1, 2, 3, 4, 5 }

9) entries 출력

• Set 내의 각 값을 이용해 만든 [value(key), value] 배열을 포함하는 Iterator 객체를 반환한다.
• Map과의 호환성을 위해 만들어졌다.

console.log(num.entries())
// output
[Set Entries] { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ] }