[JavaScript] 자바스크립트에서 맵(Map)과 키(Key) 사용하기

271_자바스크립트에서 맵(Map)과 키(Key) 사용하기

[적용]

• 키와 값을 세트로 사용하고 싶을 때
• 연관 배열을 사용하고 싶을 때

---

[문법 1]

메소드	의미	반환
new.Map(반복가능한객체*)	맵 객체 초기화	객체(Map)
맵.set(키, 값)	맵에 키와 값의 세트를 등록	객체(Map)
맵.get(키)	키를 지정해 값을 가져오기	값
맵.has(키)	키의 값 존재 여부 확인	진리값
맵.delete(키)	키의 값 삭제	진리값(삭제 여부)
맵.clear()	키와 값 모두 삭제	없음
맵.keys()	키의 반복자 객체	객체(Iterator)
맵.values()	값의 반복자 객체	객체(Iterator)
맵.entries()	키와 값 배열의 반복자 객체 반환	객체(Iterator)
맵.forEach(콜백)_	각 세트에 대한 처리 실행	없음

* 생략 가능

 

[문법 2]

속성	의미	타입
맵.size	키와 값 세트의 수	숫자

 

[문법 3]

속성	의미
(키, 값) => {}	키와 값을 가져와 처리

---

[내용]

Map 객체는 키와 값을 세트로 사용하여 다양한 데이터를 다룬다.

Object도 키를 사용해 데이터를 다루지만, Map은 키와 값을 세트로 다루는 기능에 조금 더 특화되어 있다.

다른 프로그래밍 언어의 연관 배열(Associative Array)이나 딕셔너리(Dictionary)와 같은 기능이다.

 

Map은 set()과 get()을 사용해 값을 지정하거나 불러올 수 있으며, has()를 사용해 값의 존재 여부를 확인할 수 있다.

 

JavaScript    

// 맵 초기화
const memberList = new Map();

// 맵에 값 설정
memberList.set(20, '사자');
memberList.set(50, '호랑이');
memberList.set(120, '사슴');

// 다음과 같이 기술 가능
// memberList.set(20, '사자').set(50, '호랑이').set(120, '사슴');

// 맵에서 값 가져오기
console.log(memberList.get(20));  // 결과: '사자'

// 맵 존재 여부 확인
console.log(memberList.has(50));  // 결과: true

 

같은 키를 사용하면 덮어쓰기가 가능하다.

JavaScript    

const memberList = new Map();

memberList.set(20, '사자');
memberList.set(20, '호랑이');

console.log(memberList.get(20)); // 결과: '호랑이'

 

[[키1, 값1], [키2, 값2]]의 형태로 초기화를 지정할 수 있다.

JavaScript    

// 맵 초기화
const memberList = new Map([[20, '사자'], [50, '호랑이'], [120, '사슴']]);

console.log(memberList.get(50));  // 결과: '호랑이'

 

키는 문자열, 숫자, 심볼 등의 타입을 사용할 수 있다.

심볼을 키로 지정하면 유일한 키 값을 가지는 세트의 생성이 가능하다.

JavaScript    

const myMap1 = new Map();
myMap1.set(10, '사자');
console.log(myMap1.get(10));  // 결과: '사자'

const myMap2 = new Map();
myMap2.set('f1234_56', '호랑이');
console.log(myMap2.get('f1234_56'));  // 결과: '호랑이'

const myMap3 = new Map();
const keySymbol = Symbol();
myMap3.set(keySymbol, '사슴');
console.log(myMap3.get(keySymbol));  // 결과: '사슴'

 

size 속성으로 세트의 수를 확인할 수 있다.

JavaScript    

// 앱 초기화
const memberList2 = new Map();

// 맵에 값 설정
memberList2.set('123_456', '사자');
memberList2.set('789', '호랑이');
memberList2.set('222_222', '사슴');

console.log(memberList2.size);  // 결과: 3

key(), values(), entries()를 사용해 각각 키, 값, 키와 값의 세트를 가져올 수 있으며,

반환값은 모두 반복자 객체이므로 for...of 등을 사용해 처리할 수 있다.

// 맵 초기화
const memberList = new Map)[[20, '사자'], [50, '호랑이'], [120, '사슴']]);

const keyList = memberList.keys();

// 20, 50, 120 순서대로 출력
for (let key of keyList) {
  console.log(key);
}

const valueList = memberList.values();

// '사자', '호랑이', '사슴' 순서대로 출력
for (let value of valueList) {
  console.log(value);
}

const entryList = memberList.entries();

// [20, '사자'], [50, '호랑이'], [120, '사슴'] 순서대로 출력
for (let entry of entryList {
  console.log(entry);
}

forEach()를 사용해도 각 세트를 작업할 수 있다.

// 맵 초기화
const memberList = new Map([[20, '사자'], [50, '호랑이'], [120, '사슴']]);

// '20 : 사자', '50 : 호랑이', '120 : 사슴' 순서대로 출력
memberList.forEach((value, key) => {
  console.log(`${key] : ${value}`);
});

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김