[JavaScript] Map / Set

Map

주요 메소드 및 프로퍼티

• new Map() : 맵 생성
• map.set(key, value) : key와 함께 value 등록
• map.get(key) : key에 해당하는 value를 반환. ( key가 존재하지 않으면 undefined 반환 )
• map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환
• map.delete(key) : key와 함께 value 삭제
• map.clear() : 맵의 모든 요소 삭제
• map.size : 요소들의 개수 반환

 

맵 생성 - new Map()

const map = new Map()

맵을 사용하기위해 맵 객체를 생성합니다.

 

삽입 - map.set(key, value)

map.set(1, 'number 1')
map.set('1', 'string 1')

map.set(true, 'this is true.')

const people = {name: '승민'}
map.set(people, '777')

맵은 키로 객체도 넣을 수 있으며 키에 자료형 제약이 없다.

맵은 객체와 달리 키를 문자형으로 변환하지 않기에 숫자(number) 1과 문자(string) 1 각각 키를 가질 수 있다.

 

조회 - map.get(key)

console.log(map.get(1))
console.log(map.get('1'))
console.log(true)
console.log(people)

 

요소의 개수 - map.size

console.log(map.size)

메소드가 아닌 프로퍼티입니다.

 

맵에 반복문 사용

• map.keys() : 요소의 키들을 모은 iterable 객체를 반환
• map.values() : 요소의 값들을 모은 iterable 반환
• map.entries() : 요소의 [키, 값] 을 쌍으로 하는 iterable 반환

for(let key of map.keys()) {
    console.log(key) // 1, '1', true, { name: '승민' }
}

for(let value of map.values()) {
    console.log(value) // number 1, string 1, this is true., 777
}

for(let keyValue of map) { //map.entries()와 동일
    console.log(keyValue)
}

map.entries() 결과

 

 

반복문에 바로 넣어 사용도 가능하다.

for(const [k, v] of map) {
    console.log(k, v)
}

 

forEach문도 사용 가능하다.

map.forEach((v, k) => {
    console.log(k, v) // 결과는 동일함
})

 

*맵은 값이 삽입된 순서를 기억하기에 순서대로 결과가 출력된다.

 

 

Set

맵과 유사하지만 Set은 중복을 허용하지 않는 값을 모아놓는다. Set에는 키가 없이 값만 저장한다.

 

주요 메소드

• new Set(iterable) : set 생성. iterable 객체를 받으면(배열) 그 안의 값을 복사하여 set에 넣어줌.
• set.add(value) : 값을 추가한다. (자신을 반환함)
• set.delete(value) : 값을 제거한다. 제거에 성공하면 true, 아니면 false 반환
• set.has(value) : Set에 값이 존재하면 true를 반환
• set.clear() : Set을 초기화
• set.size : Set에 몇 개가 들었는지 개수를 반환 

const set = new Set()

set.add(false)
set.add(1)
set.add('1')

set.add(1) // 중복은 무시
set.add('1') // 중복 무시

 

Set에 반복문 사용

for(const value of set) {
    console.log(value) // false, 1, '1'
}

set.forEach((value) => {
    console.log(value) // 결과 동일
})

 

배열로 Set 생성

배열의 iterable을 넘겨준다.

기존 배열에서 중복 제거하여 Set 생성할 수 있다.

const arr = [1, 1, 2, 2, 3, 4]
const set = new Set(arr)

for(const value of set) {
    console.log(value) // 1, 2, 3, 4
}

 

Set을 배열로 변환

=> Array.from()

const arr = [1, 1, 2, 2, 3, 4]
const set = new Set(arr)

const result = Array.from(set)
console.log(result) // [ 1, 2, 3, 4 ]