NBC - JS 2주차 강의 정리 : Map, Set

2024. 7. 24. 15:02·프론트엔드/React

 

 

Map, Set

Map, Set 의 목적

기존의 객체 또는 배열보다 데이터의 구성, 검색, 사용 등을 효율적으로 처리 가능

 

1. Map

key, value를 저장

Key에 어떠한 유형(데이터타입)에도 다 들어올 수 있음 (Map은 키가 정렬된 순서로 저장되기 때문)

기능 > 검색, 삭제, 제거, 여부 확인

// 기본 문법

const myMap1 = new Map();
myMap.set("key", "value");
// ...
myMap.get("key");

 

 

대량 데이터를 처리하기 위함이기 때문에 반복이 중요하다.

method: keys(), values(), entries()

 

iterator

반복자라는 의미.
요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어 있는 자료구조.
하나하나 순회하면서 돌면서 체크해  가면서 처리할 수 있게

 

 

interator을 사용한 반복의 모습

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
console.log(myMap.values()); // [Map Iterator] { 1, 2, 3 }

 

for ~of 사용

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);

// key
for (const key of myMap.keys()) {
  console.log(key);
} // one two, three 출력 > 하나하나 순회를 돌며 출력을 해줌

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

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

 

 

크기 알아내는 법

console.log(myMap.size); // map의 사이즈(길이) 3출력
console.log(myMap.has("two")); // true 출력

 

 


 

 

2. Set

고유한 값을 저장하는 자료구조

값만 저장 (key 저장하지 않음)

값이 중복되지 않는 유일한 요소로만 구성

 

값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

 

const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2");

console.log(mySet.size); // 2 출력 (같은게 중복되서 한개로 처리)
console.log(mySet.has("value3")); // 존재하는지 찾기위해 has 메서드 사용 / false

 

 

interator 반복

const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value2");

for (const value of mySet.values()) {
  console.log(value);
}

// value1
// value2 출력

'프론트엔드 > React' 카테고리의 다른 글

NBC - JS 개인프로젝트 : scroll indicator, 모달창 구현  (0) 2024.07.29
NBC - JS 개인프로젝트 : api로 받아온 데이터 화면에 뿌리기 (promise.all, aysnc, await)  (0) 2024.07.26
NBC - JS 2주차 강의 정리 : 일급 객체로서의 함수  (1) 2024.07.24
NBC - JS 2주차 강의 정리 : 구조분해할당, 전개 구문(Spread Operator)  (0) 2024.07.24
NBC - JS 1주차 강의 정리 : 반복문  (2) 2024.07.23
'프론트엔드/React' 카테고리의 다른 글
  • NBC - JS 개인프로젝트 : scroll indicator, 모달창 구현
  • NBC - JS 개인프로젝트 : api로 받아온 데이터 화면에 뿌리기 (promise.all, aysnc, await)
  • NBC - JS 2주차 강의 정리 : 일급 객체로서의 함수
  • NBC - JS 2주차 강의 정리 : 구조분해할당, 전개 구문(Spread Operator)
장쫑이이
장쫑이이
  • 장쫑이이
    JongHoy
    장쫑이이
  • 전체
    오늘
    어제
    • 코딩공부하기 (41)
      • 프론트엔드 (41)
        • Next.js (12)
        • React (16)
        • TypeScript (2)
        • 상태관리 (1)
        • HTML&CSS (1)
        • 기타 (9)
      • 과거 공부 내용 (0)
        • JSCODE 그룹스터디 (0)
        • JS 객체 지향 프로그래밍 (0)
        • 리엑트 (0)
        • 제로초 - 웹 게임을 만들며 배우는 리엑트 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    isNan
    setAttribute
    While문
    github
    destructuring
    팀프로젝트
    git
    map
    styled-components
    유클리드 호제법
    LastIndexOf
    토글
    행렬의 덧셈
    reduce
    속성 추가
    useState
    slice
    Filter
    이중 for문
    필터링
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
장쫑이이
NBC - JS 2주차 강의 정리 : Map, Set
상단으로

티스토리툴바