F.E/JavaScript

[JavaScript] JS 표준 내장 객체, Map

pinomaker 2022. 6. 11. 22:43

Map이란?

Map은 JavaScript의 표준 내장 객체로, 키와 값이 쌍으로 이루어진 콜렉션이다.

 

Map 객체의 특징

  • 객체를  포함한 모든 값을 키로 사용 할 수 있다.
  • 객체는 이터러블이 아니지만, Map은 이터러블이다.
  • 키 값이 고유하다.

Map 생성

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

 

set()를 이용한 요소 추가

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"]])
map.set("해산물", "오징어")
map.set("캐릭터", "짱구").set("물고기", "금붕어") //중복 키는 추가 안 됨

console.log(map)
// Map(4) {'고기' => '삼겹살', '물고기' => '금붕어', '해산물' => '오징어', '캐릭터' => '짱구'}

 

get(key)를 이용한 요소 추출

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"]])

console.log(map.get("고기")) // "삼겹살"

 

has(key)를 이용한 요소 존재 확인

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"]])

console.log(map.has("물고기")) // true
console.log(map.has("닭고기")) // false

 

delete(key), clear()를 이용한 요소 삭제

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"], ["닭고기", "치킨"]])

map.delete("고기")
console.log(map) // Map(2) {'물고기' => '금붕어', '닭고기' => '치킨'}

map.clear()
console.log(map) //Map(0) {}

 

forEach를 이용한 순회

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"], ["닭고기", "치킨"]])

//매개 변수는 3개, (value, key, Map 객체)

map.forEach((v, k, map) => console.log(v, k, map))

// 삼겹살 고기 Map(3) {'고기' => '삼겹살', '물고기' => '금붕어', '닭고기' => '치킨'}
// 금붕어 물고기 Map(3) {'고기' => '삼겹살', '물고기' => '금붕어', '닭고기' => '치킨'}
// 치킨 닭고기 Map(3) {'고기' => '삼겹살', '물고기' => '금붕어', '닭고기' => '치킨'}

 

for of를 이용한 순회

const map = new Map([["고기", "삼겹살"], ["물고기", "금붕어"], ["닭고기", "치킨"]])

for( i of map ){
  console.log(i)
}

// ['고기', '삼겹살']
// ['물고기', '금붕어']
// ['닭고기', '치킨']