[JavaScript] Map, Set 살펴보기
JavaScript

[JavaScript] Map, Set 살펴보기

반응형

Map and Set

Map

Object(객체)와 비슷한 모양새, 차이점이 있다면 Object(객체)의 경우 key 값이 문자열만 가능하지만 Map의 경우 대부분의 데이터 타입이 가능하다.

  • key를 이용하여 set, get 할 수 있음
  • key들은 중복될 수 없음
  • key로 사용가능한 데이터타입: string, symbol(ES6), function, object, number
  • key - value 페어로 이루어진 컬렉션이다.
const counts = new Map();

// string type
counts.set('apple', 1);
counts.set('banana', 3);

// number type도 가능
counts.set(1, 1)
// boolean type도 가능
counts.set(false, 'asdf')

// has => key값을 통해 존재유무를 확인
console.log(counts.has('apple'))

// size 요소의 개수를 조회
console.log(counts.size)

// delete => 해당 key 값을 가진 요소를 제거
counts.delete('apple')
console.log(counts)

// clear 모든 요소를 제거
counts.clear()
console.log(counts) // Map(3) { 'banana' => 3, 1 => 1, false => 'asdf' }

Set

중복을 허용하지않는 특별한 컬렉션, 자료구조이다. Map 처럼 key 값이 존재하는 것이 아닌 배열과 비슷한 형태 로 저장이 된다.

중복을 제거하고 싶을 경우 Set을 많이 사용

const newSet = new Set();

let ahn = { name : 'Ahn' };
let kim = { name : 'Kim' };
let park = { name : 'Park' };

// ahn 3번 추가
newSet.add(ahn);
newSet.add(ahn);
newSet.add(ahn);

// kim 2번 추가
newSet.add(kim);
newSet.add(kim);

// park 1번 추가
newSet.add(park);

console.log(newSet) // { { name: 'Ahn' }, { name: 'Kim' }, { name: 'Park' } }
console.log(newSet.size) // 3

for (let person of newSet) {
  console.log(person.name) // Ahn Kim Park
}

중복을 제외하고 계산이 필요한 경우에는 배열에 모든 요소들을 추가한 다음에 추가적인 로직을 진행하여도 가능하지만 Set을 통해 중복이 없는 상태로 진행하는것이 훨씬 효율적이다.

반응형