20. 객체와 배열의 부족함을 채워주는 Map과 Set

안녕하세요. 좋아요요정입니다.

오늘은 ES6에 도입된  Map과 Set에 대해 알아보겠습니다.

 

 

---

컬렉션?

컬렉션이란 데이터들의 집합, 데이터를 모아놓은 자료구조의 개념입니다. 자바스크립트에서 컬렉션으로 잘 사용하는 데이터 타입은 객체입니다. 객체는 key와 value를 하나씩 쌍으로 가진 프로퍼티를 끊임없이 추가할 수 있는 컬렉션입니다.

Map과 Set은 ES6에서 도입된 새로운 컬렉션입니다. Map은 Map 객체로 키-값 쌍을 보유하는 형태의 자료구조이고, Set객체는 자료형에 관계 없이 원시 값과 객체 참조 모두의 유일한 값을 저장하는 형태의 자료구조입니다.

 

 

 

 

자바스크립트는 객체로 자료구조가 가능한데 왜 Map과 Set이라는 새로운 자료구조를 도입했을까요? 

도입한 이유는 일반 객체로는 해결할 수 없는 문제들이 있기 때문입니다.

1. 검색 케이블로 사용중인 객체에 메소드를 추가하는 경우, 이름 충돌의 위험을 감수해야 합니다.

2. 객체의 key값은 항상 문자열입니다. 특히, 속성의 key로 객체를 사용할 수 없습니다.

3. 객체에 얼마나 많은 속성들이 존재하는지 알아낼 수 있는 효율적인 방법이 없습니다.

4. 또한, 일반 객체는 이터러블 하지 않아 for of나 . . . 을 사용할 수 없습니다. (Object.keys()를 이용해 순회했음)

따라서 위와 같은 문제들을 해결하기 위해 Map과 Set이 도입되었습니다.

 

 

 

 

Map

Map 객체는 키-값 쌍을 보유하고 원래 삽입 순서를 기억합니다. 또한 문자열과 심볼만을 key로 가지는 객체와는 다르게 다양한 자료형을 key값으로 사용할 수 있다는 특징을 가지고 있습니다.

그리고 자료를 저장, 가져오는 방식이 다릅니다. 객체에서는 값에 접근할 때 object[key], object.key의 방법으로 접근해 생성, 수정, 가져올 수 있었습니다.  Map은 get(), set(), has(), delete(), 등의 메서드를 이용해 자료를 등록하고 삭제, 가져오기 등을 할 수 있습니다.

 

Map 객체 생성

const map = new Map()

Map 객체를 생성할 때에는 new키워드를 이용해 생성할 수 있습니다.

 

데이터 저장

map.set(key, value);
map.set('1', '문자열 1');
map.set(1, '숫자열 1');
map.set([1,2,3], '배열');

set메서드를 이용해 key, value를 저장해줄 수 있습니다. Map의 키는 함수, 객체, 배열 등 모든 기본 요소를 포함해 어떤 값이든 사용하실 수 있습니다. 객체와 마찬가지로 중복되는 키는 사용할 수 없습니다. 

기존에 등록되어있던 key값을 set할 경우 새로운 값으로 재할당됩니다.

 

 

데이터 가져오기(반환)

map.get(key)
map.get(1) //'숫자형 1'
map.get('1') //'문자열 1'
map.get([1,2,3]) //'배열'

get메서드를 이용해 value를 가져올 수 있습니다. key에 해당하는 값을 반환하며 존재하지 않으면 undefined를 반환합니다.

 

 

key존재유무 확인

map.has(key)
map.has(1) //true
map.has(2) //false

has메서드를 이용합니다. key가 존재하면 true, 존재하지 않으면 false를 반환합니다.

 

key-value 삭제

map.delete(key)
map.delete(1)

delete메서드를 이용해 key에 해당하는 값을 삭제합니다.

 

 

모든 key-value 제거

map.clear()

clear메서드를 이용해 맵 안의 모든 요소를 제거하여 빈 Map객체로 만듭니다.

 

 

map내부 개수 확인

map.size;

size메서드를 이용하면 map 내부의 key-value 쌍의 개수를 확인해 반환합니다. 

 

 

 

 

Map의 iterable

자바스크립트의 객체의 경우 반복 프로토콜을 구현하지 않으므로 for of 문을 사용하거나 Object.keys(객체명), Object.entries(객체명)를 사용하여 반복에 필요한 배열목록을 반환받아 사용할 수 있었습니다.

Map은 keys, values, entries-next 메서드를 가지고 있어서 map 암의 프로퍼티들을 순회할 수 있는 이터러블 객체를 반환받아 사용할 수 있습니다.

 

예제를 위해 하나의 Map 객체를 생성해보겠습니다.

const cats = new Map([[1, "cookie"],[2, "latte"]]);

 

 

key 나열

cats.keys()

 

value 나열

cats.values()

 

 

하나의 키-값 쌍을 반환하는 entries() 

const iterObj = cats.entries()
iterObj.next()
iterObj.next()
iterObj.next()

next로 다음 항목을 반환, 순회가 끝나면 done: frue값을 반환합니다.

 

 

---

 

 

Set 

두번째 새로운 자료구조 Set을 살펴보겠습니다.

Set은 값으로만 이루어진 형태의 컬렉션입니다. 배열과 같이 [ 값, 값, 값 ] 형태로 나열되어져 있습니다.

배열과 다른 점은 "같은 값을 한개 이상 포함할 수 없다."는 것입니다. 배열은 인덱스로 해당 위치에 값이 저장되어 중복되는 값도 입력이 가능합니다.

const arr = ['1','1','1']

Set에 동일한 배열을 입력하면 어떻게 될까요?

const mySet = new Set(['1','1','1']);

 

Set의 이러한 특징으로 중복되는 사항들을 제거하기 위해 많이 사용합니다.

Set은 Map과 마찬가지로 메서드를 사용해 자료를 저장하고 순회하고 삭제할 수 있습니다.

 

 

Set 객체 생성

const mySet = new Set();

 

데이터 저장

mySet.add(1);
mySet.add({"22":"hi"})

 

총 수량 확인

mySet.size;

 

데이터 삭제

mySet.delete(1)

 

데이터 유무 확인

mySet.has(1)

 

전체 지우기

mySet.clear()

---

 

자바스크립트 파트는 지났지만, 지금 안 남겨두면 까먹을까봐 하나씩 정리할 예정! 

Map과 Set 제 눈에는 왜이렇게 멋있을까요? 

배열과 객체를 늘 쓰던대로 쓰다가 보니 더 간결하고 멋져보이고 활용하고 싶다는 생각이 드네요 ㅎㅎ (새로워요)

1,2월 스터디를 진행하며 시간이 더딘듯 빠릅니다 :) 스터디는 꾸준히 순항중~~!! 스터디원분들 훈님 감사합니다!! 

오늘도 행복한 코딩라이프되세요~~! 

 

JavaScript 스터디 팀 러버덕과 함께 합니다.