[Jay⌨️JS] 자바스크립트 Map 기능 초보를 위한 간단 설명!

Object를 학습하다가 나온 Map!
Map이 유용한 건 알겠는데 뭔지 잘 모르겠다... (비전공 입문자의 눈물🥲)

간단하게 정리하면 Map은 {Object}와 다르게 기본 Key를 포함하지 않고 입력된 내용만 포함한다.

Map의 Key는 모든 값(function, array …등) 설정 가능!

Key - value 데이터 추가,제거 성능도 object보다 우수하고 자체 순회도 가능하다. 👍

 

 

1️⃣  Map 생성

 

• Map 생성 구조는 변수명 = new Map() → 변수명.set(key, value)
• Map의 .get 메소드는 Map 객체 내에서 특정 key의 value를 반환.

// 신규 Map 생성
let weather = new Map();
weather.set('sunny', '🌞')
weather.set('cloudy','☁️')
weather.set('rainy', '🌧️')

// Map 메소드
weather.get('sunny') // = '🌞'
weather.size // = 3

 

 

 

2️⃣  Map 형식 변경

 

• 기존 Object도 Object.entries()를 이용해 Map 으로 변경 가능

// 기존 Object를 Map 으로 치환
let old =	[
	{eng:'one',kor:'1️⃣하나'},
	{eng:'two',kor:'2️⃣둘'},
	{eng:'three',kor:'3️⃣셋'}
	]
let upgrade  =  new Map(Object.entries(old))


upgrade.get('2')['kor'] // = 3️⃣셋

 

 

• 두개 이상의 Map을 Map([…name1, …name2]) 으로 병합 가능.
  키 값이 중복될 경우 마지막 키 값 설정.

const hand = new Map([
    ['one','☝️하나'], 
    ['two','✌️둘'], 
    ['three','👌셋']
])

const card = new Map([
    ['one','1️⃣하나'], 
    ['two','2️⃣둘'], 
])

// 두 맵을 병합
const merged = new Map([...hand, ...card]);
merged.get('one')  // = 1️⃣하나

 

 

 

3️⃣  Map 순회

 

• Map은 for ... of 루프와 forEach 메소드를 사용해 직접 순회 가능.

let weather = new Map();
weather.set('sunny', '🌞');
weather.set('cloudy','☁️');
weather.set('rainy', '🌧️');

// for ... of 루프를 통한 순회
for (let [key, value] of weather) {
	console.log(`${value} Today is ${key}`)
}
// = 🌞 Today is sunny, ☁️ Today is cloudy, 🌧️ Today is rainy


// forEach 메소드를 통한 순회
weather.forEach((key, value) => {
    console.log(`${value} Day ${key}`);
})
// = sunny Day 🌞, cloudy Day ☁️, rainy Day 🌧️

 

 

 

👩‍💻  요약

• Map의 Key는 모든 값 설정 가능.
• Map은 Key - value 추가 및 제거에 최적화!
• Map 자체적으로 직접 순회가능!
• 초보는 여기까지만 학습하고 심화과정은 추후에 보완하도록 하겠습니다. 끝!