[자바스크립트] Map과 Set

Woonil·2025년 5월 22일

자바스크립트

목록 보기

5/8

Map은 [키, 값]을 요소로 가지며, 객체와 다른 점은 키에 객체를 포함한 다양한 자료형을 허용한다. 또한 키-값 쌍과 키의 원래 삽입 순서를 기억한다.

선언

    const map = new Map();

Map.prototype.size : 요소의 개수를 반환
Map.prototype.has(key) : key 존재 여부 불리언 반환
Map.prototype.delete(key) : 키에 해당하는 값을 삭제
Map.prototype.clear() : 맵 안의 모든 요소를 제거

Set는 중복을 허용하지 않는 집합이다.

선언: 항상 new 키워드와 함께 선언해야 하며, 이터러블 객체(배열, 문자열 등)가 전달되면 모든 요소가 새로운 Set에 추가

	const set = new Set([]); // 빈 배열로 초기화
	const set = new Set([1, 2, 3]);

맵과 셋

🤔개념

Map

할당 & 조회

`set`

map.set(key, value): 맵에 키에 따른 값 설정
```
map.set("firstName", "wonil");
```
map[key] = value

맵에 이와 같이 값을 할당하는 것이 가능하나, 이 방법은 map을 일반 객체처럼 취급하게 되므로 set를 사용해야만 한다.
객체를 키로 사용

    let wonil = { name: 'Wonil' }
    let visitsCountMap = new Map();
    visitsCountMap.set(wonil, 100);

체이닝

map.set 을 호출할 때마다 맵 자신이 반환되므로 ‘체이닝’이 가능하다.
map.set('banana', 1000)
	.set('strawberry', 3000)

`get`

주어진 키에 해당하는 값을 반환하거나 값이 없다면 undefined을 반환

순회

map.keys() : 각 요소의 키를 모은 반복 가능한 객체(이터러블 객체)를 반환
map.values() : 각 요소의 값을 모은 이터러블 객체를 반환
map.entries() : 요소의 [키, 값] 을 한 쌍으로 하는 이터러블 객체를 반환하며, 이 객체는 for ..of 반복문의 기초로 쓰인다.

맵 반환값에 배열 메서드 적용

keys(), values(), entries() 모두 이터러블 객체를 반환하므로 Array.from() 을 이용하여 맵을 배열로 변환 후 배열 메서드를 적용해야 한다.

삽입 순서

맵은 값이 삽입된 순서로 순회를 실시하며, 이는 객체가 프로퍼티 순서를 기억하지 못하는 것과 다른 점이다.

변환: 각 요소가 키-값 쌍인 배열이나 이터러블 객체를 초기화 용도로 맵에 전달해 새로운 맵을 만들 수 있다.

    let map = new Map([
    	['banana', 1000],
    	['strawberry', 3000]
    ]);

Object.entries: 평범한 객체를 맵으로 변환 시 사용할 수 있는 메서드로, 객체의 키-값 쌍을 요소로 가지는 배열을 반환한다.

        let obj = {
        	name: 'wonil',
        	age: 26
        };
        let map = new Map(Object.entries(obj));

Object.fromEntries: 맵을 객체로 변환 시 사용할 수 있는 메서드로, 각 요소가 [키, 값] 쌍인 배열을 객체로 변환한다.

        let prices = Object.fromEntries([
          ['banana', 100],
          ['orange', 20],
          ['meat', 400]
        ]);
        
        // prices = { banana: 100, orange: 20, meat: 400 }

        let map = new Map();
        map.set('banana', 100);
        map.set('orange', 20);
        map.set('meat', 400);
        
        let obj = Object.fromEntries(map.entries());
        // let obj = Object.fromEntries(map); => entries 생략가능
        
        // obj = { banana: 100, orange: 20, meat: 400 }

Set

Set - JavaScript | MDN

객체 세트: 객체 또한 세트의 요소가 될 수 있다.

    const obj1 = { name: "🍎", price: 8 };
    const obj2 = { name: "🍰", price: 5 };
    const objs = new Set([obj1, obj2]);

기존 객체 변경: 기존의 obj1의 속성만 변경된다.

	obj1.price = 10;
	objs.add(obj1);

내용이 중복된 객체 추가: 기존의 obj2와 내용은 같지만, 다른 주소값을 가진 객체이므로 다른 요소로 취급되어 세트에 추가된다.

	const obj3 = { name: "🍰", price: 5 };
	objs.add(obj3);

set.size: 세트의 값 갯수 반환
set.has(value): 세트의 요소 존재 유무를 불리언으로 반환
추가 & 삭제
- set.add(element): 세트에 요소를 추가(중복을 허용하지 않음)
- set.delete(element): 세트의 해당요소를 삭제
- set.clear(): 세트의 모든 요소를 삭제
순회: 세트 요소를 순회하여 조회
- set.keys()
- set.values()
- set.entries()
- forEach
- for..of

변환

배열 변환

// 전개 구문을 사용하여 set을 배열로 변형
console.log([...se]);

문자열 변환

// 대소문자 구문 (set은 "F"와 "f"를 모두 가지게 됨)
new Set("Firefox");

😎실습

프로그래머스 입문: 로그인 성공?

https://school.programmers.co.kr/learn/courses/30/lessons/120883

function solution(id_pw, db) {
    const map=new Map(db);
    const [id,pw]=id_pw;
    
    if(map.has(id)){
        if(pw===map.get(id)){
            return 'login';
        }else{
            return 'wrong pw';
        }
    }else{
        return 'fail';
    }
}

백준: 무한 수열

https://www.acmicpc.net/problem/1351

let n, p, q;
const d = new Map();

const recurse = (x) => {
  if (d.has(x)) {
    return d.get(x);
  }

  d.set(x, recurse(Math.floor(x / p)) + recurse(Math.floor(x / q)));

  return d.get(x); // d[x]가 아님에 유의
  
};

(async () => {
  let rl = readline.createInterface({ input: process.stdin });
  // 입력 받기...
  d.set(0, 1);
  recurse(n);
  console.log(d.get(n));
})();