[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map [Back]  [Original]

Map - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

Map

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.

* Some parts of this feature may have varying levels of support.

Map - . ( ) .

In this article

const map1 = new Map();

map1.set("a", 1);
map1.set("b", 2);
map1.set("c", 3);

console.log(map1.get("a"));
// Expected output: 1

map1.set("a", 97);

console.log(map1.get("a"));
// Expected output: 97

console.log(map1.size);
// Expected output: 3

map1.delete("b");

console.log(map1.size);
// Expected output: 2

Map - . Map . Map . Map - . for...of [key, value] 2 . . , set() - . (set() )

Map " " . O(N) (O(1) ), (O(log(N)) ) .

SameValueZero .(0 -0 . ). , NaN !== NaN NaN NaN , === .

vs

Object Map . , , , . ( ) Object Map .

Map .

Map Object
Map . .

Object .

Map .

- Object . null .

Map (, ) . Object String Symbol .

Map . Map , .

Object . .

ECMAScript 2015 . ECMAScript 2020 . OrdinaryOwnPropertyKeys EnumerateObjectProperties . . (for-in . Object.keys . Object.getOwnPropertyNames . Object.getOwnPropertySymbols Symbol- .)

Map size . Object .
Map (iterable) .

Object iteration protocol for...of .

:

- .

- .

Serialization and parsing

.

( JSON.stringify() replacer Map . Stack Overflow How do you JSON.stringify an ES6 Map?) .)

JSON.stringify() Object JSON .

JSON.parse() JSON Object .

Map .

.

js
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";

console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

Map . . 'bla' Map . .

js
wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }

set(key, value) .

js
const contacts = new Map();
contacts.set("Jessie", { phone: "213-555-1234", address: "123 N 1st Ave" });
contacts.has("Jessie"); // true
contacts.get("Hilary"); // undefined
contacts.set("Hilary", { phone: "617-555-4321", address: "321 S 2nd St" });
contacts.get("Jessie"); // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete("Raymond"); // false
contacts.delete("Jessie"); // true
console.log(contacts.size); // 1

Map()

Map .

get Map[@@species]

.

Map.prototype[@@toStringTag]

@@toStringTag "Map". Object.prototype.toString() .

Map.prototype.size

Map / .

Map.prototype.clear()

Map - .

Map.prototype.delete()

Map true false . map.has(key) false .

Map.prototype.get()

undefined .

Map.prototype.has()

Map .

Map.prototype.set()

Map . Map .

Map.prototype[@@iterator]()

Map [key, value] .

Map.prototype.keys()

Map .

Map.prototype.values()

Map .

Map.prototype.entries()

Map [key, value] .

Map.prototype.forEach()

Map - callbackFn . forEach thisArg this .

Map

js
const myMap = new Map();

const keyString = "a string";
const keyObj = {};
const keyFunc = function () {};

//  
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");

console.log(myMap.size); // 3

//  
console.log(myMap.get(keyString)); // "value associated with 'a string'"
console.log(myMap.get(keyObj)); // "value associated with keyObj"
console.log(myMap.get(keyFunc)); // "value associated with keyFunc"

console.log(myMap.get("a string")); // "value associated with 'a string'",  keyString === 'a string'
console.log(myMap.get({})); // undefined,  keyObj !== {}
console.log(myMap.get(function () {})); // undefined,  keyFunc !== function () {}

Map NaN

NaN . NaN (NaN !== NaN ), NaN .

js
const myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN);
// "not a number"

const otherNaN = Number("foo");
myMap.get(otherNaN);
// "not a number"

for...of

for...of .

js
const myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

for (const key of myMap.keys()) {
  console.log(key);
}
// 0
// 1

for (const value of myMap.values()) {
  console.log(value);
}
// zero
// one

for (const [key, value] of myMap.entries()) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

forEach()

forEach() .

js
myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one

js
const kvArray = [
  ["key1", "value1"],
  ["key2", "value2"],
];

// Use the regular Map constructor to transform a 2D key-value Array into a map
const myMap = new Map(kvArray);
console.log(myMap.get("key1")); // "value1"

// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray

// A succinct way to do the same, using the spread syntax
console.log([...myMap]);

// Or use the keys() or values() iterators, and convert them to an array
console.log(Array.from(myMap.keys())); // ["key1", "key2"]

Array Map .

js
const original = new Map([[1, "one"]]);

const clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false (useful for shallow comparison)

: .

.

js
const first = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

const second = new Map([
  [1, "uno"],
  [2, "dos"],
]);

//   .        .
//     .
const merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

.

js
const first = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);

const second = new Map([
  [1, "uno"],
  [2, "dos"],
]);

//   .          .
const merged = new Map([...first, ...second, [1, "eins"]]);

console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

Specification
ECMAScript 2027 LanguageSpecification
# sec-map-objects


Web Proxy Viewer  |  New URL  |  Original Page