Set, Map 어디에 사용할까?

공부한 내용을 정리한 글입니다 
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋

 

 

Set, Map

---

Set

---

수학적 집합을 구하기 위한 자료구조로, 중복되지 않는 유일한 값들의 집합이다.
배열과 다르게 요소 순서에 의미가 없어 인덱스로 접근할 수 없다.

인수로는 순회 가능한 데이터 컬렉션(이터러블)을 받기 때문에 배열, 문자열, Map, Set 등이 모두 가능하다.

 

 

const set = new Set('kelly')

console.log(set) // Set { 'k', 'e', 'l', 'y' }
console.log(set[0]) // undefined
console.log(set.has('k')) // true

 

Set을 생성하고 요소를 다루는 방법

---

 

const mySet = new Set();

mySet.add(1); // 요소 추가
mySet.add(2);
mySet.add(1); // 중복 요소이므로 무시됨
mySet.delete(2); // 요소 삭제
mySet.has(1); // true
mySet.size; // 1 (Set 내의 요소 개수)

// 출력1
for (const item of mySet) {
  console.log(item); // 1 (추가된 순서대로 출력)
}

// 출력2
mySet.forEach((item) => {
  console.log(item); // 1 (추가된 순서대로 출력)
});

mySet.clear(); // Set 내의 모든 요소 제거

 

 

 

어디에 사용할까?

---

 

1. 중복 요소 제거

배열에서 중복된 요소를 제거하려면 배열을 Set으로 변환한 다음 다시 배열로 변환하면 편리하다.

 

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

 

// 사용자가 작성한 게시물 목록
const userPosts = [
  { id: 1, title: '첫 번째 게시물', content: '내용1' },
  { id: 2, title: '두 번째 게시물', content: '내용2' },
  { id: 1, title: '첫 번째 게시물', content: '내용1' }, // 중복 게시물
  { id: 3, title: '세 번째 게시물', content: '내용3' },
];

// 중복 게시물을 제거하고 고유한 게시물 목록을 제공
const postIds = userPosts.map(post => post.id);
const uniqueIdsArray = [...new Set(postIds)]
const uniqueUserPosts = uniqueIdsArray.map(id => userPosts.find(post => post.id === id));


console.log(uniqueUserPosts);
// [
  { id: 1, title: '첫 번째 게시물', content: '내용1' },
  { id: 2, title: '두 번째 게시물', content: '내용2' },
  { id: 3, title: '세 번째 게시물', content: '내용3' }
]

 

 

2. 고유한 값 집합 유지

새로운 값을 추가할 때 중복 검사를 할 필요가 없다.

 

// 사용자가 선택한 색상 목록
const selectedColors = new Set();

// 사용자가 색상을 선택할 때 중복을 방지하여 목록에 추가
const addColor = (color) => {
  if (selectedColors.has(color)) return
  selectedColors.add(color);
}

addColor("red");
addColor("blue");
addColor("red");

const selectedColorArray = [...selectedColors]


// 중복이 제거된 선택된 색상 목록 출력
console.log(selectedColorArray); // ["red", "blue"]

 

 

3. 특정 값 포함 여부 확인

has 메서드를 사용해 특정 값이 집합에 포함되어 있는지 확인하는 데 사용할 수 있다.

 

const selectedOptions = new Set();

const addOption = (option) => {
  if (selectedOptions.has(option)) {
    console.log('이미 선택한 옵션입니다.');
  } else {
    selectedOptions.add(option);
    console.log(`'${option}' 옵션이 선택되었습니다.`);
  }
}

addOption("옵션1"); // '옵션1' 옵션이 선택되었습니다.
addOption("옵션2"); // '옵션2' 옵션이 선택되었습니다.
addOption("옵션1"); // 이미 선택한 옵션입니다.

 

 

+) 같은 코드를 배열로 작성했을 때

 

const selectedOptions = [];

const addOption = (option) => {
  if (selectedOptions.includes(option)) {
    console.log('이미 선택한 옵션입니다.');
  } else {
    selectedOptions.push(option);
    console.log(`'${option}' 옵션이 선택되었습니다.`);
  }
}

addOption("옵션1"); // '옵션1' 옵션이 선택되었습니다.
addOption("옵션2"); // '옵션2' 옵션이 선택되었습니다.
addOption("옵션1"); // 이미 선택한 옵션입니다.

 

 

+) 같은 코드를 객체로 작성했을 때

 

const selectedOptions = {};

const addOption = (option) => {
  if (option in selectedOptions) {
    console.log('이미 선택한 옵션입니다.');
  } else {
    selectedOptions[option] = true;
    console.log(`'${option}' 옵션이 선택되었습니다.`);
  }
}

addOption("옵션1"); // '옵션1' 옵션이 선택되었습니다.
addOption("옵션2"); // '옵션2' 옵션이 선택되었습니다.
addOption("옵션1"); // 이미 선택한 옵션입니다.

 

 

 

Map

---

키와 값의 쌍을 저장하는 데이터 구조로, 키를 사용해 값을 조회할 때 효과적이다.

Set과 마찬가지로 인수로 순회 가능한 데이터 컬렉션(이터러블)을 받는다. 

 

 

Map을 생성하고 요소를 다루는 방법

---

 

const myMap = new Map();

myMap.set("name", "kelly"); // 키-값 쌍 추가
myMap.set("age", 27);
myMap.get("name"); // "kelly" (키로 값 검색)
myMap.has("age"); // true
myMap.delete("name"); // 키-값 쌍 삭제
myMap.size; // 1 (Map 내의 키-값 쌍 개수)

// 출력1
for (const [key, value] of myMap) {
  console.log(key, value); // "age" 27
}

// 출력2
myMap.forEach((value, key) => {
  console.log(key, value); // "name" "kelly", "age" 27
});


myMap.clear(); // Map 내의 모든 키-값 쌍 제거

 

 

어디에 사용할까?

---

 

1. 키-값 데이터 관리

 

const userMap = new Map();

userMap.set('kelly', { age: 27, job: 'developer' });
userMap.set('alice', { age: 33, job: 'designer' });

userMap.get('kelly'); // { age: 27, job: 'developer' }

 

 

2. 데이터 검색

 

const movieGenres = new Map();

// 영화 정보 추가
movieGenres.set("해리포터", "판타지/SF");
movieGenres.set("반지의 제왕", "판타지/SF");
movieGenres.set("셜록홈즈", "추리");

// 특정 영화의 장르 확인
const movieToCheck = "해리포터";

if (movieGenres.has(movieToCheck)) {
  const genre = movieGenres.get(movieToCheck);
  console.log(`영화 "${movieToCheck}"의 장르는 ${genre}입니다.`);
} else {
  console.log(`"${movieToCheck}"라는 영화 정보를 찾을 수 없습니다.`);
}


// 영화 "해리포터"의 장르는 판타지/SF입니다.

 

 

 

참고

---

책 : 모던 자바스크립트 딥다이브

모던 자바스크립트 Deep Dive - 예스24