사소한 개발지식/JavaScript

JAVASCRIPT - Map / Set 객체

KimBY 2023. 2. 10. 19:49
728x90
반응형

JAVASCRIPT

Map 객체

기존 객체와는 다르게 메소드만을 이용하여 값을 넣고 뺄 수 있다. 객체(Object)와 다르게 문자열이 아닌 값도 키로 사용 가능하며 추가된 순서대로 반복이 가능하다.

const testMap = new Map([
  [1, '숫자'],
  ['1', '문자'],
  [true, 'boolean']
])

console.log(testMap.get(1))		// '숫자'
console.log(testMap.get('1'))	// '문자'
console.log(testMap.get(true))	// 'boolean'

for (const [key, value] of testMap) {
	console.log(key + " : " + value)
}

// 1 : 숫자 
// 1 : 문자
// true : boolean

 

🔎set(), get(), has(), delete(), clear(), size 메소드

const map = new Map()

map.set(1, '1')
map.set(2, '2')

console.log(map.get(1))		// 1
console.log(map.get(2))		// 2

console.log(map.has(1))		// true
console.log(map.has('1'))	// false

map.delete(2)
console.log(map.has(2))		// false

map.clear()

console.log(map.size)		// 0

 

🔎keys(), values(), entries() 메소드

const map = new Map([
	[1, 4],
	[2, 5],
	[3, 6]
])

for (let key of map.keys()) {
	console.log(key)	// 1 2 3
}

for (let value of map.values()) {
	console.log(value)	// 4 5 6
}

for (let entry of map.entries()) {
	console.log(entry)	// [1, 4] [2, 5] [3, 6]
}

.

Set 객체

중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션으로 Set에는 키가 없는 값이 저장된다.

const testSet = new Set(['a', 'a', 'b', 'c', 'b', 'd'])

console.log(testSet) 	// 'a', 'b', 'c', 'd'

 

🔎add(), delete(), has(), clear(), size 메소드

const set = new Set()

set.add(1)
set.add(2)

console.log(set)			// 1, 2

console.log(set.has(1))		// true
console.log(set.has('1'))	// false

set.delete(2)
console.log(set.has(2))		// false

set.clear()

console.log(set.size)		// 0

 

🔎keys(), values(), entries() 메소드

const set = new Set(['a', 'a', 'b', 'c', 'b', 'd'])

for (let key of set.keys()) {
	console.log(key)	// 'a', 'b', 'c', 'd'
}

for (let value of set.values()) {
	console.log(value)	// 'a', 'b', 'c', 'd'
}

for (let entry of set.entries()) {
	console.log(entry)	// ['a', 'a'] ['a', 'a'] ['a', 'a']
}

keys() 와 values()가 같은 값을 리턴해주는 것과 entries()가 [value, value] 형태로 값을 리턴해주는 것을 볼 수 있는데 이는 Map과의 호환성을 위해 사용된다.

728x90
반응형