[자바스크립트] Map & Set

Map과 Set이 등장한 이유

• 자바스크립트에서 여러 값을 하나의 변수로 묶어서 처리하기 위해 배열이나 객체 사용
• 배열과 객체로는 부족하다고 생각했던 부분을 보완해 Map과 Set이 도입됨
  • 객체에서 ‘키’에는 문자열만 사용할 수 없음
    → Map에서는 키에 모든 값을 사용할 수 있음!
  • 객체에는 여러 정보를 담을 수 있지만 프로퍼티 간에 순서가 없음
    → Map과 Set에는 순서가 있음
  • for 문과 같은 반복문을 사용해서 객체의 프로퍼티를 반복할 수 없음
    → Map과 Set에서는 for... of 같은 반복문을 사용할 수 있음
  • 객체에는 프로퍼티의 개수를 알려 주는 프로퍼티가 없음
    → Map과 Set에는 개수를 알려주는 별도의 프로퍼티가 있음
  • Map과 Set은 배열이나 객체보다 많은 메서드를 가지고 있음

 

---

Map

• ‘키’와 ‘값’이 하나의 쌍으로 이루어졌고 여러 개의 프로퍼티를 가지고 있는 자료 형태 (객체와 비슷)
• 맵의 프로퍼티 키로 문자열, 객체, 함수 등 모든 자료형을 사용할 수 있음
• 맵의 프로퍼티는 순서대로 접근하고 처리할 수 있음

let bag = new Map() // Map 객체의 인스턴스인 bag을 만듦
bag.set("color", "red") // {"color" => "red"}

 

• Map 객체를 만들면서 프로퍼티를 지정할 수도 있음

let myCup= new Map ([
    ["color", "white"],
    ["haveHandle", true],
    ["material", "ceramic"],
    ["capacity", "300ml"]
])
myCup // {"color" => "white", "haveHandle" => true, "material" => "ceramic", "capacity" => "300ml"}

 

---

Map 체이닝

• Map의 메서드는 Map을 반환하므로, 체이닝이 가능 (Set도 가능함)

// 방법 1
let bag = new Map() 
bag.set("color", "red")
bag.set("type", "mini")
bag.set("purpose", "daily")

// 방법 2
bag.set("type", "mini").set("purpose", "daily")

 

---

Map의 프로퍼티와 메서드

구분		기능
프로퍼티	size	- 형태 : 맵.size - 맵 요소의 개수를 반환함
메서드	set()	- 형태 : 맵.set(키, 값) - 프로퍼티 추가
	get()	- 형태 : 맵.get(키) - 해당 키의 값 반환
	has()	- 형태 : 맵.has(키) - 해당 키가 맵에 있는지 체크 후 true 혹은 false 반환
	delete()	- 형태 : 맵.delete(키) - 해당 키가 있는 프로퍼티를 삭제함
	clear()	- 형태 : 맵.clear() - 맵의 모든 요소를 삭제함
	keys()	- 형태 : 맵.keys() - 각 요소의 키를 모아서 이터러블 객체 형태로 반환함
	values()	- 형태 : 맵.values() - 각 요소의 값을 모아서 이터러블 객체 형태로 반환함
	entries()	- 형태 : 맵.entries() - [키, 값] 형태로 모든 요소를 이터러블 객체 형태로 반환

 

---

Set

• 배열은 키 없이 여러 개의 값을 모아 놓은 것으로, 값이 중복되어도 상관없음
• Set은 키 없이 여러 개의 값을 모아 놓은 점은 배열과 같지만, 값이 중복되지 않음  

let numSet1 = new Set()
numSet1.add("one") // {"one"}
numSet1.add("two") // {"one", "two"}

//체이닝 하는 경우
let numSet1 = new Set().add("one").add("two")

 

• 배열을 인수로 받아서 셋으로 만들 수도 있으며, 중복값이 있는 배열의 경우 중복값을 모두 제거하고 Set을 만듦

 let numSet2 = new Set([1, 2, 3])
 numSet2   // {1, 2, 3}
 let numSet3 = new Set([1, 2, 1, 3, 1, 5])
 numSet3   // {1, 2, 3, 5}

 

---

Set의 프로퍼티와 메서드

구분		기능
프로퍼티	size	- 형태 : 셋.size - 셋 요소의 개수를 반환함
메서드	add()	- 형태 : 셋.add(값) - 셋에 값을 추가함
	has()	- 형태 : 셋.has(값) - 해당 값이 셋에 있는지 체크 후 true 혹은 false 반환
	delete()	- 형태 : 셋.delete(값) - 해당 값을 삭제함
	clear()	- 형태 : 맵.clear() - 셋의 모든 값을 삭제함
	keys()	- 형태 : 셋.keys() - 셋의 모든 값을 이터러블 객체 형태로 반환함
	values()	- 형태 : 셋.values() - 셋의 모든 값을 이터러블 객체 형태로 반환함
	entries()	- 형태 : 셋.entries() - [값, 값] 형식으로 모든 값을 이터러블 객체 형태로 반환