[ TIL ] [ 정규과정 : 프로그래밍 기초2 ] Map함수

프로그래밍 기초 2 시험으로 알고리즘 시험을 쳤다. 

시험을 치고나서 Map 함수에 대해서 추가로 공부해 보았다.

 

---

 

 

Map에대한 설명 : 

Map - JavaScript | MDN (mozilla.org)

Map - JavaScript | MDN

기존에 JS기초 문법에서 map에대한 공부 : 

2023.08.01 - [2. JS문법 종합] - [ JavaScript 문법 종합반 2주차 (5)] MAP 사용 방법

[ JavaScript 문법 종합반 2주차 (5)] MAP 사용 방법

 

---

관련한 YOUTUBE : 

유튜브 개발자의 품격 [ new Map 사용관련 ]

---

 

 

아래내용은 첨부한 상단 개발자의 품격을 보고 공부한 내용을 정리한것이다. 

기존 object와 비교해보면, object는 숫자를 입력할 때 user.1 이렇게 해서 입력이 바로 불가능하다.

let user = {};

user[1] = "112233" 
// ** 키를 넣으려면 [] 대괄호 안에 숫자를 넣어서 숫자값을 입력해야한다. ** //
const key = "ID"; 
user.ID = "abc";
// 만약 ID의 key값이 user에의해 계산되어 나오는것이라면 아래와같이 사용해야야함.
user[key] = "abc";
// 따라서, object 접근방법이 어떤것은 .으로입력가능, 
// 어떤것들은 []대괄호로 입력해야하는 불가한것들이 존재함.(일관성이없음)

Map은 숫자를 바로 선언 할 수 있다. 

let userMap = new Map();

userMap.set(1,"112233"); // 숫자를 바로 선언가능
userMap.set(key,"112233"); // 특정 key 값도 바로 선언이 가능하다.

// ** 일관성 있게 사용이 가능. 
(map : key에 스트링,숫자,object도 올수있음 function이 잡힐수 있음.)**//

 

예를 들어 콘퍼런스를 열고 방문객이 여러 명이 있어 아래와 같이 데이터가 쌓여있을 때,어느 지역에서 몇 명이 왔는지 알고 싶다!

let guestArr = [
    {name : "A", city: "서울"},
    {name : "B", city: "제주"},
    {name : "C", city: "부산"},
    {name : "D", city: "제주"},
    {name : "E", city: "제주"},
    {name : "F", city: "부산"},
    {name : "G", city: "서울"},
    {name : "H", city: "서울"},
    {name : "I", city: "서울"},
    {name : "J", city: "서울"},
 ];
 
 //{
  '서울': [
    { name: 'A', city: '서울' },
    { name: 'G', city: '서울' },
    { name: 'H', city: '서울' },
    { name: 'I', city: '서울' },
    { name: 'J', city: '서울' }
  ],
  '제주': [
    { name: 'B', city: '제주' },
    { name: 'D', city: '제주' },
    { name: 'E', city: '제주' }
  ],
  '부산': [ { name: 'C', city: '부산' }, { name: 'F', city: '부산' } ]}

기존  object를 이용한다면

let oGuest = {};
guestArr.forEach(item=>{
    if(!oGuest[item.city] ){  
        oGuest[item.city]=[]    
  }
    oGuest[item.city].push(item);

})

//** If 문에서 조건절을 비교 해주는 값은 true false 리턴해주는 개념이 아님 **//

map함수를 이용한다면

let mapGuest = new Map();

guestArr.forEach(item=> {
    if(!mapGuest.has(item.city)){     //** has -> iteam이 이 있는지 true false 출력 ** //
      mapGuest.set(item.city, []);
    } 

    mapGuest.get(item.city).push(item);
   
});

// ** has 내장함수 key존재유무 true/false 리턴해줘서 명확함 ** //

 

 

 

---

알고리즘 주차가 끝이 났다.. 나 꽤 힘들었네 ㅠ..

시험에 아쉬움이 남지만 그래도 좀 후련했다. 

다음부터 node 배우기 시작한다.

조금 설레고 어려울 것 같다는 생각이 계속 들어서 걱정도 되지만,

잘해야지! 잘할 수 있다!!!!!!

잘할 수 있을 거다?