[JavaScript] Set과 Map의 대해 알아보자!

1. Set이란?

Set은 값의 집합으로, 중복된 값을 허용하지 않습니다. 이러한 특성으로 인해 Set은 고유한 값을 저장하기 위해 자주 사용됩니다. Set은 순서를 유지하며, 인덱스나 키로 요소에 접근할 수 없습니다.

💡Set의 주요 메서드는 다음과 같습니다.

• new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다.
• set.add(value) – 값을 추가하고 셋 자신을 반환합니다.
• set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다.
• set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다.
• set.clear() – 셋을 비웁니다.
• set.size – 셋에 몇 개의 값이 있는지 세줍니다.

1.1 Set 생성하기

Set은 다음과 같이 생성할 수 있습니다.

const set = new Set();

1.2 요소 추가하기

Set에 요소를 추가하려면 add() 메소드를 사용합니다.

set.add(1);
set.add("math");

1.3 요소 삭제하기

set.delete(1);

1.4 Set 크기 확인하기

console.log(set.size); // 2 출력됩니다.

1.5 Set 순회하기

set.forEach((value, value2, set) => {
  console.log(value); // "math", true 출력됩니다.
});

2. Map이란?

Map은 키-값 쌍의 집합으로, 키의 중복을 허용하지 않습니다. 객체와 달리 매우 다양한 타입을 키로 사용할 수 있습니다. Map은 순서를 유지하며, 인덱스나 키로 요소에 접근할 수 있습니다.

💡맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다.

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다.

2.1 Map 생성하기

Map은 다음과 같이 생성할 수 있습니다.

const map = new Map();

2.2 요소 추가하기

Map에 요소를 추가하려면 set() 메소드를 사용합니다.

const key1 = "name";
const key2 = { id: 1 };

map.set(key1, "John");
map.set(key2, "Park");

2.3 요소 삭제하기

Map에서 요소를 삭제하려면 delete() 메소드를 사용합니다.

map.delete(key1);

2.4 Map 값 가져오기

console.log(map.get(key2)); // "Park"가 출력됩니다.

2.5 Map 크기 확인하기

Map의 크기를 확인하려면 size 프로퍼티를 사용합니다.

console.log(map.size); // 1

2.6 Map 순회하기

Map의 모든 키-값 쌍에 접근하기 위해 forEach() 메소드를 사용할 수 있습니다.

map.forEach((value, key, map) => {
  console.log(key, value); // { id: 1 } "Park"
});

3. Set과 Map의 차이점

Set과 Map은 비슷해 보일 수 있지만 목적과 사용법이 다릅니다.

• Set은 중복된 값을 허용하지 않는 값을 저장하기 위해 사용됩니다.
• Map은 키-값 쌍을 저장하고 특정 키에 대한 값을 가져오기 위해 사용됩니다.
• Set은 순서를 유지하며 인덱스나 키로 요소에 접근할 수 없습니다.
• Map은 순서를 유지하고 인덱스나 키로 요소에 접근할 수 있습니다.

4. Set과 Map의 장단점

4.1 Set의 장점

• 중복된 값을 허용하지 않기 때문에 고유한 값만 저장할 수 있습니다.
• 배열과 다르게 인덱스로 요소에 접근할 필요가 없으므로 더 빠르게 작업할 수 있습니다.

4.2 Map의 장점

• 객체와 달리 다양한 타입을 키로 사용할 수 있습니다.
• 특정 키에 대한 값을 쉽게 가져올 수 있습니다.

4.3 Set과 Map의 단점

• 요소를 삭제하려면 해당 요소를 찾아야 하기 때문에 성능이 약간 저하될 수 있습니다.
• Set과 Map은 순서를 유지하기 때문에 메모리를 더 많이 사용할 수 있습니다.

참조

https://ko.javascript.info/