자바스크립트/모던 자바스크립트 Deep Dive

Set과 Map

막이86 2023. 11. 17. 13:35

728x90

모던 자바스크립트 Deep Dive을 요약한 내용입니다.

37.1 Set

Set 객체는 중복되지 않는 유일한 값들의 집합이다.
배열과 유사하지만 다음과 같은 차이가 있다.구분 배열 Set

동일한 값을 중복하여 포함할 수 있다. O X

요소 순서에 의미가 있다. O X

인덱스로 요소에 접근할 수 있다. O X
Set 객체의 특성은 수학적 집합의 특성과 일치한다.
Set객체는 수학적 집합을 구현하기 위한 자료구조이다.
- 교집합, 합집합, 차집합, 여집합 등

37.1.1 Set 객체의 생성

Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다.

중복된 값은 Set 객체에 요소로 저장되지 않는다.

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

const set2 = new Set('hello')
console.log(set2) // Set(4) {'h', 'e', 'l', 'o'}

중복을 허용하지 않는 Set 객체의 특성을 활용하여 배열에서 중복된 요소를 제거할 수 있다.

const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i)
console.log(uniq([2, 1, 2, 3, 4, 3, 4])) // (4) [2, 1, 3, 4]

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

37.1.2 요소 개수 확인

Set 객체의 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용한다.
const { size } = new Set([1, 2, 3, 3]) console.log(size) // 3

37.1.3 요소 추가

Set 객체의 요소를 추가 할때는 Set.prototype.add 메서드를 사용한다.

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

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

// 연속 적으로 호출
set.add(1).add(2)
console.log(set)  // Set(2) {1, 2}

// 중복된 요소는 무시되고 오류는 발생하지 않는다.
set.add(1).add(2).add(2)
console.log(set)  // Set(2) {1, 2}

비교 연산자 ===를 사용하면 NaN과 NaN을 다르다고 평가하지만 Set 객체는 NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다.

const set = new Set()

console.log(NaN === NaN) // false
console.log(0 === -0)    // true

set.add(NaN).add(NaN)
console.log(set)          // Set(1) {NaN}

set.add(0).add(-0)
console.log(set)           // Set(2) {NaN, 0}

Set 객체는 객체나 배열과 같이 자바스크립트의 모든 값을 요소로 저장할 수 있다.

const set = new Set()
set.add(1)
	.add('a')
	.add(true)
	.add(undefined)
	.add(null)
	.add({})
	.add([])
	.add(() => {})

console.log(set) // Set(8) {1, 'a', true, undefined, null, …}

37.1.4 요소 존재 여부 확인

Set 객체에 특정 요소가 존재하는지 확인하려면 Set.prototype.has 메서드를 사용한다.

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

console.log(set.has(2)) // true
console.log(set.has(4)) // false

37.1.5 요소 삭제

Set 객체에 특정 요소를 삭제하려면 Set.prototype.delete 메서드를 사용한다.

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

console.log(set.delete(2)) // true
console.log(set)           // Set(2) {1, 3}

console.log(set.delete(1)) // true
console.log(set)           // Set(1) {3}

console.log(set.delete(0)) // false
console.log(set)           // Set(1) {3}

37.1.6 요소 일괄 삭제

Set 객체에 모든 요소를 일괄 삭제하려면 Set.prototype.clear 메서드를 사용한다.

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

set.clear()
console.log(set) // Set(0) {size: 0}

37.1.7 요소 순회

Set 객체의 요소를 순회하려면 Set.prototype.forEach 메서드를 사용한다.
- 콜백 함수는 다음과 같이 3개의 인수를 전달받는다.
  - 첫 번째 인수: 현재 순회 중인 요소값
  - 두 번째 인수: 현재 순회 중인 요소값
  - 세 번째 인수: 현재 순회 중인 Set 객체 자체
- 첫 번째 인수와 두 번째 인수는 같은 값이다.
  - Array.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 2 Set(3) {1, 2, 3}
// 2 3 3 Set(3) {1, 2, 3}
```

Set 객체는 이터러블이다.

for … of 문으로 순회 가능
스프레드 문법과 배열 디스트럭처링 가능

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

console.log(Symbol.iterator in set) // true

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

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

const [a, ...rest] = set
console.log(a, rest)  // 1 [2, 3]

37.1.8 집합 연산

교집합

집합 A와 집합 B의 공통 요소로 구성된다.

Set.prototype.intersection = function(set) {
	const result = new Set()
	
	for (const value of set) {
		if (this.has(value)) {
			result.add(value)
		}
	}

	return result
}

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.intersection(setB)) // Set(2) {2, 4}
console.log(setB.intersection(setA)) // Set(2) {2, 4}

다음과 같은 방법으로도 가능하다.

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

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.intersection(setB)) // Set(2) {2, 4}
console.log(setB.intersection(setA)) // Set(2) {2, 4}

합집합

집합 A와 집합 B의 중복 없는 모든 요소로 구성된다.

Set.prototype.union = function(set) {
	const result = new Set(this)
	for (const value of set) {
		result.add(value)
	}

	return result
}

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.union(setB)) // Set(4) {1, 2, 3, 4}
console.log(setB.union(setA)) // Set(4) {2, 4, 1, 3}

다음과 같은 방법으로도 가능하다.

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

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.union(setB)) // Set(4) {1, 2, 3, 4}
console.log(setB.union(setA)) // Set(4) {2, 4, 1, 3}

차집합

집합 A에는 존재하지만 집합 B에는 존재하지 않는 요소로 구성된다.

Set.prototype.difference = function(set) {
	const result = new Set(this)
	for (const value of set) {
		result.delete(value)
	}

	return result
}

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.difference(setB)) // Set(2) {1, 3}
console.log(setB.difference(setA)) // Set(0) {size: 0}

다음과 같은 방법으로도 가능하다.

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

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.difference(setB)) // Set(2) {1, 3}
console.log(setB.difference(setA)) // Set(0) {size: 0}

부분 집합과 상위 집합

집합 A가 집합 B에 포함된 경우 집합 A는 집합 B의 부분 집합이며, 집합 B는 집합 A의 상위 집합이다.

Set.prototype.isSuperset = function(subset) {
	for (const value of subset) {
		if (!this.has(value)) {
			return false
		}
	}
	return true
}

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.isSuperset(setB)) // true
console.log(setB.isSuperset(setA)) // false

다음과 같은 방법으로도 가능하다.

Set.prototype.isSuperset = function(subset) {
	const supersetArr = [...this]
	return [...subset].every(v => supersetArr.includes(v))
}

const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 4])

console.log(setA.isSuperset(setB)) // true
console.log(setB.isSuperset(setA)) // false

37.2 Map

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다.
Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다.구분 객체 Map 객체

키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값

이터러블 X O

요소 개수 확인 Object.keys(obj).length map.size

37.2.1 Map 객체의 생성

Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다.
인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.

const map = new Map([['key1', 'value1'], ['key2', 'value2']])
console.log(map)             // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

const map2 = new Map([1, 2]) // Uncaught TypeError: Iterator value 1 is not an entry object

중복된 키는 Map 객체에 요소로 저장되지 않는다.

const map = new Map([['key1', 'value1'], ['key1', 'value2']])
console.log(map)             // Map(1) {'key1' => 'value2'}

37.2.2 요소 개수 확인

Map 객체의 요소 개수를 확인할 때는 Map.prototype.size 프로퍼티를 사용한다.

const { size } = new Map([['key1', 'value1'], ['key2', 'value2']])
console.log(size)    // 2

37.2.3 요소 추가

Map 객체에 요소를 추가할 때는 Map.prototype.set 메서드를 사용한다.

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

map.set('key1', 'value1')
console.log(map)           // Map(1) {'key1' => 'value1'}

// 연속으로 호출 할 수 있다. 
map.set('key1', 'value1')
	.set('key2', 'value2')
console.log(map)           // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

// 중복된 키는 허용되지 않는다. 
map.set('key1', 'value1')
	.set('key1', 'value2')
console.log(map)           // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

NaN객체는 NaN과 NaN을 같다고 평가하여 중복 추가를 허용하지 않는다.

const map = new Map()

console.log(NaN === NaN)                   // false
console.log(0 === -0)                      // true

map.set(NaN, 'value1').set(NaN, 'value2')
console.log(map)                           // Map(1) {NaN => 'value2'}

map.set(0, 'value1').set(-0, 'value2')
console.log(map)                           // Map(2) {NaN => 'value2', 0 => 'value2'}

Map 객체는 키 타입에 제한이 없다.

const map = new Map()

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

map.set(lee, 'developer')
	.set(kim, 'designer')

console.log(map) // Map(2) {{…} => 'developer', {…} => 'designer'}

37.2.4 요소 취득

Map 객체에서 특정 요소를 취득하려면 Map.prototype.get 메서드를 사용한다.

키를 갖는 요소가 존재하지 않으면 undefined를 반환한다.

const map = new Map()

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

map.set(lee, 'developer')
	.set(kim, 'designer')

console.log(map.get(lee))   // developer
console.log(map.get('key')) // undefined

37.2.5 요소 존재 여부 확인

Map 객체에서 특정 요소가 존재하는지 확인하려면 Map.prototype.has 메서드를 사용한다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])
console.log(map.has(lee))     // true
console.log(map.has('key'))   // false

37.2.6 요소 삭제

Map 객체의 요소를 삭제하려면 Map.prototype.delete 메서드를 사용한다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])

console.log(map.delete(kim))      // true
console.log(map)                  // Map(1) {{…} => 'developer'}

// 존재하지 않는 키로 Map 객체의 요소를 삭제하려 하면 에러 없이 무시된다. 
console.log(map.delete('key2'))   // false

// 연속적으로 사용할 수 없다. 
map.delete(lee).delete(kim)       // Uncaught TypeError: map.delete(...).delete is not a function

37.2.7 요소 일괄 삭제

Map 객체의 요소를 일괄 삭제하려면 Map.prototype.clear 메서드를 사용한다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])
map.clear()
console.log(map)     // Map(0) {size: 0}

37.2.8 요소 순회

Map 객체의 요소를 순회하려면 Map.prototype.forEach 메서드를 사용한다.
- Array.prototype.forEach 메서드와 유사하게 콜백 함수와 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체를 인수로 전달한다.
  - 첫 번째 인수: 현재 순회 중인 요소값
  - 두 번째 인수: 현재 순회 중인 요소키
  - 세 번째 인수: 현재 순회 중인 Map 객체 자체
```
const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])
map.forEach((v, k, map) => console.log(v, k, map))

// developer {name: 'Lee'} Map(2) {{…} => 'developer', {…} => 'designer'}
// designer {name: 'Kim'} Map(2) {{…} => 'developer', {…} => 'designer'}
```

Map 객체는 이터러블이다.

for … of 문으로 순회할 수 있다
스프레드 문법과 배열 디스트럭처링 할당의 대상이다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])

console.log(Symbol.iterator in map) // true

for (const entry of map) {
	console.log(entry)
}

console.log([...map])         // (2) [Array(2), Array(2)]

const [a, b] = map
console.log(a, b)             // (2) [{…}, 'developer']0: {name: 'Lee'}1: "developer"length: 2[[Prototype]]: Array(0) (2) [{…}, 'designer']

Map 객체는 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드를 제공한다.Map 메서드 설명

Map.prototype.keys	Map 객체에서 요소키를 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다.
Map.prototype.values	Map 객체에서 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다.
Map.prototype.entries	Map 객체에서 요소키와 요소값을 값으로 갖는 이터러블이면서 동시에 이터레이터인 객체를 반환한다.

const lee = { name: 'Lee' }
const kim = { name: 'Kim' }

const map = new Map([[lee, 'developer'], [kim, 'designer']])

for (const key of map.keys()) {
	console.log(key)    // {name: 'Lee'}, {name: 'Kim'}
}

for (const value of map.values()) {
	console.log(value)  // developer, designer
}

for (const entry of map.entries()) {
	console.log(entry)  // (2) [{…}, 'developer'], (2) [{…}, 'designer']
}

728x90

저작자표시 비영리 변경금지

'자바스크립트 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

이벤트 (2)	2023.11.20
브라우저의 렌더링 과정 (1)	2023.11.17
디스트럭처링 할당 (0)	2023.11.17
스프레드 문법 (0)	2023.11.17
이터러블 (1)	2023.11.17

현재글Set과 Map

250x250

개발 스터디

엘라스틱서치, 검색엔진, 엘라스틱서치 실무 가이드, 검색엔진 스터디,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

개발 스터디

Set과 Map

모던 자바스크립트 Deep Dive을 요약한 내용입니다.

37.1 Set

37.1.1 Set 객체의 생성

37.1.2 요소 개수 확인

37.1.3 요소 추가

37.1.4 요소 존재 여부 확인

37.1.5 요소 삭제

37.1.6 요소 일괄 삭제

37.1.7 요소 순회

37.1.8 집합 연산

교집합

합집합

차집합

부분 집합과 상위 집합

37.2 Map

37.2.1 Map 객체의 생성

37.2.2 요소 개수 확인

37.2.3 요소 추가

37.2.4 요소 취득

37.2.5 요소 존재 여부 확인

37.2.6 요소 삭제

37.2.7 요소 일괄 삭제

37.2.8 요소 순회

'자바스크립트 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

'자바스크립트/모던 자바스크립트 Deep Dive'의 다른글

티스토리툴바

동일한 값을 중복하여 포함할 수 있다.	O	X
요소 순서에 의미가 있다.	O	X
인덱스로 요소에 접근할 수 있다.	O	X

키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

Set과 Map

모던 자바스크립트 Deep Dive을 요약한 내용입니다.

37.1 Set

37.1.1 Set 객체의 생성

37.1.2 요소 개수 확인

37.1.3 요소 추가

37.1.4 요소 존재 여부 확인

37.1.5 요소 삭제

37.1.6 요소 일괄 삭제

37.1.7 요소 순회

37.1.8 집합 연산

교집합

합집합

차집합

부분 집합과 상위 집합

37.2 Map

37.2.1 Map 객체의 생성

37.2.2 요소 개수 확인

37.2.3 요소 추가

37.2.4 요소 취득

37.2.5 요소 존재 여부 확인

37.2.6 요소 삭제

37.2.7 요소 일괄 삭제

37.2.8 요소 순회

'자바스크립트 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

'자바스크립트/모던 자바스크립트 Deep Dive'의 다른글

관련글

티스토리툴바