JavaScript

| JavaScript | Map / Set 등장

데브빈 2022. 6. 18. 13:25
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의 데이터 중복 제거할 때 많이 쓰일 것 같다. 

 

 

[참고]

코딩 애플