1. 자바스크립트에서 Map과 Set의 필요성
Map과 Set은 자바스크립트에서 데이터를 효율적으로 관리하기 위한 중요한 데이터 구조입니다. 기본적으로 Map은 키-값 쌍을 저장하고, Set은 중복 값을 허용하지 않는 값들의 집합을 저장합니다.
1.1 Map의 필요성
자바스크립트에서 Object를 사용하여 데이터를 저장하면, 키는 항상 문자열 또는 심볼이어야 합니다. 그러나, Map을 사용하면 어떠한 자료형도 키로 사용할 수 있습니다. 추가적으로, Map은 요소의 삽입 순서를 기억하므로 순서가 중요한 경우에 유용합니다.
Map 예시
const map = new Map();
const keyObj = {},
keyFunc = function () {},
keyString = "a string";
// setting the values
map.set(keyString, "value associated with 'a string'");
map.set(keyObj, "value associated with keyObj");
map.set(keyFunc, "value associated with keyFunc");
console.log(map.size); // 3
1.2 Set의 필요성
Set은 중복을 허용하지 않는 값들의 집합입니다. 배열에서 중복된 요소를 제거할 때 간단하게 사용할 수 있습니다.
Set 예시
const set = new Set();
set.add(1);
set.add(5);
set.add(5);
set.add("some text");
let obj = {a: 1, b: 2};
set.add(obj);
set.add({a: 1, b: 2}); // 다른 객체를 참조하므로, obj와 다르다.
console.log(set.size); // 5
2. Map과 Set 개념 설명
2.1 Map 개요
Map은 키-값 쌍을 저장하는 데이터 구조입니다. Object와 유사하지만 키로 어떠한 자료형도 받을 수 있는 것이 특징입니다. 또한, Map은 키의 삽입 순서를 기억하므로 순서가 중요한 작업에서 유리합니다.
Map 예시
const map = new Map();
map.set('apple', 'red');
map.set('banana', 'yellow');
console.log(map.get('apple')); // 'red'
console.log(map.has('banana')); // true
console.log(map.size); // 2
map.delete('apple');
console.log(map.has('apple')); // false
2.2 Set 개요
Set은 중복을 허용하지 않는 값들의 집합을 저장하는 데이터 구조입니다. 또한 Set은 삽입된 값의 삽입 순서를 기억하므로 순서대로 데이터를 다루는 데 사용될 수 있습니다. 중복된 요소를 제거할 필요가 있는 작업에 주로 사용됩니다.
Set 예시
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2); // 중복된 값이므로, 추가되지 않습니다.
console.log(set.has(1)); // true
console.log(set.size); // 3
set.delete(1);
console.log(set.has(1)); // false
3. Map을 활용한 데이터 관리
3.1 Map 생성
Map 객체는 new 키워드를 사용하여 생성할 수 있습니다. 생성 후에는 set 메소드를 이용해 키와 값을 저장할 수 있습니다.
Map 생성 예시
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.size); // 2
3.2 Map 사용법
Map에는 주로 set, get, has, delete, clear 와 같은 메소드가 사용됩니다. set은 키와 값을 저장, get은 키를 통해 값을 얻어옵니다. has는 특정 키가 존재하는지 확인하고, delete는 키와 연결된 값을 삭제합니다. clear는 Map 내의 모든 값을 삭제합니다.
Map 사용법 예시
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // 'Alice'
console.log(map.has('age')); // true
map.delete('name');
console.log(map.has('name')); // false
map.clear();
console.log(map.size); // 0
3.3 Map 실전 예제
이제 사용자의 이름과 나이를 저장하고, 나이를 업데이트하는 시나리오에 대한 실전 예제를 살펴보겠습니다.
Map 실전 예제
const user = new Map();
// 사용자 정보 저장
user.set('name', 'Alice');
user.set('age', 25);
// 나이 업데이트
user.set('age', 26);
console.log(user.get('name')); // 'Alice'
console.log(user.get('age')); // 26
4. Set을 활용한 데이터 관리
4.1 Set 생성
Set 객체를 생성하는 것은 매우 간단합니다. new 키워드를 이용해서 새로운 Set을 생성하고 add 메소드를 이용하여 원하는 요소를 추가할 수 있습니다.
Set 생성 예시
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.size); // 3
4.2 Set 사용법
Set에는 주로 add, delete, has, clear 메소드가 사용됩니다. add는 요소를 추가, delete는 특정 요소를 삭제, has는 특정 요소의 존재를 확인하고, clear는 Set 내의 모든 요소를 삭제합니다.
Set 사용법 예시
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set.has(2)); // true
set.delete(2);
console.log(set.has(2)); // false
set.clear();
console.log(set.size); // 0
4.3 Set 실전 예제
이제 1부터 10까지의 숫자중 홀수를 추출하는 시나리오에 대한 실전 예제를 살펴보겠습니다.
Set 실전 예제
const numbers = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
// 홀수 추출
const odd = Array.from(numbers).filter(n => n % 2 === 1);
console.log(odd); // [1, 3, 5, 7, 9]
5. Map과 Set의 효율적 활용
5.1 빠른 데이터 검색을 위한 활용법
Map 및 Set은 빠른 검색을 위해 매우 유용합니다. 키 또는 값에 직접 액세스하여 O(1) 시간에 원하는 데이터를 검색할 수 있습니다.
검색 시나리오
const map = new Map();
map.set('Alice', 25);
map.set('Bob', 27);
// 데이터에 레이어를 추가하지 않고 직접 검색
console.log(map.has('Alice')); // true
console.log(map.get('Bob')); // 27
5.2 데이터 중복 제거를 위한 활용법
Set의 또 다른 중요한 기능은 데이터 중복 제거입니다. Set은 동일한 값을 여러 번 추가해도 한 번만 저장합니다. 이를 이용하면 배열 등의 데이터에서 중복 항목을 쉽게 제거할 수 있습니다.
중복 제거 예시
const numbers = [1, 1, 2, 2, 3, 3];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3]
6. Map과 Set의 확장과 변형 사용
JavaScript의 Map과 Set은 광범위하게 확장 및 변형하여 사용할 수 있습니다. 사용자 정의 객체를 키로 사용하는 Map이나, 특정 자료형만 포함할 수 있는 Set 등을 만드는 것도 가능합니다.
6.1 Map의 확장
사용자 정의 객체를 키로 사용하는 Map
const user1 = { name: 'Alice' };
const user2 = { name: 'Bob' };
const userAgeMap = new Map();
userAgeMap.set(user1, 27);
userAgeMap.set(user2, 30);
console.log(userAgeMap.get(user1)); // 27
console.log(userAgeMap.get(user2)); // 30
6.2 Set의 확장
특정 자료형만 포함할 수 있는 Set
class NumberSet extends Set {
add(value) {
if (typeof value !== 'number') {
throw 'Only numbers can be added!';
}
super.add(value);
}
}
const numbers = new NumberSet();
numbers.add(1);
console.log(numbers.has(1)); // true
numbers.add('2'); // Throws an error
7. Map과 Set의 주의점과 차이점
7.1 Map과 Set의 차이점
Map 과 Set 의 가장 큰 차이점은 Map이 키-값 쌍을 저장하는 반면, Set은 유일한 값만을 저장한다는 점입니다.
따라서, 특정 키에 연결된 값을 관리해야 하는 경우 Map을, 중복 없이 값을 관리해야 하는 경우 Set을 사용합니다.
7.2 주의점
Map과 Set 모두 객체를 키로 사용할 수 있습니다. 그러나 객체의 속성은 그 객체의 키로 사용될 수 없습니다.
코드 예시
const user = { name: 'Alice' };
const map = new Map();
map.set(user, 27);
console.log(map.get(user)); // 27
const prop = 'name';
map.set(user[prop], 30);
console.log(map.get('Alice')); // undefined - Not 30 as might be expected
위의 코드에서 보듯, map.set(user[prop], 30)에서 prop는 user 객체의 속성입니다. 이 속성은 객체의 키로 사용될 수 없으므로, map.get(‘Alice’)는 undefined를 반환합니다.
8. 실제 코딩 환경에서의 Map과 Set 활용법
8.1 Map과 Set을 활용한 프로젝트 예제
Map과 Set은 실제 코딩 환경에서 다양한 방법으로 활용될 수 있습니다. 예를 들어, 웹 애플리케이션에서 사용자 세션을 관리하는 경우, 각 세션을 구분하는 키로 사용자의 ID를 사용하고, 해당 키에 연결된 값으로 세션 정보를 저장할 수 있습니다. 이렇게 하면 ID를 통해 빠르게 각 사용자의 세션 정보를 찾아낼 수 있습니다.
const sessions = new Map();
function createSession(userId, sessionData) {
sessions.set(userId, sessionData);
}
function getSession(userId) {
return sessions.get(userId);
}
createSession('user1', { loggedInAt: new Date(), ipAddress: '172.30.1.1' });
createSession('user2', { loggedInAt: new Date(), ipAddress: '172.30.1.2' });
console.log(getSession('user1'));
console.log(getSession('user2'));
또한, Set은 중복 없는 콜렉션을 다룰 때 유용합니다. 예를 들어, 호스트로부터 받아온 데이터 간에 중복이 있을 경우, 이를 제거하기 위해 Set을 활용할 수 있습니다.
const rawData = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const uniqueData = new Set(rawData);
console.log([...uniqueData]);
위의 코드에서 rawData는 중복된 데이터를, uniqueData는 중복을 제거한 새로운 Set입니다. 즉, new Set(rawData)는 rawData 내의 중복된 값을 제거하고, console.log([…uniqueData])를 통해 배열로 변환된 후 출력됩니다.
9. 자주 찾는 질문들
Q1: Map을 생성할 때, 어떤 값들을 키로 사용할 수 있나요?
A1: Map에서는 어떠한 형태의 값도 키로 사용할 수 있습니다. 이는 객체, 배열, 함수, 심지어 다른 Map이나 Set까지도 포함된다.
Q2: Set에서 중복된 값이 정말로 저장되지 않는 것일까요?
A2: 네, 그렇습니다. Set은 중복된 값을 저장하지 않습니다. Set에 반복해서 같은 값을 추가해도, 그 값은 단 한 번만 저장됩니다.
const set = new Set();
set.add(1);
set.add(1);
set.add(1);
console.log(set.size); // 1
Q3: Map과 Set 사이에서 어떤 것을 선택해야 할까요?
A3: 이는 상황에 따라 다르며, 특히 저장하려는 데이터의 형태에 따라 결정됩니다. 키-값 쌍을 저장하려면 Map을, 유일한 값을 저장하려면 Set을 선택하면 됩니다.
10. 마무리 및 결론
Map과 Set은 자바스크립트에서 매우 유용한 데이터 구조로, 다양한 문제를 효율적으로 해결하는 데 도움이 됩니다. Map은 키와 값을 쌍으로 저장하며, 어떠한 데이터 유형도 키로 사용할 수 있습니다. 반면에 Set은 중복 없는 값들의 모음을 저장하는 데 활용됩니다.
다음은 Map과 Set을 활용한 간단한 자바스크립트 코드 예제입니다.
// Example of Map
const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
console.log(map.get('name')); // Alice
console.log(map.get('age')); // 20
// Example of Set
const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(1); // This will not be added, because 1 is already in the set
console.log(set.has(1)); // true
console.log(set.has(2)); // true
console.log(set.has(3)); // true
console.log(set.has(4)); // false
이를 통해 상황에 맞게 효과적인 데이터 구조를 선택하고 활용할 수 있어야 합니다. 대부분의 경우, 배열이나 객체와 같은 일반적인 자료 구조로도 충분하지만, 때로는 Map과 Set과 같은 특별한 자료 구조를 사용해야 하는 상황도 있습니다. 이때는 각 자료 구조의 특성과 장단점을 이해하고 있어야 합니다.