[JavaScript] Set을 활용한 고유값 관리

객체가 담긴 배열에서 중복 없는 고유한 값만 분류해야 할 때가 있다. 오늘은 이 문제를 해결하기 위한 강력한 도구, Set에 대해 알아보.

Set이란?

---

Set은 고유한 값을 관리하기 위한 특화된 컬렉션이다. 배열처럼 값을 저장하지만, 중복 값을 허용하지 않으며, 유일한 값만 저장한.

 

예제

---

다음은 강아지에 대한 정보가 담긴 배열입니다:

 

const dogs = [
    { 이름: '맥스', 크기: '대형견', 견종: '진돗개', 색상: '노란색' },
    { 이름: '도니', 크기: '중형견', 견종: '웰시코기', 색상: '갈색' },
    { 이름: '방울이', 크기: '소형견', 견종: '말티즈', 색상: '흰색' }
];

 

이 배열에서 중복 없는 색상 목록을 만들려면 어떻게 해야 할까?

 

1단계: 색상 배열 만들기

우선, map() 메서드를 사용하여 강아지들의 색상 목록을 추출한다:

function getColors(dogs) {
    return dogs.map(dog => dog['색상']);
}

const colors = getColors(dogs);
console.log(colors); // ['노란색', '갈색', '흰색']

 

2단계: 중복 제거하기

일반적인 방법으로 중복을 제거하려면 for 문이나 reduce를 사용할 수 있다.

function getUnique(attributes) {
    const unique = [];
    for (const attribute of attributes) {
        if (!unique.includes(attribute)) {
            unique.push(attribute);
        }
    }
    return unique;
}

console.log(getUnique(colors)); // ['노란색', '갈색', '흰색']

3단계: Set 활용하기

더 간단한 방법으로는 Set을 사용하는 것입니다. Set은 중복을 자동으로 제거한다

const unique = new Set(colors);
console.log(unique); // Set { '노란색', '갈색', '흰색' }

만약 배열 형태로 반환하고 싶다면 스프레드 연산자를 사용하면 된다.

function getUnique2(attributes) {
    return [...new Set(attributes)];
}

console.log(getUnique2(colors)); // ['노란색', '갈색', '흰색']

 

한 번에 처리하기

위 방법 색상 배열을 만든 뒤 중복을 제거했지만, 강아지 정보를 한 번에 순회하며 고유한 색상 목록을 만들 수도 있다.

function getUniqueColors(dogs) {
    const unique = new Set();
    for (const dog of dogs) {
        unique.add(dog.색상);
    }
    return [...unique];
}

console.log(getUniqueColors(dogs)); // ['노란색', '갈색', '흰색']

 

 

Set의 유용한 메서드들

---

Set은 고유값 관리뿐 아니라 다음과 같은 유용한 메서드를 제공한다

• add(value): 값을 추가합니다.
• has(value): 값이 존재하는지 확인합니다.
• delete(value): 값을 제거합니다.
• clear(): 모든 값을 제거합니다.