반응형
매우 짧게 알아보는 Map, Set 자료형
ES6부터 추가된 신자료형.
Map 자료형: key, value를 저장
⭐[목적] Map 자료형은 자료간의 연관성을 표현하기 위해 쓴다.
Object와 비슷하게 key, value를 저장하는데, 담는 형태가 다르다. 콜론(:)이 아니라 화살표(=>)로 담긴다.
var person = new Map();
person.set('name', 'Kim');
person.set('age', 20);
person; // Map {"name" => "Kim", "age" => 20}
name은 Kim과, age는 20과 연관이 되어 있다는 걸 나타낸다.
Object 자료형은 자료 이름으로 글자(string)만 가능했지만, Map 자료형은 다 가능하다.
숫자, array, ... 등 다 된다!
person.set(100, 'Kim');
person.set([1,2,3], '어레이');
person; // Mao {Array(3) => '어레이', 100 => 'Kim'}
Map에서 자료 꺼내는 법 -> get(key)
person.get('age'); // 20
Map에서 자료 삭제하는 법 -> delete(key)
person.delete('age');
Map에 자료 개수 세는 법 -> size
person.size; // 2
반복문으로 Map에서 자료 꺼내는 법 -> person.keys()
person.keys(); // MapIterator {Array(3), "age"}
person.keys()는 iterable하다. 그래서 person.keys()를 이용해서 for of를 사용하면 된다.
for (var key of person.keys()){
console.log(key);
}
// [1,2,3]
// age
Map 자료형에 직접 자료 집어넣을 땐 -> [ [key, value], ... ]
var person = new Map([
[[1,2,3], 'Kim'],
['age', 20]
])
Set 자료형
- 데이터 중복을 허용하지 않는 Array.
var 출석부 = ['john', 'tom', 'andy', 'tom'];
실수로 tom을 중복 작성했다! 근데
var 출석부2 = new Set(['john', 'tom', 'andy', 'tom']);
출석부2; // Set {'john', 'tom', 'andy'}
Set으로 작성하면 중복없이 저장할 수 있다.
Set 자료형에 자료 추가하기 -> add
출석부2.add('sally');
자료 제거하기 -> delete
출석부2.delete('sally');
자료 있는지 확인 -> has
출석부2.has('tom'); // true
몇개 들어있는지 확인 -> size
출석부2.size; // 3
Set 자료형 <-> Array 자료형 변환
활용문제 : Array의 중복자료를 제거하고 싶다면?
var 출석부 = ['john', 'tom', 'andy', 'tom'];
var 출석부2 = new Set(출석부);
근데 Set은 {중괄호}로 생겨서 Array로 다시 만들어줘야한다.
출석부 = [...출석부2];
간단하게 표현하자면,
출석부 = [...new Set(출석부)];
Set 자료형에 반복문 돌리기
array로 바꿔서 for문 돌리면 된다.
[...출석부]
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
[코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기 (0) | 2022.10.22 |
---|---|
[코딩애플] js part 3-10. Web Components: 커스텀 HTML 태그 만들기 (0) | 2022.10.22 |
[코딩애플] js part 3-8. Symbol 자료형 (0) | 2022.10.21 |
[코딩애플] js part 3-7. for in / for of 반복문과 enumerable, iterable 속성 (0) | 2022.10.21 |
[코딩애플] js part 3-6. async/await (0) | 2022.10.21 |