[ES6] 데이터컬렉션(6) - Set

권준혁·2020년 11월 1일
0

javascript

목록 보기
8/19
post-thumbnail
post-custom-banner

Set에 대해서 포스팅하겠습니다

  • Set은 고유값을 관리할 때 좋은 컬렉션입니다.
  • 자료형에 관계없이 유일한 값을 저장합니다.

new Set([iterable]);

  • 반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가됩니다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 됩니다.
  • NaN과 undefined도 Set에 저장할 수 있습니다. 원래 NaN !== NaN이지만, Set에서 NaN은 NaN과 같은 것으로 간주됩니다.

다른 컬렉션과 다르게 특이한 점은 Set.prototype.entries()는
[value,value]를 갖는 Iterator객체를 반환합니다.
따라서
keys()와 values()메서드가 동일한 Iterator를 반환합니다.
그 외에, add() has() clear() delete() 등이 있습니다.
메서드명만 봐도 어떤 기능을 하는지 직관적으로 알 수 있습니다.


  • 그럼 Set을 이용해 고유값을 관리해보겠습니다.
const members = [
    {
        name : 'kim',
        age : '30',
        hobby : 'game'
    },
    {
        name : 'kwon',
        age : '31',
        hobby : 'reading books'
    },
    {
        name : 'park',
        age : '29',
        hobby : 'sleeping'
    },
    {
        name : 'kong',
        age : '26',
        hobby : 'game'
    },
]

여기 회원정보에서 hobby를 고유값으로 관리해보겠습니다. 회원들의 취미목록을 만들어보겠습니다.

const hobbys = members.reduce((accum,current)=>{
    return accum.add(current.hobby)
},new Set())

reduce() 함수를 이용해봤습니다.

초기값은 new Set()으로 되어 있습니다.
여기에 members의 객체요소를 순회하며 hobby속성을 집어넣습니다.
중복되는 값인 game은 하나만 존재하게 됩니다.
네 번째 반복의 game은 이미 Set에 존재하는 요소가 있기 때문에 무시됩니다.
따라서, 순서가 보장됩니다.

// result
Set { 'game', 'reading books', 'sleeping' }

간단하지만 효과적인 Set에 대해서 알아봤습니다!
감사합니다

profile
웹 프론트엔드, RN앱 개발자입니다.
post-custom-banner

0개의 댓글