-
#JavaScript Grammar_Map과 SetJavascript 2023. 10. 19. 12:13
# Map이란?
Map은 key-value pair를 저장하는 객체와 비슷함.
객체와 달리 key로 사용할 수 있는 모든 유형을 사용가능.
key가 정렬된 순서로 저장되기 땨문에, 추가한 순서로 반복할 필요가 없음.
# Map의 작업 수행
1) key-value pair 추가 및 검색(set)
2) key-value pair 삭제
3) 모든 key-value pair 제거(clear)
4) Map 크기 및 존재 여부 확인(size)
#***Map 주요 메서드와 프로퍼티
1) new Map() – 맵을 만듬.
2) map.set(key, value) – key 를 이용해 value 를 저장.
3) map.get(key) – key 에 해당하는 값을 반환하고 key 가 존재하지 않으면 undefined 를 반환.
4) map.has(key) – key 가 존재하면 true, 존재하지 않으면 false 를 반환.
5) map.delete(key) – key 에 해당하는 값을 삭제.
6) map.clear() – 맵 안의 모든 요소를 제거.
7) map.size – 요소의 개수를 반환.# Map의 생성 및 사용
`new Map()`을 사용하여 새로운 Map 객체를 만듬.
`set()` 메서드를 사용하여 특정 키와 값을 Map에 추가.
`get()` 메서드를 사용하여 지정한 키에 해당 값을 가져옴.
// 새로운 Map을 만들려면 Map() 생성자를 사용 const myMap = new Map(); // Map에 값을 추가하려면 set() 메소드를 사용 myMap.set('key', 'value'); // Map에서 값을 검색하려면 get() 메소드를 사용 console.log(myMap.get('key')); // 'value' 출력
1) 예제에서 `myMap`은 `key`라는 키와 `value`라는 값을 가진 Map을 나타냄.
2) `myMap.get('key')`를 호출하여 `key`에 해당하는 `value`를 검색하고 출력함.
3) 결과로 `value`가 출력됨.
=> `Map` 객체는 key-value pair를 저장하고 효육적으로 관리할 수 있음.
=> 객체 키를 사용할 때 다른 자바스크립트 객체와 구별이 유용함.
# Map의 반복
Map에서는 keys(), values(), entries() 메소드를 사용하여 key, value 및 key-value pair를 쌍으로 반복할 수 있음.
#***for ...of 반복문
for of 반복문은 ES6에 추가된 전용 반복 구문임.
for of 구문을 사용하기 위해선 컬렉션 객체가 [symbol.iterator] 속성을 가지고 있어야만 함. (직접 명시 가능).
var iterable = [10, 20, 30]; for (var valueof iterable) { console.log(value);// 10, 20, 30 } /* +++iterator는 반복자라는 뜻 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조 아래 예시 코드에서myMap.keys() 으로 쓸 수 있는 이유는 myMap.key() 가 반환하는 값이 iterator이기 때문 */ const myMap = new Map(); myMap.set('one', 1); myMap.set('two', 2); myMap.set('three', 3); // 키 순회 for (const key of myMap.keys()) { console.log(key); } /* 출력: 'one' 'two' 'three' */ // 값 순회 for (const value of myMap.values()) { console.log(value); } /* 출력: 1 2 3 */ // 엔트리 순회 (키와 값의 쌍) for (const entry of myMap.entries()) { console.log(`${entry[0]}: ${entry[1]}`); } /* 출력: 'one : 1' 'two : 2' 'three : 3' */
- `Map` 객체를 생성하고 `Set` 메서드를 사용하여 키와 값을 저장.
- `myMap.keys()` 메서드를 사용하여 `Map` 객체의 키를 순회하고 각 키를 출력.
- `myMap.vlaues()` 메서드를 사용하여 `Map` 객체의 값들을 순회하고 각 값을 출력.
- `myMap.entries()` 메서드를 사용하여 `Map` 객체의 키와 값의 쌍을 순회하고 각 쌍을 출력.
=> `Map` 객체는 키와 값 사이의 관계를 쉽게 관리하고, 순회 및 검색시 효율적 자료구조로 활용함.
# Map의 크기 및 존재 여부 확인
Map의 크기를 확인하려면 size 속성을 사용
//# Map의 반복내용과 이어짐 console.log(myMap.size); // 3 출력
특정 키가 Map에 존재하는지 여부를 확인하려면 has()메소드를 사용.
//#***for ...of 반복문 내용과 이어짐 console.log(myMap.has('two')); // true 출력 console.log(myMap.has('two22')); // false 출력
# Set이란?
set은 고유한 값을 저장하는 자료구조.
주로 값만 저장하며, 키를 저장하지 않음.
값이 중복되지 않는 유일한 요소로만 구성됨.
# Set의 작업 수행
1) 값 추가 및 검색
2) 값 삭제
3) 모든 값 제거
4) set 크기 및 존재 여부 확인
# Set의 생성 및 사용
`new Set()`을 사용하여 새로운 Set객체를 만듬.
`add()` 메서드를 사용하여 Set에 값을 추가.
`has()` 메서드를 사용하여 Set에 특정 값을 검색.
// 새로운 Set 을 만들려면 Set() 생성자를 사용
const mySet = new Set();
// 이제 Set 에 값을 추가하려면 add() 메소드를 사용
mySet.add('value1'); mySet.add('value2');
//Set 에서 값을 검색하려면 has() 메소드를 사용
console.log(mySet.has('value1')); // true 출력1) 예제에서 `mySet`은 `value1`과 `value2`라는 두 값을 가진 Set을 나타냄.
2) `mySet.add('value1')` 및 `mySet.add('value2')`를 사용하여 값을 Set에 추가.
3) `mySet.has('value1')`를 호출하여 `value1` 값이 Set 내에 있는지 확인하고 `true`를 출력.
=> `Set` 객체는 중복되 값을 허용하지 않으며, 값을 고유하게 유지하는데 유용함.
=> 중복을 제거하거나 고유한 값의 집합을 관리하는데 도움이 됨.
# Set의 반복
Set에서는 values() 메소드를 사용하여 값을 반복할 수 있음.
const mySet = new Set(); mySet.add('value1'); mySet.add('value2'); mySet.add('value3'); for (const value of mySet.values()) { console.log(value); } /* 출력: value1 value2 value3 */
에제에서 `Set` 객체를 사용하여 set을 만들고 값을 추가한 다음 `for..of` 루프를 사용하여 Set 내의 값을 순회하고 출력하는 방법을 제시.
1) `new Set()`을 사용하여 새로운 Set 객체를 만듬.
2) `add()` 메서드를 사용하여 Set에 `value1`, `value2` 및 `value3`의 값을 추가.
3) `for...of` 루프를 사용하여 `mySet.vvalues()`를 통해 Set 내의 값을 순회.
4) 각 값을 `console.log()`를 사용하여 출력.
=> 결론: `Set`객체 중복을 허용치 않는 고유한 값의 컬렉션을 만들고 관리할 수 있으며, 효율적으로 순회 및 처리.
# Set의 크기 및 존재 여부확인
Set의 크기를 확인하려면 size 속성을 사용.
//# Set의 반복내용과 이어짐 console.log(mySet.size); // 3 출력
특정 값을 set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용.
//# Set의 반복내용과 이어짐 console.log(mySet.has('value2')); // true 출력 console.log(mySet.has('value52')); // flase 출력
# 결론
1) JavaScript에서 `Map`과 `Set`은 다른 유형의 자료 구조.
2) `Map`은 key-value pair를 저장하는 객체와 비슷
3) `Set`은 고유한 값을 저장하는 자료 구조.
4) `Map`과 `Set`은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있음.
'Javascript' 카테고리의 다른 글
#JavaScript Grammar_일급 객체로서의 함수 (0) 2023.10.19 #JavaScript Grammar_ES6문법 (1) 2023.10.19 #JavaScript Grammar_반복문(for/while/break/continue) (0) 2023.10.17 #JavaScript Grammar_배열 (2) 2023.10.17 #JavaScript Grammar_객체 (1) 2023.10.16