[JavaScript] Map&Set

Map?

• 키와 값의 쌍으로 이루어진 컬렉션(객체와 유사)
• 이터러블(반복 할 수 있는 객체)의 일종
• 이터러블의 기능(for...of 문, spread 연산자, destructuring) 사용 가능
• 객체나 배열 등의 참조 값을 키로 사용 가능
• 키와 값을 자주 변경해야하는 경우 적합하도록 만들어짐

Map 사용 방법

// Map 생성
const map1 = new Map();

// set 메서드 - 키와 값의 쌍 추가
map1.set('name', 'kim');
map1.set('age', 20);
map1.set('address', 'Seoul');

console.log(map1);

// [[키 쌍]...] 배열로 생성 + 초기화
const map2 = new Map([
  ['name', 'kim'],
  ['age', 20],
  ['address', 'Seoul'],
]);

console.log(map2);


// 이미 키 값이 있을경우 덮어씀
map2.set('name', 'lee');

// has 메서드 - 키 포함여부 확인
console.log (
  map2.has('name'),
  map2.has('age')
);
// get 메서드 - 값에 접근
console.log(
  map2.get('name'),
  map2.get('age'),
  map2.get('address'),

  // 없는 키로 접근시 undefined 반환
  map2.get('phone')
);

// 참조값도 키로 사용 가능
const objKey = { x: 1, y: 2 };
const arrKey = [1, 2, 3];

map2.set(objKey, 'OBJ_KEY');
map2.set(arrKey, 'ARR_KEY');

// delete 메서드 - 요소 제거 & 성공 여부 반환
console.log(
  map2.delete('address'),
  map2.delete(objKey),
  map2.delete({x: 3, y: 4})
);

console.log(map2);

// add 메서드는 결과 맵을 반환
// 메서드 체이닝을 사용가능
const map3 = map2
.set('min', 'name')
.set(23, 'age')
.set('Busan', 'address');

console.log(map2, map3);

// size 프로퍼티 - 요소의 개수
console.log(
  map3.size
);
// 객체 Object 와 같이 keys, values, entries 메서드 사용 가능- 키 / 값 / [키, 값] 반환
console.log(
  map2.keys(),
  map2.values(),
  map2.entries()
);

// clear 메서드 - 모든 요소들을 삭제
map2.clear();

console.log(map2, map3);

Set?

• 배열과 다르게 동일한 값을 여러번 포함할 수 없음
• 이미 존재하는 값을 추가시 변화가 없음
• 값들의 순서가 무관해짐
• 알고리즘, 중복제거에 많이 사용됨

Set 사용방법

// Set 생성
const set1 = new Set();

// add 메서드 - 요소 추가
set1.add('banana');
set1.add('melon');
set1.add('strawberry');

console.log(set1);

// 중복된 요소 추가시 변화 없음
set1.add('banana');
set1.add('melon');

console.log(set1)

// 배열을 인자 넣으면 생성 + 초기화
// 중복된 요소 제거
const set2 = new Set(['bananan','melon','stawberry','banana']);

console.log(set2); // ['bananan','melon','stawberry']

// has 메서드 - 요소 포함여부 확인
console.log(
  set2.has('bananan'),
  set2.has('melon'),
  set2.has('watermelon')
);

// delete 메서드 - 요소 제거 & 성공 여부 반환
console.log(
  set2.delete('banana'),
  set2.delete('watermelon')
);

console.log(set2);

// add 메서드는 결과 셋을 반환
const set3 = set2.add(2);

console.log(set3);

// size 프로퍼티 - 요소의 개수
console.log(
  set2.size
);

// 객체 Object 와 같이 keys, values, entries 메서드 - 값 / 값 / [값, 값] 반환
// key를 value와 같이 취급
console.log(
  set2.keys(),
  set2.values(),
  set2.entries()
);

// clear 메서드 - 모든 요소들을 삭제
set2.clear();
console.log(set2, set3);

const obj1 = new Set()
.add({ x: 1, y: 2 })
.add({ x: 1, y: 2 })
.add([1, 2, 3])
.add([1, 2, 3]);

// 각기 다른 것으로 인식 (참조 주소가 다르므로)
console.log(objSet1);

const obj = { x: 1, y: 2 };
const arr = [1, 2, 3];

const obj2 = new Set()
.add(obj)
.add(obj)
.add(arr)
.add(arr);

// 같은 것들로 인식
console.log(objSet2)

iterable로서 Map & Set

• for...of 문 사용 가능
• spread 연산자 사용 가능
• destructuring 사용 가능

// Map
// for..of문 사용
const map1 = new Map([['a',1],['b',2],['c',3],['d',4],['e',5]]);
for([key, value] of map1) {
console.log(key, value)
}

// spread 연산자 사용
const arr = [...map1];
console.log(arr);

const [x, y] = map1;
console.log(x);
console.log(y);

// destructuring
const [a, b, ...c] = map1;
console.log(a);
console.log(b);
console.log(c);

// set
// for..of문 사용
const set1 = new Set(['a','b','c','d','e']);
for(item of set1) {
  console.log(item);

// spread 연산자 사용
const arr = [...set1];
console.log(arr);
  
// 활용 - 중복을 제거한 배열 반환
const arr1 = [1, 1, 1, 2, 2, 3, 4, 5];
const arr2 = [...new Set(arr1)];
console.log(arr2);

// destructuring
const [x, y] = set1;
console.log(x);
console.log(y);
  
const [a, b, ...c] = set1;
console.log(a);
console.log(b);
console.log(c);