사소한 개발지식/JavaScript

JAVASCRIPT - Map / Set 객체

2023. 2. 10. 19:49
목차
  1. Map 객체
  2. 🔎set(), get(), has(), delete(), clear(), size 메소드
  3. 🔎keys(), values(), entries() 메소드
  4. Set 객체
  5. 🔎add(), delete(), has(), clear(), size 메소드
  6. 🔎keys(), values(), entries() 메소드
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
반응형
저작자표시 (새창열림)
  1. Map 객체
  2. 🔎set(), get(), has(), delete(), clear(), size 메소드
  3. 🔎keys(), values(), entries() 메소드
  4. Set 객체
  5. 🔎add(), delete(), has(), clear(), size 메소드
  6. 🔎keys(), values(), entries() 메소드
'사소한 개발지식/JavaScript' 카테고리의 다른 글
  • JAVASCRIPT - 이벤트 루프 (Event Loop)
  • JAVASCRIPT - this 바인딩
  • JAVASCRIPT - 얕은복사 / 깊은복사
  • JAVASCRIPT - 배열 관련 메소드(Array Method)
KimBY
KimBY
웹개발과 관련된 개발지식 모음
KimBY
B.Y Kim의 개발노트
KimBY
전체
오늘
어제
  • 분류 전체보기 (99)
    • 사소한 개발지식 (49)
      • PHP (2)
      • JavaScript (15)
      • NodeJS (0)
      • JAVA (2)
      • 잡?지식 (4)
      • 로드맵(FE) (22)
      • React (4)
    • 개발노트 (6)
      • 포트폴리오사이트 (6)
    • 프로그래머스 (33)
      • Level1(JS) (0)
      • Level2(JS) (33)
    • 백준알고리즘 (11)
      • 단계별로 풀어보기3(for문) (11)
    • 잡담 (0)

인기 글

최근 글

최근 댓글

태그

  • 백준알고리즘
  • CSS
  • 단계별로풀어보기
  • FE로드맵
  • javascript
  • Level2
  • react
  • 로드맵
  • 프로그래머스
  • frontend
hELLO · Designed By 정상우.
KimBY
JAVASCRIPT - Map / Set 객체
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.