[JS]자료구조(Set,Map)

Set이란🤔

중복되지 않는 유일한 값들의 집합

 

배열과 유사해보이지만 차이가 있다!

	배열	Set 객체
중복	⭕	❌
순서 여부	⭕	❌
인덱스로 접근 여부	⭕	❌

• Set 생성자 함수로 생성
• 인수를 전달하지 않으면 빈 Set 객체가 생성
• Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성
  👉이때 이터러블의 중복된 값은 Set 객체에 요소로 저장❌
• 배열에서 중복된 요소를 제거할 때 쓰일 수 있음
• Set 객체 생성 new Set();
• 요소 개수 확인 Set.prototype.size;
• 요소 추가 Set.prototype.add;
• 요소 존재 여부 확인 Set.prototype.has;
• 요소 삭제 Set.prototype.delete;
• 요소 일괄 삭제 Set.prototype.clear;
• 요소 순회 Set.prototype.forEach;

// 배열 내 중복된 요소 제거하기
const colors = ['빨강', '파랑', '초록', '빨강', '노랑', '파랑'];
const uniqueColors = [...new Set(colors)]; // Set을 이용해 중복 제거
console.log(uniqueColors); // ["빨강", "파랑", "초록", "노랑"]

// Set 생성하기
const numberSet = new Set([10, 20, 30]);
console.log(numberSet); // Set(3) {10, 20, 30}

// Set의 크기 확인하기
console.log(numberSet.size); // 3

// 특정 요소가 존재하는지 확인하기
console.log(numberSet.has(20)); // true, 20이 존재합니다.
console.log(numberSet.has(40)); // false, 40은 존재하지 않습니다.

// Set 순회하기
numberSet.forEach((num) => console.log(num)); // 10 20 30
for (const num of numberSet) {
    console.log(num); // 10 20 30, 이터러블로 순회
}

// Set에 요소 추가하기
numberSet.add(40); 
console.log(numberSet); // Set(4) {10, 20, 30, 40}

// Set에서 요소 삭제하기
numberSet.delete(20);
console.log(numberSet); // Set(3) {10, 30, 40}

// Set의 모든 요소 삭제하기
numberSet.clear();
console.log(numberSet); // Set(0) {}, 모든 요소가 삭제되었습니다.

// 객체를 Set에 저장하기
const fruit1 = { name: '사과', price: 1000 };
const fruit2 = { name: '바나나', price: 500 };
const fruitSet = new Set([fruit1, fruit2]);
console.log(fruitSet); // Set(2) {{name: '사과', price: 1000}, {name: '바나나', price: 500}}

 

[mdn 공식문서]

Set - JavaScript | MDN

---

Map이란🤔

키와 값의 쌍으로 이루어진 컬렉션

객체와 유사해보이지만 차이가 있다!

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	❌	⭕
요소 개수 확인	Object.keys(obj).length	map.size

• 키와 값으로 이루어진 자료구조
• 키는 유일해야 함
• 값은 중복 가능
• 순서 상관없음
• Map 객체 생성 new Map();
• 요소 개수 확인 Map.prototype.size;
• 요소 추가 Map.prototype.set;
• 요소 존재 여부 확인 Map.prototype.has;
• 요소 삭제 Map.prototype.delete;
• 요소 일괄 삭제 Map.prototype.clear;
• 요소 순회 Map.prototype.forEach;

// 학생의 점수를 저장하는 Map 객체 생성
const studentScores = new Map([
    ['학생1', 85],
    ['학생2', 90],
    ['학생3', 78],
]);
console.log(studentScores); // Map(3) {'학생1' => 85, '학생2' => 90, '학생3' => 78}

// Map의 크기 확인
console.log(studentScores.size); // 3

// 특정 학생의 점수 존재 여부 확인
console.log(studentScores.has('학생1')); // true, '학생1'의 점수가 존재합니다.
console.log(studentScores.has('학생4')); // false, '학생4'는 존재하지 않습니다.

// Map 순회하기
studentScores.forEach((score, student) => console.log(student, score)); // 학생1 85, 학생2 90, 학생3 78

// 학생 키만 출력하기
console.log(studentScores.keys()); // [Map Iterator] {'학생1', '학생2', '학생3'}

// 점수 값만 출력하기
console.log(studentScores.values()); // [Map Iterator] {85, 90, 78}

// 키와 점수의 쌍을 출력하기
console.log(studentScores.entries()); // [Map Entries] { ['학생1', 85], ['학생2', 90], ['학생3', 78] }

// 특정 학생의 점수 찾기
console.log(studentScores.get('학생2')); // 90
console.log(studentScores.get('학생4')); // undefined, '학생4'는 없습니다.

// 새로운 학생의 점수 추가하기
studentScores.set('학생4', 95);
console.log(studentScores); // Map(4) {'학생1' => 85, '학생2' => 90, '학생3' => 78, '학생4' => 95}

// 특정 학생의 점수 삭제하기
studentScores.delete('학생3');
console.log(studentScores); // Map(3) {'학생1' => 85, '학생2' => 90, '학생4' => 95}

// 모든 점수 삭제하기
studentScores.clear();
console.log(studentScores); // Map(0), 모든 학생의 점수가 삭제되었습니다.

 

[mdn 공식문서]

Map - JavaScript | MDN