Map

// Map
// JS -> 객체, 배열 : 많고, 다양하고, 복잡한 프로그램을 만들어 왔지만
// 그럼에도, 현실세계 반영하기에는 좀 많이 어려웠다.
// Map, Set 추가적인 자료구조가 등장했다.

// Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리 
// -> 기존의  배열 객체보다

// 1. Map
// - Key / Value 
// - Key에 어떤 데이터타입(유형)도 다 들어올 수 있다.(객체에서는 문자만 들어감)
// - Map은 키가 정렬된 순서로 저장되기 때문이다. 
// 기능 : 검색, 삭제, 제거, 여부확인 등

const myMap = new Map(); // 생성 
myMap.set('key', 'value'); // 프로퍼티 추가

// ...
// ...

let get = myMap.get('key') // 접근
console.log(get); 

// Map를 사용하는 이유는 대량의 데이터를 처리 하기 위함
// 반복적인 부분이 상당히 중요하다
// method : keys(), values(), entries() ... 일단 세 가지만 알고 가자

const myMap = new Map();
myMap.set("a",1);
myMap.set("b",2);
myMap.set("c",3);

console.log(myMap); // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }
// 객체도 배열도 아닌 다른 자료 구조이다

console.log(myMap.keys()); // [Map Iterator] { 'a', 'b', 'c' }  
// Iterator : 반복자

for (const key of myMap.keys()){ 
    // const로 변수를 만들었는데 
    // 반복문이 끝날 때마다 const key는 사라지는 것인가
    // 아니면 각각의 스코프마다 따로 존재하는 것인가

    console.log(key);
    // 지금은 단순 출력만 했지만 myMap의 key가 하나씩 돌아갈 때마다
    // -> 여기선 a b c가 순서대로 key에 하나씩 전달되면서 3번 반복한다 
    // 필터링을 하거나 어떤 데이터를 입력하는 등의 다양한 처리가 가능하다

}

console.log(myMap.values());// [Map Iterator] { 1, 2, 3 }
for (const value of myMap.values()){
    console.log(value);
    // key만이 아니라 value만 가져오는 것도 가능하다
}

console.log (myMap.entries()); 
//[Map Entries] { [ 'a', 1 ], [ 'b', 2], [ 'c', 3 ] }
for(const entrie of myMap.entries()){
    console.log(entrie);
    // 주석 안달아도 알겠지 모르면 찍어봐야지
}

console.log(myMap.size);// map의 사이즈(길이)
console.log(myMap.has("b")); // key 기반 검색
// 저 키가 있냐 -> 불리언 값으로 알려준다

강의를 듣다가 for in과 for if의 용도가 뭐가 다른가 하고 의문이 들어 잠깐 검색을 해봤다

결론은 for of문은 순서가 있는 경우 → 배열이나 Map의 경우 순서대로 반복해준다

for in문은 순서가 없는 경우에 주로 사용하고 보이지 않는 프로토타입 속성의 인덱스까지 모두 돌며 반복한다 (프로토 타입이 뭐냐고? 나도 몰라 분명 공부했는데 모르겠어 머릿 속에 있었는데 없네)

그리고 언뜻 순서대로 나오는 것 같지만 크고 복잡한 코드 안에서는 예상치 못한 에러가 발생할 수 있다

추가로 보이지 않는 것들도 순환을 해주니까 디버깅할 때 유용하다고 한다(지금 수준에선 몰라도 된다 )

 

정리.

참고한 블로그의 필자가 마지막에 한 말이다

 

초보자를 위한 오늘의 요지, 배열에서는 for.. of 를 사용하고 오브젝트에서는 for.. in을 사용하자.

 

당연하게도 for.. of는 인덱싱 순서가 중요하고, for.. in은 순서없이 동작한다.

for.. in은 눈에 보이지 않는 속성들까지 반복하며 다 돌아다닌다 카더라~!!!

 

역시나 Javascript의 세계는 심오하거나 개떡 같거나^^;

 

네이버 블로그 [즐코딩]  참고