JavaScript Map 메서드

new Map() 메서드를 사용하여，

new Map() 메서드에 배열을 전달하여， new Map() 생성자를 사용하여 Map을 생성합니다：

실제

// Map 생성
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

직접 시도해 보세요

Map.get()

다음과 같이 사용할 수 있습니다: get() 메서드는 Map에 있는 키의 값을 가져옵니다：

실제

fruits.get("apples");

직접 시도해 보세요

Map.set()

다음과 같이 사용할 수 있습니다: set() 메서드는 Map에 요소를 추가합니다：

실제

// Map 생성
const fruits = new Map();
// Map 값 설정
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

직접 시도해 보세요

set() 메서드는 기존의 Map 값도 변경할 수 있습니다：

실제

fruits.set("apples", 500);

직접 시도해 보세요

Map.size

size 속성은 Map에 포함된 요소의 수를 반환합니다：

실제

fruits.size;

직접 시도해 보세요

Map.delete()

delete() 메서드는 Map에서 하나의 요소를 제거합니다：

실제

fruits.delete("apples");

직접 시도해 보세요

Map.clear()

clear() 메서드는 Map에서 모든 요소를 제거합니다：

실제

fruits.clear();

직접 시도해 보세요

Map.has()

Map에 존재하는 키가 있으면，has() 메서드는 true를 반환합니다：

실제

fruits.has("apples");

직접 시도해 보세요

다음 코드를 시도해 보세요：

fruits.delete("apples");
fruits.has("apples");

직접 시도해 보세요

Map.forEach()

forEach() 메서드는 Map의 각 키-밸류 쌍에 대해 콜백 함수를 호출합니다：

실제

// 모든 항목 나열
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

직접 시도해 보세요

Map.entries()

entries() 메서드는 Map에 포함된 [key, value] 정확한 이터레이터 객체：

실제

// 모든 항목 나열
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

직접 시도해 보세요

Map.keys()

keys() 메서드는 Map에 포함된 키를 포함하는 이터레이터 객체를 반환합니다：

실제

// 모든 키 나열
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

직접 시도해 보세요

Map.values()}

values() 메서드는 Map의 값에 대한 이터레이터 객체를 반환합니다:

실제

// 모든 값 출력
let text = "";
for (const x of fruits.values()) {
  text += x;
}

직접 시도해 보세요

다음과 같이 사용할 수 있습니다: values() 메서드는 Map의 값에 대한 합을 구합니다:

실제

// 모든 값에 대한 합을 구합니다
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

직접 시도해 보세요

객체 키로 사용

힌트:객체를 키로 사용할 수 있는 것은 Map의 중요한 특성입니다。

실제

// 객체 생성
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Map 생성
const fruits = new Map();
// Map에 새로운 요소 추가
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

직접 시도해 보세요

주의:키는 객체(apples)이 아니라 문자열("apples")입니다:

실제

fruits.get("apples"); // undefined 반환

직접 시도해 보세요

JavaScript Map.groupBy()

ES2024는 JavaScript에 Map.groupBy() 메서드。

Map.groupBy() 메서드는 콜백 함수가 반환하는 문자열 값에 따라 객체의 요소를 그룹화합니다。

Map.groupBy() 메서드는 원본 객체를 변경하지 않습니다。

실제

// 배열을 생성
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// 그룹화를 위한 콜백 함수
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// 수량에 따라 그룹화
const result = Map.groupBy(fruits, myCallback);

직접 시도해 보세요

브라우저 지원

Map.groupBy() ES2024의 기능입니다.

2024년 3월부터 새로운 브라우저는 이 기능을 모두 지원합니다:

Object.groupBy()와 Map.groupBy()의 차이점

Object.groupBy() 와 Map.groupBy() 의 차이점은:

Object.groupBy() 요소를 JavaScript 객체에 그룹화합니다.

Map.groupBy() 요소를 Map 객체에 그룹화합니다.

전체 Map 참조 가이드

완전한 참조를 필요로 하시면, 우리의:JavaScript Map 참조 가이드.

이 가이드는 모든 Map 속성 및 메서드 설명과 예제를 포함하고 있습니다.