자바스크립트 맵(Map)과 셋(Set)

HyosikPark·2020년 10월 16일
0

Javascript

목록 보기
7/26

iterable

이터러블 자료구조의 특징은 for of문을 쓸 수 있고 Array.from메서드를 통해 배열로 변화가 가능하다는 점이다. 일반객체도 Symbol.iterator 매서드를 적용하여 이터러블 객체로 만들 수 있는데 방법이 생각보다 복잡하다.

유사배열

index, length 프로퍼티가 있어서 배열처럼 보이는 객체이며 Array.from 매서드를 통해 배열로 변화가 가능하다.

let obj = {
  0: 'one',
  1: 'two',
  length: 2
}

let arr = Array.from(obj) // ['one', 'two']
기존객체에는 변화 없다.

Array from

이터러블이나 유사배열을 실제배열로 만들어준다. 원본에는 변화가 없다

Array.from(obj, mapFn, thisArg) : 2번째 인자는 obj를 배열로 만들면서
map함수를 적용하는것이다.

맵(Map)

키 값 쌍으로 데이터를 저장한다. 객체와 유사하지만 키 값에 넣을 수 있는 자료형에 제약이 없다는 점이다. 이터러블 객체이기 때문에 반복문을 사용할 수 있고, key나 value만 따로 이터러블 객체로 반환하기 쉬워 배열로의 변환이 유연하다.

let map = new Map([
  [key1, value1],
  [key2, value2],
  [key3, value3],

]) // Map {"key1" => "value1", "key2" => "value2", "key3" => "value3"}
참고로 키값은 중복되면 나중에 등록된 key value 쌍으로 대체된다.
위 처럼 직접 키 값 쌍을 추가할 수도 있지만 여러 매서드들이 존재한다.

map.set(key,value) : key, value 저장 map자신을 반환하기 때문에
체이닝이 가능하다. map.set().set().set()....

map.get(key) : key에 해당하는 value를 반환한다.
map.has(key) : map에 key가 존재하는지 검사한다. boolean
map.delete(key) : key value쌍 삭제. 삭제되면 true boolean
map.clear() : 모든 요소 삭제
map.size() : 모든 key value 쌍 개수 추출.

중요한 매서드
map.keys() : 각 요소의 키로만 구성된 이터러블 객체를 반환한다. 
map.values() : 각 요소의 value로만 구성된 이터러블 객체를 반환한다.
map.entries() : 각요소의 키, 값 쌍으로 구성된 이터러블 객체를 반환.
*entries()는 선언하나 안하나 같다.
*for of 반복문을 사용하여 각각의 값들을 얻어낼 수도 있고
*Array.from() 매서드로 원하는 값을 배열로 만들 수 있어 유용하다.
*배열에서도 쓸 수 있는 매서드이며 배열에서 key는 index, value는 요소이다.

map.forEach((value, key, map) => {}) 

Object.entries, fromEntries

const obj = {
  name: 'john',
  age: 24,
}

let arr = Object.entries(obj) 
arr = [
  ["name","john"],
  ["age",24],
]

Object.entries(obj) : 객체를 [,] 형태로 각 요소에 저장하는 배열을 만듦
`원본 객체에 변화 없음.`
Object.fromEntries(arr) => 다시 객체로 만듦 `원본 배열에 변화없음.`

맵으로 만들고 싶다면
const map = new Map(Object.entries(obj))로 만들 수 있고
맵을 다시 객체로 변환하는건
Object.fromEntries(map)

셋(set)

중복을 허용하지 않는 값을 모아놓은 컬렉션이다. 중복값을 저장하려고 하면 저장되지 않는다.

let set = new Set([value1, value2, ...]) 
set.add(value) : 수동으로 추가하는 방법
set.delete(value) : 값을 삭제하고, 삭제되면 true boolean
set.has(value) : 값 저장 유무 판단 boolean
set.clear() : 셋 요소 전부 삭제
set.size() : 셋에 저장된 전체 요소 개수
*for of 반복문 가능
set.forEach((value, valueAgain, set) => {}) : 2번째 인자 valueAgain은 
value와 같은 값으로 map과 통일하기 위해 만들어졌다. 즉 필요없다.

*set에서 값 하나를 가져오려면 어떻게 해야할까? 
  set에는 get 매서드가 없어서Array.from(set)으로 배열로 변환하여 준 뒤에
  값을 가져올 수 있다.

위크맵(WeakMap())

맵과의 차이점은 키가 반드시 객체여야 한다는 것, 키로 객체를 참조하였을 때
원본 객체가 삭제되면 위크맵에서도 key,value쌍이 같이 파기되어 메모리에서 영구
제거된다는 점이다. 무슨말이냐 하면

let obj = {name: 'john', age: 24}

const weakMap = new WeakMap()
weakMap.set(obj,'value')

obj = null;

// 이제 weakMap안에서도 obj 객체가 지워짐.

원본 객체에 도달 할 수 없기 때문에 가비지 컬렉션의 대상이 되어 메모리에서 영구히
지워진다. 하지만 map에서는 지워지지 않고 남아있어 메모리에 부담을 준다.

매서드
weakMap.get(key)
weakMap.set(key,value)
weakMap.delete(key)
weakMap.has(key)

위크셋(WeakSet())

셋과 비슷하지만 객체만 저장할 수 있고 역시 중복 객체는 허용되지 않는다.
마찬가지로 참조한 객체가 삭제되면 위크셋에서도 삭제가된다.

매서드
set.add(obj)
set.has(obj)
set.delete(obj)

참조

https://ko.javascript.info/

0개의 댓글