ES6부터 Map, Set 자료형도 추가되었다.
아직 자주 쓰이지는 않지만 미래에 우리를 생각하며 배워보자!
Map
: Object 자료형과 똑같이 key, value 형태로 자료를 저장할 수 있는 자료형이다.
► Map에 값을 넣는 방법
1. set 이라는 키워드를 사용
2. [ ] 대괄호로 자료를 한 번에 넣기
let m = new Map();
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);
//--------------------
let person = new Map();
let person = new Map([
['age', 20],
['name', 'Kim']
]);
👉 출력해보면 기존 object와는 다르다.!!

1. 화살표 " => "
Map 자료형은 자료의 연관성을 표현하기 위해 쓰기 때문에 화살표로 표현된다.
2. key, value값에 모든 자료형을 집어넣을 수 있다.
(object은 자료이름으로 글자만 가능)
Map 다루는 법
person.get('age'); //자료 꺼내는 법
person.has('age'); // 값이 있는지 확인하기
person.delete('age'); //자료 삭제하는 법
person.size; //자료 몇갠지 알려줌
// Map의 순환
for (var key of person){
console.log(key)
}
// Map의 값에 접근
console.log(person.keys());
console.log(person.values());
console.log(person.entries());
Set
: 중복 자료를 허용하지 않는 Array 비슷한 것.
(중복 데이터를 방지하고 싶을 때 쓰시면 유용한 자료형)
let 출석부= new Set([ 'john' , 'tom', 'andy', 'tom' ]);
console.log(출석부); // Set(3) {'john', 'tom', 'andy'}
결과를 보면 tom이라는 중복자료 허용하지 않고 , 배열의 크기도 3이라는 것을 확인할 수 있다.!
또한, { } 중괄호 처럼 결괏값이 나온다. 다시 배열의 형태로 하려면?
[...출석부] 이렇게 스프레드 문법(...)을 사용하면 된다~
set 다루는 법
let s = new Set('abcdeeeeeeeee');
// Set에 값을 추가하기
s.add('f');
console.log(s);
// Set을 순환하기
for (var variable of s) {
console.log(variable);
}
// 값이 배열인 경우
let ss = new Set('abcdeeeeeeeee'.split(''));
console.log(ss); // Set(5) {'a', 'b', 'c', 'd', 'e'}
// Set의 값을 제거하기
ss.delete('b');
// Set의 값을 확인하기
console.log(ss.has('a'));
// Set의 모든 값을 제거하기
ss.clear
Set을 이용해서 교, 합, 차 집합 구하기
let a = new Set('abc');
let b = new Set('cde');
// 교집합
let cro = [...a].filter(value => b.has(value)) // ['c']
// 합집합
let union = new Set([...a].concat(...b)) // {'a', 'b', 'c', 'd', 'e'}
// 차집합
let dif = new Set([...a].filter(x => !b.has(x))); //{'a', 'b'}
결론
둘 다 자주 쓰이지는 않지만 나중에 알고리즘 공부할 때 유용하게 쓰인다고 한다.
key, value형식으로 저장하려면 Object 쓰시면 되지만
name이 Kim과 연관되어있다~라고 저장하고 싶으면 Map을 쓰면 된다.
Set은 Map보다는 그나마 많이 쓰인다고 한다...
특히 Array의 데이터 중복 제거할 때 많이 쓰일 것 같다.
[참고]
코딩 애플
'JavaScript' 카테고리의 다른 글
| | JavaScript | tab기능구현하기 ( 함수로 축약, dataset기능) (0) | 2022.06.06 |
|---|---|
| | JavaScript | setTimeout() 후에, setInterval() 마다 (0) | 2022.06.06 |
| | JavaScript | 'DOM' preventDefault() 마우스 우클릭 제한, stopPropagation() 이벤트 전파 막기 (0) | 2022.05.18 |
| | JavaScript | 'DOM' 이벤트 흐름(Event Flow), target, currentTarget, 이벤트 위임 (0) | 2022.05.18 |
| | JavaScript | 'DOM' 제어 명령어 (0) | 2022.05.17 |