RARRIT

기억을 너무 믿지 말자

:ledger: 자바스크립트의 Map과 Set을 알아보자!

이전에 배열 메서드인 map과 혼동했었는데, Map과 Set은 자바스크립트에서 컬렉션 객체를 나타내는 자료구조이다.

:one: Map

  • Map 객체는 key-value 쌍을 저장하며, key의 종류에 제한이 없는 자료구조이다.
  • key와 value으로 어떤 타입도 사용할 수 있음

    :pushpin: 1-1) Map의 특징

    • key-value 쌍: 각 요소는 고유한 키와 그 키에 매핑된 값으로 구성됨
    • 순서: 삽입된 순서대로 요소를 반복할 수 있음
    • key type: 문자열, 객체 등 모든 타입을 키로 사용할 수 있음

:pushpin: 1-2) Map의 주요 메서드

  • set(key, value): key-value 쌍을 Map에 추가함
  • get(key): 주어진 key에 해당하는 value를 반환함
  • has(key): 특정 key가 있는지 확인
  • delete(key): 모든 key-value 쌍을 제거함
  • clear(): 모든 key-value 쌍을 제거함
  • size: Map에 있는 key-value의 개수를 반환함

:pushpin: 1-3) 예시

// 예시
const map = new Map();
map.set('name', 'rarrit'); // map의 'name' 키와 'rarrit' 값을 생성함
map.set('age', 30); // map의 'age' 키와 30 값을 생성함

console.log(map.get('name')); // 'rarrit'의 value를 반환: rarrit
console.log(map.has('age'));  // 'age'키가 있는지 확인: true
console.log(map.size);        // map의 개수를 반환함: 2

map.delete('age'); // map의 'age'를 제거함 
console.log(map.size); // 'age'가 제거되어 'name'만 있음: 1

map.clear(); // map의 모든 key,value를 제거함
console.log(map.size); // 0

:two: Set

  • Set 객체는 중복되지 않는 유일한 값들의 집합이다.
  • 값이 중복되지 않는다는 특징이 중요함

:pushpin: 2-1) Set의 특징

  • 유일한 값: 동일한 값이 중복될 수 없음
  • 순서: 삽입된 순서대로 요소를 반복할 수 있음

:pushpin: 2-2) Set의 주요 메서드

  • add(value): 값을 Set에 추가함
  • has(value): 특정 값이 있는지 확인함
  • delete(value): 특정 값을 제거함
  • clear(): 모든 값을 제거함
  • size: Set에 있는 값의 개수를 반환함

:pushpin: 2-3) 예시

const set = new Set();
set.add(1); // set에 값 1을 할당함
set.add(2); // set에 값 2를 할당함
set.add(2); // set에 값 2를 할당하지만 중복된 값이라 무시함

console.log(set.has(1)); // set에 값 1이 있는지 확인: true
console.log(set.size); // set에 값의 갯수를 확인: 2

set.delete(1); // set에 있는 값1을 제거함
console.log(set.size); // set에 값의 갯수를 확인: 현재 2만 있어서 1출력

set.clear(); // set에 모든 값을 제거함
console.log(set.size); // set에 값의 갯수를 확인: 0

:three: 실무 사용 예시

:pushpin: 3-1) Map을 사용하여 배열의 요소를 다른 데이터와 연결하는데 사용

const test = new Map();
test.set('test1', [1,2,3,4,5]);
test.set('test2', [5,4,3,2,1]);

console.log(test.get('test1')); // [1,2,3,4,5]
console.log(test.get('test2')); // [5,4,3,2,1]

:pushpin: 3-2) Set을 사용하여 중복된 값을 제거

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

:four: 배열 메서드 map과의 차이

처음 Map객체와 map메서드를 헷갈려해서 차이점을 정리했다.

  1. 자료구조 vs 배열 메서드
    • Map과 Set은 key-value 쌍과 유일한 값의 집합을 저장하는 자료구조임
    • 배열 map메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성하는 메서드임
  2. 목적
    • Map: 키-값 쌍을 효율적으로 저장하고 관리
    • Set: 유일한 값의 집합을 관리
    • map: 배열의 각 요소를 변환하여 새로운 배열을 생성

:fire: 마무리

자바스크립트의 Map과 Set객체를 알아보았다. 처음 Map을 보았을 때 배열 메서드인 map과 혼동했었는데 이번 공부를 통해 차이점까지 이해했다. 결국 Map은 키와 값을 저장하고 조회할 수 있으며 삭제또한 가능하고 Set은 유일한 값을 저장하고 중복된 값을 허용하지 않기에 특정 값을 찾기에 유용한 것 같다. 현재 자바스크립트를 공부하며 다양한 문법을 알게되었지만 실무에서 아직 사용해보지 않아서 어떤식으로 사용해야하는 지 크게 감이 잡히지 않는다. 추후 사용하게 되면 글을 업데이트를 해야겠다.

태그:

카테고리: ,

업데이트:

참고