본문 바로가기

Front-End: Web/JavaScript

[코딩애플] js part 3-9. Map, Set 자료형

반응형

매우 짧게 알아보는 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문 돌리면 된다.

[...출석부]
반응형