예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4

10.4 Map 객체

  Map 객체는 키-값으로 구성된 자료 구조이다. Map 객체에서 키는 숫자, 문자열, 배열, 객체 등 여떠한 데이터 형도 사용 가능하다.

예제 10-19. Map 객체 생성하기

map.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);

    let text = "";
    fruits.forEach(function(value, key) {
        text += key + " : " + value + "<br>";
    })
    document.getElementById("show").innerHTML = text;
</script>

예제 10-19. Map 객체 생성하기

map.html

코드 분석

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);
    /* 생성자 함수 Map()의 인수로 배열 [["사과", 10], ["오렌지", 20], ["수박", 30]]을
    사용해서 Map 객체 fruits를 생성한다. Map 객체는 키 '사과'의 값 10, 키 '오렌지'의 값 20,
    키 '수박'의 값 30을 요소로 한다. 이와 같이 Map 객체의 요소는 키-값으로 구성된다. */

    let text = "";
    fruits.forEach(function(value, key) {
        text += key + " : " + value + "<br>";
    })
    /* forEach() 메서드를 사용해서 Map 객체의 요소를 순회한다. 반복 루프인데
    Map 객체의 요소가 바뀐다는 것이다. 배열에서 요소들이 차례대로 적용되면서
    루프도는 것과 동일하게 동작한다. value는 Map 객체 fruits의 값이고
    key는 fruits의 키를 의미한다.*/
    document.getElementById("show").innerHTML = text;
</script>

 

10.4.2 set() 메서드

Map 객체의 set() 메서드는 Map 객체에 키와 값으로 구성된 요소를 설정하는데 사용된다.

예제 10-20. Map 객체의 set() 메서드

map_set.html

코드 원문

<p id="show"></p>
<script>
    const pets = new Map();
    pets.set("강아지", 100);
    pets.set("고양이", 200);
    pets.set("앵무새", 300);

    let text = "";
    pets.forEach(function(value, key){
        text += key + " : " + value + "<br>";
    })
    document.getElementById("show").innerHTML = text;
</script>

예제 10-20. Map 객체의 set() 메서드

map_set.html

코드 원문

<p id="show"></p>
<script>
    const pets = new Map();
    /* new Map()을 이용해서 빈 map 객체 pets을 생성한다.*/
    pets.set("강아지", 100);
    /* set() 메서드를 사용해서 객체 pets에 키 '강아지'와 값 100을
    가지는 요소를 설정한다. */
    pets.set("고양이", 200);
    /* set() 메서드를 사용해서 객체 pets에 키 '고양이'와 값 200을
    가지는 요소를 설정한다. */
    pets.set("앵무새", 300);

    let text = "";
    pets.forEach(function(value, key){
        text += key + " : " + value + "<br>";
    })
    document.getElementById("show").innerHTML = text;
</script>

 

10.4.3 get() 메서드

Map 객체의 get() 메서드는 특정 키에 해당하는 값을 가져오는 데 사용된다.

예제 10-21. Map 객체의 get() 메서드

map_get.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);

    document.getElementById("show").innerHTML = fruits.get("오렌지");
</script>

예제 10-21. Map 객체의 get() 메서드

map_get.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
    /* new Map()을 이용해서 빈 map 객체 fruits를 생성한다. 인수로는
    [["사과", 10], ["오렌지", 20], ["수박", 30]]를 가진다. 키-값으로
    구성되므로 키 '사과'의 값 10, '오렌지'의 값 20, '수박'의 값 30을
    요소로 가진다. */
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);

    document.getElementById("show").innerHTML = fruits.get("오렌지");
    /* fruits.get("오렌지")는 Map 객체의 키 '오렌지'에 해당되는 값인 20을 반환한다.
    이와 같이 Map 객체의 get() 메서드를 이용하면 키에 해당되는 값을 가져올 수 있다. */
</script>

 

10.4.4 has() 메서드

  Map 객체의 has() 메서드는 set 객체의 has() 메서드와 마찬가지로 특정 키가 객체에 존재하는지를 체크하는데 사용된다.

예제 10-22. Map 객체의 has() 메서드

map_has.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);

    let text = "";
    text += fruits.has("오렌지") + "<br>";
    text += fruits.has("파인애플");
    document.getElementById("show").innerHTML = text;
</script>

예제 10-22. Map 객체의 has() 메서드

map_has.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
    /* new Map()을 이용해서 빈 map 객체 pets을 생성한다. 인수로는
    [["사과, 10], ["오렌지", 20],["수박", 30]] 가진다.
    키-값으로 구성되므로 키 '사과'의 값 10, 키 '오렌지'의 값 20,
    키 '수박'의 값 30을 요소로 가진다.*/
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);

    let text = "";
    text += fruits.has("오렌지") + "<br>";
    /* fruits.has("오렌지")는 Map 객체 fruits에서 '오렌지' 요소가 존재하는지
    체크한다. fruits에 '오렌지'가 존재하기 때문에 true를 반환한다. */
    text += fruits.has("파인애플");
    /* fruits.has("파인애플")은 fruits에 '파인애플' 요소가 존재하지 않기 때문에
    false를 반환한다. */
    document.getElementById("show").innerHTML = text;
</script>

 

10.4.5 delete() 메서드

  Map 객체의 delete() 메서드는 Set 객체에서와 같이 특정 키를 가진 요소를 삭제한다.

예제 10-23. Map 객체의 delete() 메서드

map_delete.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);
    fruits.delete("사과");

    let text = "";
    fruits.forEach(function(value, key) {
        text += key + " : " + value + "<br>";
    })
    document.getElementById("show").innerHTML = text;
</script>

예제 10-23. Map 객체의 delete() 메서드

map_delete.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
    /* new Map()을 이용해서 빈 map 객체 pets을 생성한다. 인수로는
    [["사과, 10], ["오렌지", 20],["수박", 30]] 가진다.
    키-값으로 구성되므로 키 '사과'의 값 10, 키 '오렌지'의 값 20,
    키 '수박'의 값 30을 요소로 가진다.*/
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30]
    ]);
    fruits.delete("사과");
    /* fruits.delete("사과")는 Map 객체 fruits에서 키가 '사과'인
    요소를 삭제한다.*/

    let text = "";
    fruits.forEach(function(value, key) {
        text += key + " : " + value + "<br>";
    })
    document.getElementById("show").innerHTML = text;
</script>

 

10.4.6 size 프로퍼티

  Map 객체의 size 프로퍼티는 Set 객체에서와 같이 요소 크기, 즉 요소의 개수를 구하는 데 사용된다.

예제 10-24. Map 객체의 size 프로퍼티

map_size.html

코드 원문

<p id="show"></p>
<script>
    const fruits = new Map([
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30],
        ["키위", 40]
    ]);
    document.getElementById("show").innerHTML = fruits.size;
</script>

예제 10-24. Map 객체의 size 프로퍼티

map_size.html

코드 분석

<p id="show"></p>
<script>
    const fruits = new Map([
    /* new Map()을 이용해서 빈 map 객체 pets을 생성한다. 인수로는
    [["사과, 10], ["오렌지", 20],["수박", 30]] 가진다.
    키-값으로 구성되므로 키 '사과'의 값 10, 키 '오렌지'의 값 20,
    키 '수박'의 값 30을 요소로 가진다.*/
        ["사과", 10],
        ["오렌지", 20],
        ["수박", 30],
        ["키위", 40]
    ]);
    document.getElementById("show").innerHTML = fruits.size;
    /* fruits.size의 size 메서드를 사용해서 객체 fruits의 크기를 반환한다. */
</script>