Map, Set

mangojang·2023년 1월 19일

JavaScript

차근차근 쌓아가는 JS 기초

목록 보기

11/20

✍️ 자료 구조 공부하다가 새롭게 알게 된 자료 구조가 있어 정리 해 보았다. 주로 객체와 배열을 많이 사용하는데, Map, Set도 상황에 따라 잘 사용 하면 훨씬 더 효율적인 코딩을 할 수 있을 것 같다.

Map

키가 있는 데이터를 저장 → 객체와 비슷
객체와의 차이점
1. key에 다양한 자료형 올 수 있음.
  (객체 : key에 string, symbol 만 올 수 있음.)
2. property 의 순서를 기억함.
  (객체는 기억 못 함.)
3. 요소 추가, 삭제 시 성능이 더 뛰어남.
데이터의 개수를 size함수를 통해 바로 얻을 수 있음.

method

new Map() : map 생성

let map = new Map();

[key, value]쌍인 배열로 Map 생성하기

let map new Map([
	['1', '사과'],
	[2, '바나나'],
	[true, '망고']
]);

map.set(key,value) : key를 이용해 value 지정
```
map.set('1', '사과');
```
chaining
- map.set은 호출 할 때 마다 자신을 반환함. → chaining 가능
```
map.set('1', '사과')
	.set(2, '바나나')
	.set(true, '망고');
```
map.get(key): key에 해당하는 value 값 반환. (key 가 없으면 undefined 반환)
```
map.get('1'); // 사과
```
map.has(key): key를 가지고 있는지, 존재에 대한 유무. true/false 로 반환.
```
map.has('1'); // true
```
map.delete(key): key에 해당하는 값 삭제.
```
map.delete('1');
```
map.clear(): map 안의 모든 요소 제거
```
map.clear();
```
map.size: 요소의 개수 반환.
```
map.size; 
```

map.keys() : key를 모은 iterable객체를 반환.

let recipeMap = new Map([
  ['apple', 35],
  ['banana', 15],
  ['mango', 50]
]);

for (let fruit of recipeMap.keys()) {
  alert(fruit); // apple, banana, mango
}

map.values() : value를 모은 iterable객체를 반환.

for (let amount of recipeMap.values()) {
  alert(amount); // 35, 15, 50
}

map.entries() : [key, value] 형태의 iterable 객체 반환.
```
 alert(recipeMap.entries()); // [object Map Iterator]
```

forEach

recipeMap.forEach( (value, key, map) => {
  console.log(`${key}: ${value}`);
});

//apple: 35
// banana: 15
// mango: 50

객체 → Map

Object.entries()를 이용하여 객체를 [key, value]쌍인 배열 형태로 바꾼 후, Map 생성

let user = {
  name: "mangojang",
  job: "developer"
};

let userMap = new Map(Object.entries(user));

alert( userMap.get('name') ); // mangojang

Map → 객체

map.entries() 를 이용하여 [key, value]쌍인 배열로 반환하고, Object.fromEntries() 를 이용하여 [key, value]쌍인 배열을 객체로 바꿈.

let userObj = Object.fromEntries(userMap.entries()); 

// userObj = { name: "mangojang", job: "developer"}

alert(userObj.name); // mangojang

활용

자료 재 편집 쉽게 하기

guestArr 배열을 도시 별로 묶어서 새로 자료 저장 하기

let guestArr = [
    {name:"A", city:"Seoul"},
    {name:"B", city:"Busan"},
    {name:"C", city:"Seoul"},
    {name:"D", city:"Sejong"},
    {name:"E", city:"Busan"},
    {name:"F", city:"Sejong"},
    {name:"G", city:"Dawgeon"},
    {name:"H", city:"Sejong"},
    {name:"I", city:"Dawgeon"},
    {name:"J", city:"Busan"},
    {name:"K", city:"Seoul"},
]

let Mguest = new Map();
guestArr.forEach(item => {
	//1. Mguset에 city와 같은 key 가 없으면 city를 key로 하고 빈배열을 value로 가지는 요소를 추가한다.
    if (!Mguest.has(item.city))   Mguest.set(item.city, []);
  //2. Mguest에서 city값을 key로 하는 value(array)를 가져오고 거기에 item 을 push 한다.  
		Mguest.get(item.city).push(item);
});
 
console.log("[Map] : ", Mguest);

Set

key가 없는 값이 저장 됨.
중복을 허용하지 않음.

method

new Set( iterable) : Set 생성.

let set = new Set();

iterable 객체(ex) 배열)를 전달 받으면 그 안의 값을 복사해 Set에 넣어줌.

let fruitArray = ['mango', 'apple', 'banana'];
let fruitSet = new Set(fruitArray);

console.log(fruitSet); // {'mango', 'apple', 'banana'}

set.add(value) : value를 추가하고 자기 자신을 반환 함. → chaining 가능.

value를 동일 한 값을 아무리 넣어도 하나의 value 값만 저장 됨.

let set = new Set();

let mango = {name: 'mango'};
let apple = {name: 'apple'};
let banana = {name: 'banana'};

set.add(mango);
set.add(apple);
set.add(banana);
set.add(mango);
set.add(banana);

console.log(set); // {{name: 'mango'}, {name: 'apple'}, {name: 'banana'}}

set.delete(value) : value 제거. 제거 성공 여부에 따라 true/false 로 반환.
```
set.delete(apple); // true
```
set.has(value): value를 가지고 있는지, 존재에 대한 유무. true/false 로 반환.
```
set.has(apple); //false
```
set.clear(): set 안의 모든 요소 제거
```
set.clear()
```
set.size : 요소의 개수 반환.
```
console.log(set.size); // 3
```

set.keys(): 모든 값을 포함하는 iterable 객체 반환

for (let fruit of set.keys()) {
  console.log(fruit.name); // mango, banana
}

set.values(): set.keys()와 동일한 작업 실행. iterable 객체 반환

for (let fruit of set.values()) {
  console.log(fruit.name); // mango, banana
}

set.entries(): [value, value] 배열을 포함하는 iterable 객체 반환

for (let fruit of set) { // set.entries()와 같은 표현.
	console.log(fruit); // {name: 'mango'}, {name: 'banana'} 
  console.log(fruit.name); // mango, banana
}

forEach

value : 값, valueAgain: 같은 값 , set : set 자기 자신

set.forEach((value, valueAgain, set)=>{
	console.log(value);
});

활용

Array 의 중복된 요소를 제거 할 때 사용.

Array → Set → Array 로 변환 해서 중복 요소를 제거 함.

let fruits = ['mango', 'apple', 'banana', 'mango', 'apple'];
let fruitSet = new Set(fruits);
fruits = [...fruitSet];

console.log(fruits); // ['mango', 'apple', 'banana']