Gapus Dev Blog

[자바스크립트] Map과 Set 본문

프론트엔드/JavaScript

[자바스크립트] Map과 Set

Gapus 2023. 11. 13. 09:59

 

Map

  • 설명
    • 키와 값의 쌍을 저장하는 컬렉션
    • 객체와 유사하지만, Map은 키에 다양한 데이터 타입 사용 가능
    • 객체와 달리, Map은 순서를 보장하고 키의 중복을 허용하지 않는다.
    • 데이터를 쉽게 저장하고 검색 가능
    • 다양한 메서드를 제공해 데이터를 추가, 삭제, 수정, 조회 가능
  • 사용해야 하는 경우
    • 키와 값 쌍으로 데이터를 저장하고자 할 때
      • 키와 값을 쌍으로 저장하기 때문에, 데이터를 키와 값 형태로 관리 해야할 때 유용
      • 사용자 정보를 키로 하고 해당 사용자의 데이터를 값으로 저장하는 경우
    • 순서가 중요한 경우
      • 데이터의 순서를 보장하기 때문에, 데이터를 추가한 순서대로 순회하거나 처리할 때 유용
      • 작업 목록을 순서대로 처리하고자 할 때
  • 동작 원리
    • Map은 내부적으로 해시 테이블(hash table)을 사용하여 데이터를 저장하고 검색
    • 해시 테이블은 효율적인 데이터 접근을 위해 키-값 쌍을 해시 함수를 통해
      해시값으로 변환한 후, 내부 배열에 저장

    • 데이터 추가
      • set(key, value) 메서드를 사용
      • 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에 저장
      • 동일키 존재 시, 해당 키에 대응하는 값을 업데이트
    • 데이터 조회
      • get(key) 메서드를 사용하여 특정키에 해당되는 값 검색
      • 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에서 검색 후 반환
      • 해시값으로 변환된 키를 이용하여 배열 내부에서 빠른 검색 진행
    • 데이터 삭제
      • delete(key) 메서드를 사용하여 특정 키에 해당되는 값을 삭제
      • 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에서 검색 후 해당 요소 제거
  • 예시
// Map 생성
let map = new Map();

// 데이터 추가
map.set("이름", "홍길동");
map.set("나이", 30);
map.set("성별", "남성");

// 데이터 조회
console.log(map.get("이름")); // 출력: 홍길동
console.log(map.get("나이")); // 출력: 30

// 데이터 삭제
map.delete("성별");

// 데이터 유무 확인
console.log(map.has("나이")); // 출력: true
console.log(map.has("성별")); // 출력: false

 

 

Set

  • 설명
    • 중복되지 않는 값을 저장하는 컬렉션
    • 유일한 값만을 저장
    • 순서를 유지하지만, 인덱스로 접근 불가
    • 배열과 비슷한 형태
    • 값의 추가, 삭제, 확인 등 가능
  • 사용해야 하는 경우
    • 고유한 값을 유지해야 할 때
      • 중복된 값을 허용하지 않기 때문에, 고유한 값을 저장하고자 할 때 유용
      • 중복을 제거한 목록을 유지하거나 고유한 태그 목록을 저장하고자 할 때
    • 값의 존재 여부를 확인해야 할 때
      • 값의 존재 여부를 빠르게 확인할 수 있는 메서드를 제공
      • 특정 값이 이미 존재하는지 여부를 확인하고자 할 때
  • 동작 원리
    • Set은 내부적으로 해시 테이블(hash table) 또는 이진 검색 트리(binary search tree)를
      사용하여 고유한 값을 저장 ,검색

    • 데이터 추가
      • add(value) 메서드를 사용하여 값을 추가
      • 내부적으로 값의 고유성을 확인하고, 중복된 값을 저장하지 않는다.
      • 값을 해시 함수롤 통해 해시값으로 변환, 내부 데이터 구조에 저장
    • 데이터 조회
      • 인덱스를 사용하여 값을 직접 조회 불가
      • forEach() 메서드나 반복문을 사용하여 Set의 값을 순회하며 조회 가능
    • 데이터 삭제
      • delete(value) 메서드를 사용하여 특정 값을 삭제
      • 값을 비교하여 해당 값이 존재 할 경우 삭제
      • 내부 데이터 구조에서 해당 값을 검색하여 제거
  • 예시
// Set 생성
let set = new Set();

// 데이터 추가
set.add("사과");
set.add("바나나");
set.add("딸기");
set.add("사과"); // 중복된 값은 추가되지 않음

// 데이터 조회
console.log(set.has("사과")); // 출력: true
console.log(set.has("수박")); // 출력: false

// 데이터 삭제
set.delete("바나나");

// 데이터 순회
set.forEach((value) => {
  console.log(value);
});