Map
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itโs been available across browsers since โจ2015๋ 7์โฉ.
* Some parts of this feature may have varying levels of support.
Map
๊ฐ์ฒด๋ ํค-๊ฐ ์๊ณผ ํค์ ์๋ ์ฝ์
์์๋ฅผ ๊ธฐ์ตํฉ๋๋ค. ๋ชจ๋ ๊ฐ(๊ฐ์ฒด ๋ฐ
์์ ๊ฐ ๋ชจ๋)์ ํค ๋๋ ๊ฐ์ผ๋ก ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
์๋ํด ๋ณด๊ธฐ
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 ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํค๋ฅผ ํฌํจํ์ง ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ๋ช
์์ ์ผ๋ก ์
๋ ฅ๋ ๋ด์ฉ๋ง ํฌํจ๋ฉ๋๋ค.
|
์ฐธ๊ณ :
์ด๋ |
๋ณด์ |
Map ์ ์ฌ์ฉ์๊ฐ ์ ๊ณตํ๋ ํค์ ๊ฐ์ ๋ํด์ ์์ ํ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
|
์ฌ์ฉ์๊ฐ ์ ๊ณตํ ํค-๊ฐ ์์ |
ํค ์ ํ |
Map ์ ํค๋ ๋ชจ๋ ๊ฐ(ํจ์, ๊ฐ์ฒด ๋๋ ์์๊ฐ ํฌํจ)์ด ๋ ์ ์์ต๋๋ค.
|
Object ์ ํค๋ String ๋๋ Symbol ์ด์ฌ์ผ ํฉ๋๋ค.
|
ํค ์์ |
|
์ผ๋ฐ์ ์ธ
์์๋ ECMAScript 2015์์๋ง ์์ฒด ์์ฑ์ ๋ํด ์ฒ์ ์ ์๋์์ต๋๋ค.
ECMAScript 2020์ ์์๋ ์์ฑ์ ์์๋ ์ ์ํฉ๋๋ค.
OrdinaryOwnPropertyKeys
์
EnumerateObjectProperties
์ถ์ ๋ช
์ธ์์
์ ์ฐธ๊ณ ํ์๊ธฐ ๋ฐ๋๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ์ฒด์ ๋ชจ๋ ์์ฑ์ ๋ฐ๋ณตํ๋ ๋จ์ผ ๋ฉ์ปค๋์ฆ์ ์์ต๋๋ค. ๋ค์ํ ๋ฉ์ปค๋์ฆ์๋ ๊ฐ๊ฐ ๋ค๋ฅธ ์์ฑ ํ์ ์งํฉ์ด ํฌํจ๋ฉ๋๋ค
( |
ํฌ๊ธฐ |
Map ์ ์์ดํ
์ ์๋ size ์์ฑ์์ ์ฝ๊ฒ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
|
Object ์ ์์ดํ
์๋ ์๋์ผ๋ก ๊ฒฐ์ ํด์ผ ํฉ๋๋ค.
|
์ํ |
Map ์
์ํ๊ฐ๋ฅ(iterable)ํ๊ธฐ ๋๋ฌธ์ ์ด๋ฏ๋ก ์ง์ ๋ฐ๋ณตํ ์ ์์ต๋๋ค.
|
์ฐธ๊ณ :
|
์ฑ๋ฅ |
ํค-๊ฐ ์์ ๋น๋ฒํ ์ถ๊ฐ ๋ฐ ์ ๊ฑฐ์ ๊ด๋ จ๋ ์ํฉ์์๋ ์ฑ๋ฅ์ด ์ข ๋ ์ข์ต๋๋ค. |
ํค-๊ฐ ์์ ๋น๋ฒํ ์ถ๊ฐ ๋ฐ ์ ๊ฑฐ์ ์ต์ ํ๋์ง ์์์ต๋๋ค. |
Serialization and parsing |
์ง๋ ฌํ ๋๋ ๊ตฌ๋ฌธ ๋ถ์์ ๋ํ ๊ธฐ๋ณธ ์ง์์ด ์์ต๋๋ค.
(ํ์ง๋ง |
|
๊ฐ์ฒด ์์ฑ ์ค์ ํ๊ธฐ
๊ฐ์ฒด ์์ฑ ์ค์ ์ Map ๊ฐ์ฒด์์๋ ์๋ํ์ง๋ง ์๋นํ ํผ๋์ ์ผ๊ธฐํ ์ ์์ต๋๋ค.
๋ฐ๋ผ์ ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ์์ผ๋ก ๋์ํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ ๋๋ค.
const wrongMap = new Map();
wrongMap["bla"] = "blaa";
wrongMap["bla2"] = "blaaa2";
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
๊ทธ๋ฌ๋ ์์ฑ์ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ Map ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ์ํธ ์์ฉํ์ง ์์ต๋๋ค. ์์ฑ ์ค์ ์ ์ผ๋ฐ ๊ฐ์ฒด์ ๊ธฐ๋ฅ์ ์ฌ์ฉํฉ๋๋ค. 'bla' ๊ฐ์ ์ง์๋ฅผ ์ํ Map์ ์ ์ฅ๋์ง ์์ต๋๋ค. ๋ฐ์ดํฐ์ ๋ํ ๋ค๋ฅธ ์์ ๋ ์๋์ ๊ฐ์ด ์คํจํฉ๋๋ค.
wrongMap.has("bla"); // false
wrongMap.delete("bla"); // false
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
๋งต์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ์ฌ๋ฐ๋ฅธ ๋ฐฉ๋ฒ์ set(key, value)
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์
๋๋ค.
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 ๊ฐ์ฒด ์ฌ์ฉํ๊ธฐ
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
์ ์๋ก ๊ตฌ๋ณํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ ์์๊ฐ ๋์ํฉ๋๋ค.
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
๋ฐ๋ณต์ ์ฌ์ฉํ์ฌ ์ํํ ์ ์์ต๋๋ค.
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()
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ํํ ์ ์์ต๋๋ค.
myMap.forEach((value, key) => {
console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one
๋ฐฐ์ด ๊ฐ์ฒด์์ ๊ด๊ณ
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
์ ๋ณต์ ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
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)
์ฐธ๊ณ : ๋ฐ์ดํฐ ์์ฒด๋ ๋ณต์ ๊ฐ ์๋๋ค๋ ์ฌ์ค์ ๋ช ์ฌํ์ ์ผ ํฉ๋๋ค.
๋งต์ ํค ์ ์ผ์ฑ์ ์ ์งํ์ฑ๋ก ๋ณํฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
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
๋งต์ ๋ฐฐ์ด๊ณผ ๋ณํฉ๋ ์ ์์ต๋๋ค.
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ยฎ 2026 Language Specification # sec-map-objects |
๋ธ๋ผ์ฐ์ ํธํ์ฑ
Loadingโฆ