TIL/JavaScript

map, set

han1693516 2022. 8. 28. 14:04

map
   - object처럼 key, value의 짝으로 저장되나
     object와 달리 key의 자료형이 string이 아님
   - arr, string, set처럼 iterable한 요소

  선언 방법
      - const rest = new Map(); // new Set() 
      - const rest = new Map([
              [1, 'aaa'],
              [2, 'bbb'],
              [3, 'ccc']
           ]) 처럼도 가능
                                             
      
    method
       mapName.set("keyname", "value")
           - 특정 map에 "keyname" : "value" 추가하는 함수
           - update된 map을 return함

        ex) rest.set(1, "kim") // rest라는 map에 {1=>"kim"} 추가됨
             rest.set(2, "kin").set(3, "sam") // rest라는 map에 {2=>"kin"}, {3=>"sam"} 추가됨
                                                   // 이는 map.set이 map 자신을 return하기 때문에 가능

       mapName.get(keyname) 
            - map에서 keyname와 이어진 value return
            - ex) console.log(rest.get(1)) // "kim" 출력

       mapName.has(keyname)
            - map에서 특정 키가 있는 지 boolean로 반환

       mapName.delete(keyname) // boolean return
            - map에서 특정 키 제거 

        mapName.size
            - map의 크기 return

        mapName.clear();
            - map의 요소 전부 제거 

        cf) 
          const rest = new Map();
          rest.set([1,2], "first arr");
          console.log(rest.get([1,2])); // undefined 출력
          ? : rest.set 내부의 [1,2]와 rest.get 내부의 [1,2]는 자료구조와 내부 요소만 같을 뿐, reference가 다르기 때문

         그렇다면 "first arr"을 참조하기 위해서는 어떻게 해야 할까?
             - const arr = [1,2] 이용
             - const rest= new Map();
               rest.set(arr, "first arr");
               console.log(rest.get(arr)); // "first arr" 출력 



    covert obj to map
         const newMap = new Map(Object.entries(obj));
             - Object.entries의 return이 arr이기 때문

    convert map to array
          spread 연산자 이용
              const arr = [...rest];

    map으로 key, value 보이기
        console.log(newMap.keys());
         console.log(newMap.values());
         console.log(newMap.entries());

   어떤 자료구조를 사용해야 하는가?
          1. 간단한 list일 경우
                 - arr, sets
           2. key / value 짝이 있는가?
                 - object, map

            
           현재 js는 web api에서 데이터를 주로 받고 있고,
           이는 json이라는 데이터 형태로 옴(key, value 형태의 문자열로 이루어진 데이터)
           
              arr vs set
                   arr
                      - when need ordered list of values
                      - use when you need to manipulate data

                   set     
                      - need to work with unique data
                      - high performace is needed(탐색, 삭제 등이 배열보다 더 빠르기 때문)
                      
      
              obj vs map
                  obj
                     - more tradiotional key / value store
                     - .이나 []로 보다 쉽게 접근이 가능함
                     - method이 필요하거나, json data 사용 시 object 사용해야
                      
                   map
                      - better perforamance
                      - key can be any data type
                      - key가 string이면 안 되는 경우에 사용

    
   set(iterable)
  - 중복된 값이 없는 자료구조
   - 선언 
        const orderSet = new Set([1, 2, 3]);
            // set 안에는 iterable이 와야 함(주로 배열)
            // 이 때, 배열 안에 중복된 값을 입력해도 만들어질 때는 중복되는 값은 삭제됨

           // 출력 시 {1,2,3} 출력

   - set 크기
        - console.log(orderSet.size); // 3

   - 특정 요소를 가지고 있는지
        - console.log(orderSet.has(2)) 

   - 요소 추가
         -orderSet.add(4);

    - 요소 제거
         - orderSet.delete('3');

    - 요소 전부 제거
          - orderSet.clear();

     - set에는 배열과 달리 index가 없음 / set에서 특정 데이터 출력 불가능(순회는 가능) (오직 있느냐 없느냐만 확인 가능)

     - set 순회 // set 역시 arr과 같이 iterable object이므로, for-of 사용 가능
          - for(const order of orderSet){
                console.log(order);
              }

      - set을 배열로 바꾸고 싶다면? - spread 연산자 이용
      - ex)
           const arr = [1,2,2,3,3,3,4];
           const uniqueArr = [...new Set(arr)];
           console.log(uniqueArr) // 1,2,3,4

     - ex) 문자열 안에 서로 다른 철자가 몇 개 있는지 파악
          - const str = "aaabbccd";
          - console.log(new Set(str).size);

 
 
       
             

'TIL > JavaScript' 카테고리의 다른 글

Call, Apply, Bind  (0) 2022.09.27
String Method  (0) 2022.09.02
Class  (0) 2022.07.15
배열 관련 함수  (0) 2022.05.22
배열(기초)  (0) 2022.05.21