투케이2K

513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear 본문

JavaScript

513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear

투케이2K 2026. 3. 18. 19:40
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / Map / 기본 사용 방법


- 사전) 👉 자바스크립트 Map 간단 설명 : 

  >> Map 은 키-값(key-value) 쌍을 저장하는 내장 컬렉션입니다.

  >> Map 핵심 특징 : 

    - 키의 타입 제약 없음 : 문자열뿐 아니라 객체, 배열, 함수, 심볼 등 어떤 값도 키로 사용할 수 있음
    - 삽입 순서 보장 : 순회 시 입력한 순서대로 반환
    - 크기 조회 간편 : map.size
    - 성능상 이점 : 키의 다양성과 빈번한 추가/삭제/조회가 있는 경우 일반 객체보다 유리한 경우가 많음

  >> Map 주요 메소드 : 

    - set(key, value) → 체이닝 가능
    - get(key)
    - has(key)
    - delete(key)
    - clear()
    - size (프로퍼티)

    - map.keys()
    - map.values()
    - map.entries()

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
        window.onload = async function() {
          console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

          try {

            // --------------------------------------------
            // [샘플 map 객체 생성]
            // --------------------------------------------
            // [기본 객체 생성 방법]
            const map = new Map();

            // [객체 생성 시 데이터 추가 방법]
            /*
            const map = new Map([
              ['a', 1],
              ['b', 2],
              ['c', 3],
            ]);
            // */


            // --------------------------------------------
            // [set : 데이터 저장 수행]
            // --------------------------------------------          
            map.set('a', 0); // 동일 Key 값
            map.set('b', 2);
            map.set('c', 3);
            map.set('a', 1); // 동일 key 값 명칭으로 저장 시 최근 값으로 대체 됨

            console.log('set map : ', map); // Map(3) {'a' => 1, 'b' => 2, 'c' => 3}


            // --------------------------------------------
            // [get : 특정 key 값 value 데이터 확인 수행]
            // --------------------------------------------
            console.log('get map key = a : ', map.get('a')); // 1
            console.log('get map key = b : ', map.get('b')); // 2
            console.log('get map key = c : ', map.get('c')); // 3


            // --------------------------------------------
            // [keys : Map 에 저장 된 Key 리스트 확인 수행]
            // --------------------------------------------
            const mapKeys = map.keys();

            console.log('mapKeys : ', mapKeys); // MapIterator {'a', 'b', 'c'}
            for (const k of map.keys()){
              console.log(k);
            }


            // --------------------------------------------
            // [values : Map 에 저장 된 Value 리스트 확인 수행]
            // --------------------------------------------
            const mapValues = map.values();

            console.log('mapValues : ', mapValues); // MapIterator {1, 2, 3}
            for (const v of map.values()){
              console.log(v);
            }


            // --------------------------------------------
            // [entries : Map 에 저장 된 Key, Value 확인 수행]
            // --------------------------------------------
            for (const [k, v] of map.entries()){
              // a 1
              // b 2
              // c 3
              console.log(k, v);
            }


            // --------------------------------------------
            // [has : 특정 key 값 포함 여부 확인]
            // --------------------------------------------
            console.log('has map key = a : ', map.has('a')); // true
            console.log('has map key = c : ', map.has('c')); // true
            console.log('has map key = d : ', map.has('d')); // false


            // --------------------------------------------
            // [size : map 전체 사이즈 확인 수행]
            // --------------------------------------------
            console.log('size map : ', map.size); // 3 (a, b, c)


            // --------------------------------------------
            // [delete : map 에서 특정 key 값 삭제 수행]
            // --------------------------------------------
            map.delete('b');
            
            console.log('delete map : ', map); // Map(2) {'a' => 1, 'c' => 3}


            // --------------------------------------------
            // [clear : map 전체 데이터 삭제 수행]
            // --------------------------------------------
            map.clear();

            console.log('clear map : ', map); // Map(0) {size: 0}

          }
          catch (exception) {
            console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);

          }

        };

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행

https://kkh0977.tistory.com/8699

https://blog.naver.com/kkh0977/224218640323


[간단 소스] 자바스크립트 Object.keys 사용해 json 에 저장 된 key 키 포함 및 개수 확인 및 for 문 key , value 출력

https://kkh0977.tistory.com/8691

https://blog.naver.com/kkh0977/224214219987


[자바스크립트 json string 문자열 데이터 JSON.parse 사용해 model 객체에 매핑 수행]

https://kkh0977.tistory.com/5055

https://blog.naver.com/kkh0977/223304887680?trackingCode=blog_bloghome_searchlist


[JsonArray 에 담긴 JsonObject 객체 파싱해 특정 idx (순서) 로 정렬 실시]

https://kkh0977.tistory.com/876

https://blog.naver.com/kkh0977/222399966146?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

515. (javaScript) 자바스크립트 globalThis.appState 공통으로 접근 가능한 전역 공유 상태 설명 정리  (0) 2026.03.20
514. (javaScript) [간단 소스] 자바스크립트 string 문자열 형식 동적 자바 스크립트 코드 작성 및 import 모듈 로딩 , 소스 코드 실행  (0) 2026.03.19
512. (javaScript) [간단 소스] 자바스크립트 Object.fromEntries 사용해 json 객체 특정 value 값 기준 필터링 및 value 값 기준 정렬 수행  (0) 2026.03.17
511. (javaScript) [간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행  (0) 2026.03.16
510. (javaScript) [간단 소스] 자바스크립트 커스텀 json key 정렬 함수 생성 및 string , number , date 타입 asc , desc 정렬 수행  (0) 2026.03.13
'JavaScript' Related Articles more
Comments