Set, Map, Array는 모두 자바스크립트에서 데이터를 저장하고 관리하기 위한 자료구조입니다. 그러나 각각의 특징과 사용 용도에는 몇 가지 차이점이 있습니다.
-
Array (배열):
- 순서가 있는 데이터의 집합을 저장하는 자료구조입니다.
- 인덱스를 사용하여 각 요소에 접근할 수 있습니다.
- 중복된 값을 가질 수 있습니다.
- 요소의 추가, 제거, 수정 등 다양한 조작이 가능합니다.
- 다양한 내장 메서드와 기능을 제공하여 데이터를 조작할 수 있습니다.
- 주로 순차적인 데이터를 다룰 때 사용됩니다.
-
Set (집합):
- 유일한 값을 저장하는 자료구조입니다.
- 중복된 값을 허용하지 않습니다.
- 순서가 없이 값들이 저장됩니다.
- 요소의 추가, 제거, 조회 등 기본적인 조작이 가능합니다.
- 주로 중복을 제거하고 고유한 값들을 관리하기 위해 사용됩니다.
- 반복 가능한(iterable) 객체를 이용하여 초기화할 수 있습니다.
-
Map (맵):
- 키와 값의 쌍을 저장하는 자료구조입니다.
- 중복된 키를 가질 수 없으며, 각 키는 유일해야 합니다.
- 키-값 쌍의 순서를 보장합니다.
- 요소의 추가, 제거, 수정, 조회 등 다양한 조작이 가능합니다.
- 주로 키를 기반으로 값을 검색하고 관리하기 위해 사용됩니다.
- 반복 가능한(iterable) 객체를 이용하여 초기화할 수 있습니다.
요약하자면, 배열은 순서가 있는 데이터의 집합을 다루고, Set은 유일한 값을 가지는 집합을 다루며, Map은 키와 값의 쌍을 다룹니다. 각각의 자료구조는 다른 용도에 맞게 설계되었으며, 데이터의 특성과 조작 방식에 따라 선택하여 사용할 수 있습니다.
실제 예시
실제로 자주 사용되는 Map과 Set의 예시를 몇 가지 소개해드리겠습니다:
Map의 예시:
- 사용자 데이터 관리: Map을 사용하여 사용자의 고유 식별자를 키로, 사용자 정보를 값으로 매핑하여 사용자 데이터를 관리할 수 있습니다. 예를 들어, {사용자 ID: 사용자 정보} 형태로 저장하고, 특정 사용자를 찾거나 사용자 정보를 업데이트하는 데 사용할 수 있습니다.
const userMap = new Map();
userMap.set(1, { name: "John", age: 30 });
userMap.set(2, { name: "Jane", age: 25 });
console.log(userMap.get(1)); // { name: "John", age: 30 }- 객체 식별: Map을 사용하여 객체와 연관된 데이터를 저장하고 식별할 수 있습니다. 객체 자체를 키로 사용하여 값을 매핑할 수 있습니다.
const objectMap = new Map();
const obj1 = { id: 1 };
const obj2 = { id: 2 };
objectMap.set(obj1, "Value 1");
objectMap.set(obj2, "Value 2");
console.log(objectMap.get(obj1)); // "Value 1"Set의 예시:
- 중복 제거: Set을 사용하여 중복된 값을 제거하고 고유한 값만 유지할 수 있습니다. 배열이나 다른 컬렉션에서 중복을 제거할 때 유용합니다.
const numbers = [1, 2, 3, 4, 2, 3, 5, 1];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5 }- 태그 관리: Set을 사용하여 고유한 태그 목록을 유지할 수 있습니다. 사용자가 선택한 태그를 추가하거나 제거할 때 사용할 수 있습니다.
const selectedTags = new Set();
function addTag(tag) {
selectedTags.add(tag);
}
function removeTag(tag) {
selectedTags.delete(tag);
}
addTag("JavaScript");
addTag("HTML");
addTag("CSS");
console.log(selectedTags); // Set { "JavaScript", "HTML", "CSS" }
removeTag("HTML");
console.log(selectedTags); // Set { "JavaScript", "CSS" }위의 예시들은 Map과 Set을 활용하여 다양한 상황에서 데이터를 구성하고 관리하는 방법을 보여줍니다. 실제로는 프로그램의 요구사항과 데이터 구조에 맞게 Map과 Set을 활용하여 더 복잡하고 유용한 기능을 구현할 수 있습니다.
