[JS] Set과 Map

Ch.37 Set과 Map

 

📌Set

= 중복되지 않는 유일한 값들의 집합

• 중복이 안됨
• 순서에 의미가 없음
• 인덱스로 요소 접근 불가능

 

Set 객체 생성 = Set 생성자 사용

// 빈객체 
const set = new Set()
console.log(set)   // Set(0) {size: 0}

// 이터러블을 인수로 받음
const set1 = new Set([1, 2, 3, 4])
console.log(set1)  // Set(3) {1, 2, 3}
const set2 = new Set('hello')
console.log(set2)  // Set(4) {'h', 'e', 'l', 'o'} 중복된 l은 한개만 들어감

 

중복된 요소가 인수로 들어가면 한개만 들어감 -> 이를 이용해서 배열에서 중복된 요소를 제거할 수 있다.

const uniq = array => [... new Set(array)]
console.log(uniq([1, 2, 2, 2, 3, 3, 4, 5]))   // [1, 2, 3, 4, 5]

 

 

Set.prototype.size = 객체의 요소 개수 확인

const {size} = new Set([1, 2, 3, 3])  // set만들고 set.size로 해도 같은 값
console.log(size)  // 3

 

Set.prototype.add = 요소 추가

const set = new Set()
set.add(1)
console.log(set)   // Set(1) {1}

// 연속으로 사용가능 -> add가 객체를 반환하기 때문에
set.add(2).add(3)
console.log(set)  // Set(3) {1, 2, 3}

// 중복된 요소는 무시됨
set.add(1)
console.log(set)  // Set(3) {1, 2, 3}


// NaN의 경우..
console.log(NaN === NaN)  // false지만, set에서는 같다고 평가됨
set.add(NaN).add(NaN)  // 한개만 들어감

 

Set.prototype.has = 요소 존재 여부 확인

const set = new Set([1, 2, 3])
console.log(set.has(1))  // true
console.log(set.has(5))  // false

 

Set.prototype.delete = 요소 삭제

삭제 성공 여부를 반환함

const set = new Set([1, 2, 3])
console.log(set.delete(1))  // true
console.log(set)   // Set(2) {2, 3}

set.delete(5)  // 무시됨
set.delete(3).delete(2) // 연속으로 사용 불가능

 

 

Set.prototype.clear = 모든 요소 삭제

undefined 반환

const set = new Set([1, 2, 3])
console.log(set.clear())   // undefined
console.log(set)    // Set(0) {size: 0}

 

Set.prototype.forEach = 요소 순회

콜백함수의 인수

• 첫번째 인수: 현재 순회 중인 요소값
• 두번째 인수: 현재 순회 중인 요소값
• 세번째 인수: 현재 순회 중인 Set 객체 자체

const set = new Set([1, 2, 3])
set.forEach((v, v2, set) => console.log(v, v2, set))
// 1 1 Set(3) {1, 2, 3}
// 2 2 Set(3) {1, 2, 3}
// 3 3 Set(3) {1, 2, 3}

 

첫번째랑 두번째가 똑같은데 왜 굳이 이렇게 받을까

-> Array.prototype.forEach를 따라가기 위해서. 

array의 경우도 똑같이 세개를 받는데, 두번째 인수가 순회중인 요소의 인덱스임. 근데 set는 인덱스가 없으니까 그냥 첫번째 인수랑 같은 걸로...

 

Set 객체는 이터러블이다.

그래서 for ... of도 사용가능하고, 스프레드 문법과 배열 디스트럭처링도 가능

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

for (const v of set) {
	console.log(v) // 1 2 3
}

console.log([...set]) // [1, 2, 3]

 

Set를 활용해서 집합 연산을 만들어보자

(1) 교집합

Set.prototype.intersection = function(set) {
    return new Set([...this].filter(v => set.has(v)))
}

 

(2) 합집합

Set.prototype.union = function (set) { 
	return new Set([...this, ...set])
}

 

(3) 차집합

Set.prototype.difference = function (set) {
	return new Set([...this].filter(v => !set.has(v))
}

 

 

---

📌Map

= 키와 값의 쌍으로 이루어진 컬렉션

Map객체와 객체(object)와의 차이점

 

Map 객체 생성 = Map생성자 사용

이터러블을 인수로 전달받으며, 키와 값의 쌍으로 이루어진 요소로 구성되어야 함

// 비었을 때
const map = new Map()
console.log(map)   // Map(0) {size: 0}

// 이터러블을 인수로
const map1 = new Map([['key1', 'value1'], ['key2', 'value2']])
console.log(map1)   // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

const map2 = new Map([1, 2])  // TypeError: Iterator value 1 is not an entry object
// 무조건 [['key1', 'value1'], ['key2', 'value2']] 이런 형식으로 들어와야하는데,
// 여기선 [1, 2]로 들어옴. 그래서 1을 ['key1', 'value1']의 형식으로 해석하려다가 실패

// key가 중복되면 뒤에 들어오는 value로 덮어씌워짐
const map3 = new Map([['key1', 'value1'], ['key1', 'value2']])
console.log(map3)  // Map(1) {'key1' => 'value2'}

 

 

Map.prototype.size = 갯수 확인

Map.prototype.set = 요소 추가

const map = new Map()
map.set('key1', 'value1').set('key2', 'value2')  // 연속 호출 가능
console.log(map)   // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

// 객체를 key로 쓰는것도 가능
const user1 = { name: '철수' }
const user2 = { name: '영희' }

const userScores = new Map()
userScores.set(user1, 90)
userScores.set(user2, 85)

console.log(userScores)   // Map(2) {{name: '철수'} => 90, {name: '영희'} => 85}

 

Map.prototype.get = 요소 가져오기

const map = new Map()
map.set('key1', 'value1').set('key2', 'value2')
console.log(map.get('key1'))  // value1
console.log(map.get('key6'))  // 없으면 undefined

 

Map.prototype.has = 존재 여부 확인

Map.prototype.delete = 요소 삭제

const map = new Map()
map.set('key1', 'value1').set('key2', 'value2')
console.log(map.delete('key1'))  // true
console.log(map)  // Map(1) {'key2' => 'value2'}

console.log(map.get('key6'))  // 없으면 undefined(무시됨)
console.log(map)  // Map(1) {'key2' => 'value2'}

 

Map.prototype.clear = 일괄 삭제

 

Map.prototype.forEach = 요소 순회

콜백함수의 인수

• 첫번째 인수: 현재 순회 중인 요소값
• 두번째 인수: 현재 순회 중인 요소키
• 세번째 인수: 현재 순회 중인 Map 객체 자체

const fruits = new Map([
    ['사과', 500],
    ['바나나', 700],
    ['오렌지', 600]
])

fruits.forEach((value, key, map) => {
    console.log(`value: ${value}`)
    console.log(`key: ${key}`)
    console.log(`전체 Map:`, map)
    console.log('---------------')
})

// 출력 결과:
// value: 500
// key: 사과
// 전체 Map: Map(3) { '사과' => 500, '바나나' => 700, '오렌지' => 600 }
// ---------------
// value: 700
// key: 바나나
// 전체 Map: Map(3) { '사과' => 500, '바나나' => 700, '오렌지' => 600 }
// ---------------
// value: 600
// key: 오렌지
// 전체 Map: Map(3) { '사과' => 500, '바나나' => 700, '오렌지' => 600 }
// ---------------


// 스프레드 문법
console.log([...fruits])  // [['사과', 500], ['바나나', 700], ['오렌지', 600]]

 

keys, values, entries 메서드

-> 각자 Map 객체의 요소키, 요소값, 요소키 + 요소값을 이터러블이면서 이터레이터인 객체로 반환

const fruits = new Map([
   ['사과', 500],
   ['바나나', 700],
   ['오렌지', 600]
])

console.log(fruits.keys())  // [Map Iterator] { '사과', '바나나', '오렌지' }
console.log(fruits.values())  // [Map Iterator] { 500, 700, 600 }
console.log(fruits.entries())  // [Map Entries] { [ '사과', 500 ], [ '바나나', 700 ], [ '오렌지', 600 ] }