[JS] Map / Set

또띠·2023년 7월 26일
0

JavaScript

목록 보기
9/23
post-thumbnail
post-custom-banner

Map

const myMap = new Map();

myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
console.log(myMap); // Map(3) { 'one' => 1, 'two' => 2, 'three' => 3 }

Map()을 사용할땐 앞에 new를 붙여 사용한다.
그리고 set(ket , keyValue) 형태로 추가할 수 있다.
참고로 정렬된 순서대로 저장 된다.

이전에 배열 메소드와 동일하게 사용할 수 있다.
복습을 위해 한번 더 적어보자면...

1. 키를 가져와줘! ⭐️ keys() ⭐️

for(const key of myMap.keys()) {
    console.log(key); // one two three
}

2. 키 값을 가져와줘! ⭐️ values() ⭐️

for(const value of myMap.values()) {
    console.log(value); // 1, 2, 3

3. 키와 키 값을 가져와줘! ⭐️ entries() ⭐️

for(const entry of myMap.entries()) {
    console.log(entry); // ['one',1], ['two',2], ['three',3]
}


아! 그리고 학습하다 알게 된 내용이 있는데 바로
'사이즈와 값을 갖고 있는지 검색할 수 있는 메소드' 가 있다는 것!

나중에 편리하게 사용할 것 같아서 함께 정리 해 본다.

사이즈 구하기 ⭐️ size ⭐️

myMap.size // 3

위의 set된 내역이 총 3개라서 size로 콘솔을 출력해보면 3이 나오는 것을 확인 할 수 있다.

존재 여부 확인 하기 ⭐️ has ⭐️

myMap.has("two") // true

key를 기반하여 true or false로 검색 결과를 알려 준다.

has를 사용하여 myMap에 "two"가 있는지를 물어보는데 있다면 true를 없다면 false로 알려준다.
jQuery 의 hasClass()가 생각나서 그런지 반가웠다. (jQuery가 js에서 나왔으니 당연하겠지만...😅)



Set

const mySet = new Set();

mySet.add('value1'); // value만 넣는다!
mySet.add('value2');
mySet.add('value3');
mySet.add('value5');
mySet.add('value8');

Set()을 사용할때도 앞에 new를 붙여 사용한다.
그리고 add()안에 value만 넣는다! 그 이유는 값만 저장하기 때문이다. 키를 저장하지 않기 때문이다.
이는 고유한 값을 저장하는 자료구조이기 때문이며 값이 중복되지 않는 유일한 요소로만 구성된다.

그래서 만약 mySet.add('value2')를 2번 넣는다고 해도 size 로 확인 하면
동일하기 때문에 2가 아닌 1로 출력된다.

그리고 당연스럽게도(?) 값만 있기 때문에 Map과는 다르게 값만 뽑아내기 때문에
values() 만 사용한다.

for(const value of mySet.values()) {
    console.log(value);
  // value1 value2 value3 value5 value8
}
profile
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨
post-custom-banner

0개의 댓글