일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- webpack
- 서버 사이드 렌더링
- 프로미스
- CSS
- props와 state 차이점
- 호이스팅
- MPA
- 이벤트 버블링
- async/await
- 변수 생성 단계
- 브라우저 렌더링원리
- 자바스크립트의 클래스
- react
- polyfill
- 얕은 복사
- 로컬 스토리지
- 자바스크립트 함수
- 가상 dom
- 세션 스토리지
- 실행 컨텍스트
- 리액트
- 스코프 체인
- 리액트의 생명 주기
- 클라이언트 사이드 렌더링
- undeclared
- 주소창에 naver 입력시 일어나는 일
- 자바스크립트
- 이벤트 캡처링
- 깊은 복사
- CORS
Archives
- Today
- Total
Gapus Dev Blog
[자바스크립트] Map과 Set 본문
Map
- 설명
- 키와 값의 쌍을 저장하는 컬렉션
- 객체와 유사하지만, Map은 키에 다양한 데이터 타입 사용 가능
- 객체와 달리, Map은 순서를 보장하고 키의 중복을 허용하지 않는다.
- 데이터를 쉽게 저장하고 검색 가능
- 다양한 메서드를 제공해 데이터를 추가, 삭제, 수정, 조회 가능
- 사용해야 하는 경우
- 키와 값 쌍으로 데이터를 저장하고자 할 때
- 키와 값을 쌍으로 저장하기 때문에, 데이터를 키와 값 형태로 관리 해야할 때 유용
- 사용자 정보를 키로 하고 해당 사용자의 데이터를 값으로 저장하는 경우
- 순서가 중요한 경우
- 데이터의 순서를 보장하기 때문에, 데이터를 추가한 순서대로 순회하거나 처리할 때 유용
- 작업 목록을 순서대로 처리하고자 할 때
- 키와 값 쌍으로 데이터를 저장하고자 할 때
- 동작 원리
- Map은 내부적으로 해시 테이블(hash table)을 사용하여 데이터를 저장하고 검색
- 해시 테이블은 효율적인 데이터 접근을 위해 키-값 쌍을 해시 함수를 통해
해시값으로 변환한 후, 내부 배열에 저장 - 데이터 추가
- set(key, value) 메서드를 사용
- 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에 저장
- 동일키 존재 시, 해당 키에 대응하는 값을 업데이트
- 데이터 조회
- get(key) 메서드를 사용하여 특정키에 해당되는 값 검색
- 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에서 검색 후 반환
- 해시값으로 변환된 키를 이용하여 배열 내부에서 빠른 검색 진행
- 데이터 삭제
- delete(key) 메서드를 사용하여 특정 키에 해당되는 값을 삭제
- 키를 해시 함수를 통해 해시값으로 변환, 내부 배열에서 검색 후 해당 요소 제거
- 예시
// Map 생성
let map = new Map();
// 데이터 추가
map.set("이름", "홍길동");
map.set("나이", 30);
map.set("성별", "남성");
// 데이터 조회
console.log(map.get("이름")); // 출력: 홍길동
console.log(map.get("나이")); // 출력: 30
// 데이터 삭제
map.delete("성별");
// 데이터 유무 확인
console.log(map.has("나이")); // 출력: true
console.log(map.has("성별")); // 출력: false
Set
- 설명
- 중복되지 않는 값을 저장하는 컬렉션
- 유일한 값만을 저장
- 순서를 유지하지만, 인덱스로 접근 불가
- 배열과 비슷한 형태
- 값의 추가, 삭제, 확인 등 가능
- 사용해야 하는 경우
- 고유한 값을 유지해야 할 때
- 중복된 값을 허용하지 않기 때문에, 고유한 값을 저장하고자 할 때 유용
- 중복을 제거한 목록을 유지하거나 고유한 태그 목록을 저장하고자 할 때
- 값의 존재 여부를 확인해야 할 때
- 값의 존재 여부를 빠르게 확인할 수 있는 메서드를 제공
- 특정 값이 이미 존재하는지 여부를 확인하고자 할 때
- 고유한 값을 유지해야 할 때
- 동작 원리
- Set은 내부적으로 해시 테이블(hash table) 또는 이진 검색 트리(binary search tree)를
사용하여 고유한 값을 저장 ,검색 - 데이터 추가
- add(value) 메서드를 사용하여 값을 추가
- 내부적으로 값의 고유성을 확인하고, 중복된 값을 저장하지 않는다.
- 값을 해시 함수롤 통해 해시값으로 변환, 내부 데이터 구조에 저장
- 데이터 조회
- 인덱스를 사용하여 값을 직접 조회 불가
- forEach() 메서드나 반복문을 사용하여 Set의 값을 순회하며 조회 가능
- 데이터 삭제
- delete(value) 메서드를 사용하여 특정 값을 삭제
- 값을 비교하여 해당 값이 존재 할 경우 삭제
- 내부 데이터 구조에서 해당 값을 검색하여 제거
- Set은 내부적으로 해시 테이블(hash table) 또는 이진 검색 트리(binary search tree)를
- 예시
// Set 생성
let set = new Set();
// 데이터 추가
set.add("사과");
set.add("바나나");
set.add("딸기");
set.add("사과"); // 중복된 값은 추가되지 않음
// 데이터 조회
console.log(set.has("사과")); // 출력: true
console.log(set.has("수박")); // 출력: false
// 데이터 삭제
set.delete("바나나");
// 데이터 순회
set.forEach((value) => {
console.log(value);
});
'프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] 스코프에 대해 (1) | 2023.11.17 |
---|---|
[자바스크립트] == 과 === 에 대해서 (0) | 2023.11.14 |
[자바스크립트] 얕은 복사, 깊은 복사 (0) | 2023.11.12 |
[자바스크립트] ES6 이후 생긴 주요 기능 (0) | 2023.11.11 |
[자바스크립트] 리터럴 (0) | 2023.11.10 |