avatar
Published on

Javascript Set 그리고 Map

Author
  • avatar
    Name
    yceffort

근데 사실.. 컬렉션 필요없지 않을까

자바스크립트에서 일반적인 Object는 key-value쌍을 끊임 없이 추가할 수 있는 형태로 구성되어 있다. 그래서 사실 컬렉션이 필요하지 않은 것 처럼 보일 수도 있다. 그러나 이따금씩 object로 부족할 때가 있다.

  • key 충돌 위험이 존재하는 경우
  • 문자열/심볼 이외의 키 값이 필요한 경우
  • 객체에 얼마나 많은 속성이 있는지 알아낼 수 있는 효과적인 방법이 필요한 경우
  • 객체가 iterable하지 않음. 따라서 for..of 나 ...를 사용할 수 없음

es6에 추가된 컬렉션들은 따라서 멤버 데이터를 드러내기 위해 property를 사용하지 않는다. (obj.key, obj[key] 불가능.) 그리고 이들에는 자유롭게 메소드를 추가할 수 있다.

Set

Set은 value로 이루어진 컬렉션이다. 그리고 수정가능하다. 배열과 같을 것 같지만, 다르다.

let faces = new Set('😀 😁 😂 🤣 😃 😄 😅')
faces.size // 8
faces.add('😂')
  • 일단 (당연하게도) Set에는 같은 value가 중복으로 포함될 수 없다. 기존에 있는걸 추가해도 아무런 변화가 없다.
  • Set은 어떤데이터가 자신의 멤버인지 빠르게 확인하기 위한 목적으로 사용한다
  • 그러나 Set은 index로 값을 조회할 수는 없다.

set 으로 할 수 있는 것

  • new Set(): 비어있는 set 생성

  • set.size: set 데이터 개수 조회

  • set.has(value): value가 set에 존재하는지 조회

  • set.add(value)

  • set.delete(value)

  • sets[Symbol.iterator](): set 안의 값을 순회할 수 있는 새로운 이터레이러를 리턴한다. set을 iterable하게 만들어 준다.

    let faces = new Set('😀 😁 😂 🤣 😃 😄 😅')
iteratorFaces = faces[Symbol.iterator]()
for (let i of iteratorFaces) {
  console.log(i)
}
    • set.forEach(f)
    • set.clear
    • set.keys()
    • set.values()
    • set.entries()

Map

Map은 잘 알려진 것처럼, key-value pair로 이루어진 컬렉션이다.

Map으로 할 수 있는 것

  • new Map
  • new Map(pairs)
  • map.has(key)
  • map.size
  • mag.get(key)
  • map.set(key, value)
  • map.delete(key)
  • map.clear()
  • map[Symbol.iterator]() === map.entries()
  • map.forEach(f)
  • map.keys()
  • map.values()

javascript 가 다른점

아래의 코드를 보자.

let messi = new Set()

const 리오넬메시 = { name: '리오넬메시' }
const 라이오넬멧시 = { name: '리오넬메시' }
messi.add(리오넬메시)
messi.add(라이오넬멧시)

console.log(messi.size) //2 ????

리오넬메시와 라이오넬멧시는 내부의 값이 같아 보이기 때문에, set에 한개의 값만 추가 될 것 같지만 사실은 그렇지 않다. 자바스크립트에서는 두개의 값을 다르게 본다. 이유는 자바스크립트가 값을 비교할 때 두가지 다른 방법을 사용하기 때문이다.

  • string, number같은 primitive는 값을 비교한다
  • array, date, object 등은 reference를 비교한다. (메모리의 같은 위치를 참조하고 있는가?)
const 리오넬메시 = { name: '리오넬메시' }
const 라이오넬멧시 = { name: '리오넬메시' }
const 메석대 = 리오넬메시

메석대 === 리오넬메시 // true
메석대 == 라이오넬멧시 // false
리오넬메시 === 라이오넬멧시 //false

본질적으로 같은 메모리를 참조하는 값 끼리만 true를 반환하는 것을 볼 수 있다. (두 object를 비교하는 방법은 여기를 참조)

다시 Set으로 돌아와서, javascript는 저 두 값을 제대로 비교하지 못하기 때문에 set에 두개의 값이 들어가게 된다. 물론 해시코드를 사용하면 가능하지만, javascipt에는 그런거 없다

또 하나 다른 점이라고 한다면, map과 set에 추가한 순서가 곧 순회하는 순서와 같다는 것이다. 이 역시 다른 언어들과는 다른 점이다.

WeakMap, WeakSet

  • WeakMap은 new .has() .get() .set() .delete() 만 지원한다
  • WeakSet은 new .has() .add() .delete() 만 지원한다.
  • WeakSet과 WeakMap의 key는 반드시 object여야 한다.

그렇다. 열거형이 존재하지 않는다. 그 이유는 참조하고 있는 오브젝트가 사라지면 해당 key, value가 사라지는 WeakMap, WeakSet의 특징 때문이다.

let john = { name: 'John' }
// 객체에 접근 가능, 해당 객체는 메모리에서 참조되고 있음.
// 참조를 null로 overwrite
john = null
// 객체는 메모리에서 이제 삭제됨

let john = { name: 'John' }
let array = [john]
john = null // 참조를 null로 overwrite

// john은 객체안에 살아 있기 때문에 가비지 컬렉팅이 되지 않음.
// 그래서 array[0]으로 접근 가능
array[0]
// { name: "John" }

이는 기존 Map, Set에서도 동일하다.

let john = { name: 'John' }

let map = new Map()
map.set(john, '윅')

john = null // 참조를 null로 overwrite

// john은 맵안에서 살아있기 때문에
// map.keys() 로 접근 가능

그러나 WeakMap, WeakSet은 다르다

let john = { name: 'John' }

let weakMap = new WeakMap()
weakMap.set(john, '윅')

john = null // 참조를 null로 overwrite

// john은 메모리에서 사라짐 (가비지 콜렉팅 당함)

그럼 도대체 이것은 언제 쓸까? 객체가 사라지면 자동으로 가비지 콜렉팅 해준다는 특성을 활용해, 아래와 같은 것이 가능하다.

let john = { name: 'John' }
// map: 유저 => 방문횟수
let visitsCountMap = new Map()
visitsCountMap.set(john, 123)

// john이 사라짐
john = null

// 그러나 Map에서는 계속 남아 있으므로, 따로 처리를 해주어야 함.
// 또한 john은 map에서 key로 사용하고 있으므로 메모리에서도 존재함.
console.log(visitsCountMap.size) // 1

그러나 여기서 WeakMap을 사용하면, 자동으로 가비지 콜렉팅이 되므로 Map에 남아있는 key에 대해서 까지 신경쓰지 않아도 된다.

Issue on GitHub