JavaScript 에서 Map 과 Set

ST00CK 프로젝트를 진행하면서 Redis 의 SET 에 대해 공부하게 되었다. 기존 Socket.IO 에서 사용한 Map 과 Set 의 어떤 차이가 있는지, 그리고 이어가서 Redis 에서의 Hash와 Set 은 어떤식으로 이루어져 있는지 공부한 것을 작성해보도록 한다.

---

1. JavaScript 에서 Map 과 Set

1.1 JavaScript Set (중복 없는 값의 집합)

JavaScript 에서의 Set 은 중복된 값을 허용하지 않는 자료구조 이다. 배열과 유사하지만, 중복을 자동으로 제거한다. 간단하게 다음과 같이 코드를 작성해 볼 수 있다.

// 과일 목록을 저장하는 Set 생성
const fruits = new Set();

// 과일 추가 (.add)
fruits.add("apple");
fruits.add("banana");
fruits.add("apple");  // 중복된 값은 추가되지 않음

console.log(fruits);  // Set { 'apple', 'banana' }

// 특정 과일 삭제 (.delete)
fruits.delete("apple");
console.log(fruits);  // Set { 'banana' }

// 과일이 존재하는지 확인 (.has)
console.log("바나나가 있나요?", fruits.has("banana")); // true
console.log("키위가 있나요?", fruits.has("kiwi")); // false

// 전체 과일 개수 확인 (.size)
console.log("과일 개수:", fruits.size); // 1

// 모든 과일 출력 (.forEach)
fruits.forEach(fruit => console.log(fruit));

// Set을 배열로 변환
const fruitsArray = [...fruits];
console.log(fruitsArray);  // [ 'banana' ]

 

1.2 JacaScript Map (키-값 저장소)

JavaScript 에서 Map 은 키-값 형태로 데이터를 저장하는 자료구조이며 객체({}) 와 비슷하지만, Map 은 키의 자료형을 제한하지 않는다. 간단하게 다음과 같이 코드를 작성해 볼 수 있다.

// 과일 가격을 저장하는 Map 생성
const fruitPrices = new Map();

// 과일 추가 (.set)
fruitPrices.set("Apple", 1000);
fruitPrices.set("Banana", 1500);
fruitPrices.set("Grapes", 3000);

console.log(fruitPrices); // Map(3) { 'Apple' => 1000, 'Banana' => 1500, 'Grapes' => 3000 }

// 특정 과일의 가격 조회 (.get)
console.log("Apple price:", fruitPrices.get("Apple")); // 1000
console.log("Banana price:", fruitPrices.get("Banana")); // 1500
console.log("Orange price:", fruitPrices.get("Orange")); // undefined (저장되지 않은 과일)

// 과일이 존재하는지 확인 (.has)
console.log("망고가 있나요?", fruitPrices.has("Mango")); // false
console.log("포도가 있나요?", fruitPrices.has("Grapes")); // true

// 특정 과일 삭제 (.delete)
fruitPrices.delete("Banana");
console.log(fruitPrices); // Map(2) { 'Apple' => 1000, 'Grapes' => 3000 }

// 전체 과일 개수 확인 (.size)
console.log("과일 종류 개수:", fruitPrices.size); // 2

// 모든 과일 출력 (.forEach)
fruitPrices.forEach((price, fruit) => {
    console.log(`${fruit}의 가격은 ${price}원입니다.`);
});

---

2. 활용 예제

2.1 배열에서 중복제거 (Set 활용)

const arr = [1, 2, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

 

2.2 객체를 키로 하는 Map

let user1 = { name: 'Alice' };
let user2 = { name: 'Bob' };

let userRoles = new Map();
userRoles.set(user1, 'Admin');
userRoles.set(user2, 'User');

console.log(userRoles.get(user1)); // Admin

 

2.3 문자열 중복 문자 제거 (Set 활용)

const str = 'hello world';
const uniqueStr = [...new Set(str)].join('');
console.log(uniqueStr); // 'helo wrd'