[JavaScript] Set : 중복 제거와 효율적인 데이터 관리

 

 

Reference

👉🏻 DaleSeo 블로그

👉🏻 모던 자바스크립트 딥다이브 도서

 

 

 

Set 객체는 중복되지 않는 유일한 값들의 집합을 다루는 자료구조예요. Set을 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있습니다. 배열과 유사하지만 다른 차이도 존재합니다. Set은 자바스크립트 ES6부터 추가된 기능이라 Set을 쓰면 효율적인 코드를 짤 수 있는 상황에도 배열을 사용하는 경우가 있다고 해요.

 

배열과 Set의 차이를 살펴보자면,

 

배열은 데이터를 순서있게 저장합니다. 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능해요. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제되지 않아 동일한 값을 여러 번 저장할 수 있습니다.  

 

세트는 얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자료구조입니다. 우선 세트는 데이터를 순서없이 저장합니다. 따라서 배열처럼 인덱스를 통해서 접근할 수가 없습니다. 그렇기 때문에 세트는 중복된 데이터를 허용하지 않습니다. 즉, 기존에 세트에 있는 값을 또 추가하면 아무 효력이 발생하지 않습니다.

 

Set은 한마디로 순서가 없는, 중복되지 않은 데이터의 집합입니다.

 

구분	배열	Set 객체
동일한 값을 중복하여 포함할 수 있다	O	X
요소 순서에 의미가 있다	O	X
인덱스로 요소에 접근할 수 있다	O	X

 

 

이러한 Set의 특성은 수학적 집합의 특성과 일치합니다. Set은 수학적 집합을 구현하기 위한 자료구조라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있어요.

 

Set 객체의 생성

자바스크립트에서 Set는 클래스(class)이므로 new 키워드와 생성자를 사용하여 객체를 생성할 수 있습니다.

const set = new Set(); // Set(0) {size: 0}

 

위와 같이 생성자의 인자로 아무 것도 넘기지 않으면 빈 세트가 만들어지며, 아래와 같이 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어집니다.

 

 

const numSet = new Set([1, 2, 3]); // Set(3) {1, 2, 3}

 

이 때, 배열에 중복된 값이 있다면 중복된 값은 Set 객체에 요소로 저장되지 않습니다.

이러한 특성을 활용해 배열에서 중복된 요소를 제거할 수 있습니다.

 

// 기존 배열에서 filter로 배열의 중복을 제거하는 방법
const uniq = (array) => array.filter( (v, i, self) => self.indexOf(v) === i);
console.log(uniq([1, 1, 1, 1, 2, 2, 3]));

// Set으로 배열의 중복을 제거하는 방법
const uniq = (array) => [...new Set(array)];
console.log(uniq([1, 1, 1, 1, 2, 2, 3]));

 

 

Set 객체의 요소 개수 확인

const set = new Set([1, 2, 3, 5]);
console.log(set.size); // 4

 

세트의 size 속성을 통해서 해당 세트의 길이, 즉 얼마나 많은 값이 저장되어 있는지를 알아낼 수 있습니다.

 

값 추가

set.add(1); // Set(1) {1}
set.add("A"); // Set(2) {1, 'A'}
set.add(true); // Set(3) {1, 'A', true}

 

세트에 새로운 값을 추가할 때는 add() 메서드를 사용하는데요. 위에서 설명드린 것처럼 세트에는 중복된 값이 추가되지 않으며, 유일한 값만 저장됩니다. 이때 에러가 발생하지 않고 무시됩니다.

참고로 add() 메서드는 값을 추가한 후에 세트를 반환하기 때문에 아래와 같이 연쇄적으로 호출할 수도 있습니다.

 

set.add(1).add("A").add(true); // Set(3) {1, 'A', true}

 

값 존재 여부 확인

if (set.has("A")) {
  console.log("A는 세트에 존재합니다."); // A는 세트에 존재합니다.
}

const result = set.has("B") ? "YES" : "NO"; // NO

 

세트에 특정 값이 존재하는지 확인하려면 has() 메서드를 사용합니다. 보통 if 조건문이나 3항 연산자(ternary operator)와 많이 사용됩니다.

 

값 삭제

set.delete(1); // true
set.delete(2); // false

 

Set의 delete() 메서드를 사용하면 세트로 부터 특정 값을 삭제할 수 있는데요. delete()메서드에 인자로 넘기는 값이 세트에 존재하여 성공적으로 삭제하였다면 true를 반환하고, 해당 값이 세트에 존재하지 않아서 삭제에 실패하였다면 false를 반환합니다.

 

값 일괄 삭제

set.clear(); // Set(0) {size: 0}

Set 객체의 모든 값을 제거하려면 clear() 메서드를 사용합니다.

 

Set 객체 순회하기

Set 객체의 요소를 순회하려면 forEach 메서드를 사용합니다. 배열의 forEach와 유사하게 콜백 함수과 forEach 메서드의 콜백 함수 내부에서 this로 사용될 객체를 인수로 전달해요. 이 때 콜백 함수는 3개의 인수를 전달받습니다.

set.forEach(("현재 순회중인 요소 값", "현재 순회중인 요소 값", "현재 순회중인 Set 객체 자체") => {})

 

첫 번째 인수와 두 번째 인수는 같은 값입니다.

이처럼 동작하는 이유는 배열의 forEach 메서드와 인터페이스를 통일하기 위함이며 다른의미는 없습니다.

배열은 두 번째 인수에 현재 순회중인 값의 인덱스를 전달받지만 Set은 순서에 의미가 없어 인덱스를 갖지 않습니다.

 

const set = new Set([1, 2, 3, 5]);

set.forEach((v, v2, set) => console.log(v, v2, set));

 

 

Set 객체는 반복이 가능한 이터러블 객체이기 때문에 for...of문으로 순회도 가능하며, 스프레드 문법과 배열 디스트럭처링의 대상이 될 수 도 있어요.

 

const set = new Set();

set.add({name: "나무", age: 2});
set.add({name: "해피", age: 5});
set.add({name: "망고", age: 10});

for(const value of set){
    console.log('이름', value.name);
    console.log('나이', value.age);
}

 

배열을 세트로 변환

실제로 코딩을 하다보면 기존에 존재하는 배열로 부터 새로운 세트를 만들어야 하는 경우가 발생합니다. 이 때는 Set() 생성자의 인자로 해당 배열이 할당된 변수를 넘기면 됩니다. 주의 해야 할 점은 배열로 부터 세트를 만들어내면 중복 값이 모두 제거된다는 것입니다.

중복 값을 유지해야하는 상황에서는 배열을 세트로 변환하는 것에 대해 다시 한번 생각해봐요!

const array = [1, 2, 2, 3, 3, 3];
const set = new Set(array); // Set(3) {1, 2, 3}

 

Set 객체는 중복된 요소를 허용하지 않지만, 자바스크립트에서 객체는 서로 다른 참조를 가지기 때문에 같은 값이어도 서로 다른 객체로 인식됩니다. Set이 내부적으로 중복을 판단할 때, 원시값(숫자, 문자열 등)은 값 자체를 비교하지만, 객체는 참조(메모리 위치)를 비교합니다. 즉, 객체가 같은 내용이라도 다른 메모리 위치에 저장되어 있으면 서로 다른 객체로 간주합니다.

 

따라서 다음과 같은 객체 배열에서:

const arr = [
    { nickName: "Jerry", date: '03-01' },
    { nickName: "Sena", date: '01-24' },
    { nickName: "Diana", date: '08-11' },
    { nickName: "Ahri", date: '02-26' },
    { nickName: "Ahri", date: '02-26' }, // 중복된 객체
];

 

네 번째 객체와 마지막 객체의 값은 같지만, 서로 다른 객체로 인식됩니다. Set은 참조가 다르기 때문에 중복으로 인식하지 않고 둘 다 저장하게 됩니다.

 

만약 객체의 값을 기준으로 중복을 제거하고 싶다면, 중복을 직접 처리하는 방법을 사용할 수 있습니다. 예를 들어, nickName과 date 속성을 기준으로 중복을 제거할 수 있습니다

 

const newChamps = Array.from(new Set(champions.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
console.log(newChamps);

 

이 방법은 객체를 문자열로 변환하여 중복을 제거한 후, 다시 객체로 변환하는 방식입니다.

 

 

 

세트를 배열로 변환

그럼 반대로 세트를 배열로 변환해야 할 때는 어떻게 해야 할가요?

가장 쉬운 방법은 대괄호 안에서 세트를 상대로 전개(spread) 연산자를 사용하는 것입니다.

const set = new Set([1, 2, 3, 4]);
const array = [...set];

 

전개 연산자를 별로 안 좋아하신다면 Array.from() 함수를 사용하는 방법도 있습니다.

const array = Array.from(set); // [1, 2, 3]