From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../reference/global_objects/map/index.html | 244 +++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 files/ko/web/javascript/reference/global_objects/map/index.html (limited to 'files/ko/web/javascript/reference/global_objects/map/index.html') diff --git a/files/ko/web/javascript/reference/global_objects/map/index.html b/files/ko/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..f8b29bdf6e --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,244 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef}}
+ +

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 {{Glossary("Primitive", "원시 값")}})이라도 키와 값으로 사용할 수 있습니다.

+ +

설명

+ +

Map 객체는 요소의 삽입 순서대로 원소를 순회합니다. {{jsxref("Statements/for...of", "for...of")}} 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환합니다.

+ +

키 동일성

+ + + +

{{jsxref("Object")}}와 Map 비교

+ +

{{jsxref("Object")}}는 값에 키를 할당할 수 있고, 그 키로 값을 얻을 수 있고, 키를 삭제할 수 있으며 어떤 키에 값이 존재하는지 확인할 수 있다는 점에서 Map과 유사합니다. 이런 이유에 더해, 이전에는 내장된 대체제가 없었기 때문에, Object를 Map 대신 사용하곤 했습니다.

+ +

그러나 어떤 상황에선, Map을 선호해야 할 몇 가지 중요한 차이점이 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MapObject
의도치 않은 키Map은 명시적으로 제공한 키 외에는 어떤 키도 가지지 않습니다. +

Object는 프로토타입을 가지므로 기본 키가 존재할 수 있습니다. 주의하지 않으면 직접 제공한 키와 충돌할 수도 있습니다.

+ +
+

참고: ES5부터, 프로토타입으로 인한 키 충돌은 {{jsxref("Object.create", "Object.create(null)")}}로 해결할 수 있지만, 실제로 쓰이는 경우는 적습니다.

+
+
키 자료형Map의 키는 함수, 객체 등을 포함한 모든 값이 가능합니다.Object의 키는 반드시 {{jsxref("String")}} 또는 {{jsxref("Symbol")}}이어야 합니다.
키 순서 +

Map의 키는 정렬됩니다. 따라서 Map의 순회는 삽입순으로 이뤄집니다.

+ 		+

Object의 키는 정렬되지 않습니다.

+ +
+

참고: ECMAScript 201 이후로, 객체도 문자열과 Symbol 키의 생성 순서를 유지합니다. ECMEScript 2015 명세를 준수하는 JavaScript 엔진에서 문자열 키만 가진 객체를 순회하면 삽입 순을 따라갑니다.

+
+
크기Map의 항목 수는 {{jsxref("Map.prototype.size", "size")}} 속성을 통해 쉽게 알아낼 수 있습니다.Object의 항목 수는 직접 알아내야 합니다.
순회Map은 순회 가능하므로, 바로 순회할 수 있습니다.Object를 순회하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 순회해야 합니다.
성능잦은 키-값 쌍의 추가와 제거에서 더 좋은 성능을 보입니다.잦은 키-값 쌍의 추가와 제거를 위한 최적화가 없습니다.
+ +

생성자

+ +
+
{{jsxref("Map.Map", "Map()")}}
+
새로운 Map 객체를 생성합니다.
+
+ +

속성

+ +
+
Map.length
+
값이 0인 속성입니다.
+ 요소의 수는 {{jsxref("Map.prototype.size")}}로 알아낼 수 있습니다.
+
{{jsxref("Map.@@species", "get Map[@@species]")}}
+
파생 객체를 생성하는데 사용하는 생성자 함수입니다.
+
{{jsxref("Map.prototype")}}
+
Map 생성자의 프로토타입을 나타냅니다. 모든 Map 인스턴스에 속성을 추가할 수 있습니다.
+
+ +

Map 인스턴스

+ +

모든 Map 인스턴스는 {{jsxref("Map.prototype")}}을 상속합니다.

+ +

속성

+ +

{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}

+ +

메서드

+ +

{{page('ko/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}

+ +

예제

+ +

Map 객체 사용하기

+ +
let myMap = new Map()
+
+let keyString = '문자열'
+let keyObj    = {}
+let keyFunc   = function() {}
+
+// 값 설정
+myMap.set(keyString, "'문자열'과 관련된 값")
+myMap.set(keyObj, 'keyObj와 관련된 값')
+myMap.set(keyFunc, 'keyFunc와 관련된 값')
+
+myMap.size              // 3
+
+// getting the values
+myMap.get(keyString)    // "'문자열'과 관련된 값"
+myMap.get(keyObj)       // "keyObj와 관련된 값"
+myMap.get(keyFunc)      // "keyFunc와 관련된 값"
+
+myMap.get('문자열')    // "'문자열'과 관련된 값"
+                         // keyString === '문자열'이기 때문
+myMap.get({})            // undefined, keyObj !== {}
+myMap.get(function() {}) // undefined, keyFunc !== function () {}
+ +

Map의 키로 NaN 사용하기

+ +

{{jsxref("NaN")}}도 키로서 사용할 수 있습니다. 모든 NaN은 자기 자신과 동일하지 않지만(NaN !== NaN), NaN을 서로 구분할 수도 없기 때문에 아래 예제도 잘 동작합니다.

+ +
let myMap = new Map()
+myMap.set(NaN, 'not a number')
+
+myMap.get(NaN)
+// "not a number"
+
+let otherNaN = Number('foo')
+myMap.get(otherNaN)
+// "not a number"
+ +

for..of로 Map 순회하기

+ +

Map은 for..of 반복문을 사용해 순회할 수 있습니다.

+ +
let myMap = new Map()
+myMap.set(0, 'zero')
+myMap.set(1, 'one')
+
+for (let [key, value] of myMap) {
+  console.log(key + ' = ' + value)
+}
+// 0 = zero
+// 1 = one
+
+for (let key of myMap.keys()) {
+  console.log(key)
+}
+// 0
+// 1
+
+for (let value of myMap.values()) {
+  console.log(value)
+}
+// zero
+// one
+
+for (let [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value)
+}
+// 0 = zero
+// 1 = one
+ +

forEach()로 Map 순회하기

+ +

Map은 {{jsxref("Map.prototype.forEach", "forEach()")}} 메서드로 순회할 수 있습니다.

+ +
myMap.forEach(function(value, key) {
+  console.log(key + ' = ' + value)
+})
+// 0 = zero
+// 1 = one
+ +

Array 객체와의 관계

+ +
let kvArray = [['key1', 'value1'], ['key2', 'value2']]
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+let myMap = new Map(kvArray)
+
+myMap.get('key1') // returns "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"]
+ +

명세

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}
+ +

브라우저 호환성

+ +

{{Compat("javascript.builtins.Map")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf