JavaScript Set 완벽 가이드: 초보자를 위한 기초부터 실전 활용까지

JavaScript에서 Set 사용하는 방법

고유한 값만 담아야 하는 데이터 목록을 다룬 적이 있으신가요? 바로 이럴 때 JavaScript의 Set 자료형이 빛을 발합니다. Set은 중복을 허용하지 않는 고유한 값들의 컬렉션을 만들 수 있는 객체 유형으로, 하나의 Set 안에는 같은 값이 두 번 이상 존재할 수 없습니다.

이 가이드에서는 Set이 무엇인지, 어떻게 동작하는지, 그리고 언제 유용하게 활용할 수 있는지 살펴보겠습니다. 또한 JavaScript에서 사용할 수 있는 각 Set 메서드의 예제 코드도 함께 다뤄보겠습니다.

Set이란 무엇일까요?

Set은 중복 값을 포함할 수 없는 값들의 집합입니다. 이 자료형은 ECMAScript 6(ES6)에서 처음 도입되었으며, 사실 Set과 유사한 기능은 다른 많은 프로그래밍 언어에서도 오랫동안 제공되어 왔습니다.

배열은 여러 값을 저장할 수 있어 유용하며, 중복 값도 저장할 수 있습니다. 이는 다양한 상황에서 큰 장점이 됩니다.

예를 들어, 커피숍에 들어온 주문 목록을 저장한다면 중복 값을 저장할 수 있어야 합니다. 두 명의 고객이 같은 음료를 주문할 수도 있기 때문입니다.

반면, 목록에 고유한 값만 저장하고 싶은 경우도 있습니다. 바로 이럴 때 Set 객체를 사용하면 됩니다. Set의 값은 각각 한 번만 나타날 수 있습니다.

JavaScript에서 Set은 다른 객체와 마찬가지로 간단하게 선언합니다. 차(tea room)에 방문한 고객들이 좋아하는 케이크 목록을 저장하는 Set을 만들어 보겠습니다:

let cakes = new Set();
console.log(cakes)

위 코드는 Set []을 출력합니다. 방금 Set을 생성한 것이며, 출력 결과에서 알 수 있듯이 아직 값이 없는 빈 상태입니다. 이제 값을 추가해 보겠습니다.

기본값으로 Set 초기화하기

Set은 배열, 문자열 또는 다른 반복 가능한(iterable) 객체로부터 초기화할 수 있습니다. 덕분에 값을 일일이 수동으로 추가할 필요 없이 기존 데이터를 그대로 활용할 수 있습니다.

다음 배열을 살펴보겠습니다:

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];

현재 이 값들은 배열에 저장되어 있습니다. 이를 Set으로 변환하려면 새 Set 객체를 생성할 때 배열을 인자로 전달하면 됩니다:

let cakes = new Set(cake_list);
console.log(cakes)

실행 결과:

Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

Set에 값 추가하기

Set 객체에는 항목을 손쉽게 추가할 수 있는 add() 메서드가 내장되어 있습니다. 메서드 이름도 '추가하다'라는 뜻 그대로라 기억하기 매우 쉽습니다.

예를 들어, 빵집의 판매 케이크 목록에 "Boston Cream Pie"를 추가하고 싶다고 가정해 보겠습니다. add() 메서드를 사용해 보겠습니다:

cakes.add("Boston Cream Pie");
console.log(cakes);

실행 결과:

Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

이제 Set에는 네 개의 값이 들어 있습니다. 참고로 이미 존재하는 값을 다시 추가하려고 해도 해당 값은 추가되지 않습니다. Set은 중복 값을 저장할 수 없기 때문입니다.

Set에 특정 값이 존재하는지 확인하기

"Boston Cream Pie"가 케이크 목록에 제대로 추가되었는지 확인해야 하는 상황을 가정해 봅시다. 새로 추가된 메뉴가 목록에 반영되었는지 제빵사가 재확인하고 싶어한다고 하죠.

이럴 때 has() 메서드를 사용합니다. has() 메서드는 Set이 특정 값을 가지고 있는지 확인해 줍니다. 역시 이름이 직관적이라 외우기 쉽습니다!

다음 코드를 살펴보겠습니다:

var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie);

실행 결과는 true입니다. has() 메서드는 Set에 해당 값이 포함되어 있는지 여부에 따라 true 또는 false 불리언 값을 반환합니다. 배열에서 사용하는 includes()와 비슷하지만, has()는 Set에서만 동작한다는 점이 다릅니다.

Set에서 값 제거하기

제빵사가 딸기 치즈케이크를 더 이상 판매하지 않기로 결정했다고 해보겠습니다. 만드는 데 시간이 오래 걸리고 인기도 별로 없었기 때문입니다.

Set에서 값을 제거할 때는 이름 그대로 직관적인 delete() 메서드를 사용합니다. Set에서 "Strawberry Cheesecake"를 제거해 보겠습니다:

cakes.delete("Strawberry Cheesecake");
console.log(cakes);

실행 결과:

Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

딸기 치즈케이크가 Set에서 성공적으로 제거되었습니다.

또한 clear() 메서드를 사용하면 Set의 모든 값을 한 번에 제거할 수 있습니다.

Set 순회하기

Set은 배열과 마찬가지로 반복 가능한(iterable) 객체입니다. 즉, 반복문으로 요소를 하나씩 순회할 수 있다는 뜻입니다.

forEach 루프를 사용해 케이크 Set을 순회해 보겠습니다. forEach 루프는 목록의 모든 항목을 하나씩 거치며 콘솔에 출력합니다:

cakes.forEach(cake => {
	console.log(cake);
});

실행 결과, Set의 각 값이 콘솔에 순서대로 출력됩니다:

Lemon Cake
Carrot Cake
Boston Cream Pie

정말 간단하죠! for-of 루프를 사용할 수도 있습니다:

for (let cake of cakes) {
	console.log(cake);
}

이 코드는 앞선 forEach 루프와 동일한 결과를 출력합니다:

Lemon Cake
Carrot Cake
Boston Cream Pie

물론 일반 for 루프로도 Set을 순회할 수 있지만, Set은 반복 가능한 객체이므로 forEach나 for-of 루프를 사용하는 것이 훨씬 간편하고 가독성도 좋습니다.

Set으로 배열의 중복 값 제거하기

배열로 Set을 초기화하면 중복된 값들이 자동으로 제거됩니다. 실무에서 놀랍도록 유용하게 쓰이는 기능입니다.

빵집에 접수된 여러 케이크 주문이 담긴 목록이 있다고 가정해 보겠습니다:

var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];

이 배열에는 빵집에 들어온 모든 케이크 주문이 담겨 있습니다. 총 8개의 값 중 2개는 중복입니다.

주방 준비를 위해 제빵사가 어떤 종류의 케이크가 주문되었는지 알고 싶어 한다고 해보죠. 배열을 Set으로 변환하면 이를 손쉽게 확인할 수 있습니다:

var unique_cakes = new Set(cakes);
console.log(unique_cakes);

실행 결과:

Set(6) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

목록이 6개의 값으로 깔끔하게 정리되었습니다. 주문 목록에서 추출한 고유한 값들입니다. 이제 마지막 단계만 남았습니다.

표준 배열 메서드를 사용해 데이터를 다루려면, 케이크 Set을 다시 배열로 변환해야 합니다. 이때 Array.from() 메서드를 사용합니다:

let final_cakes = Array.from(unique_cakes);
console.log(final_cakes);

실행 결과:

[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

출력 결과가 Set과 비슷해 보이지만 중요한 차이가 하나 있습니다. 바로 데이터가 이제 배열로 저장되었다는 점입니다. 즉, JavaScript의 모든 내장 배열 메서드를 자유롭게 활용할 수 있게 된 것입니다.

마무리

Set 객체는 고유한 값만 담을 수 있는 목록을 저장할 때 사용합니다. Set은 배열이나 문자열처럼 기존의 반복 가능한 객체로부터 초기화할 수 있습니다.

Set은 중복 값을 자동으로 제거하기 때문에, 배열에서 중복을 걸러내는 용도로도 훌륭하게 활용할 수 있습니다. 작업이 끝난 후에는 Array.from()을 사용해 Set을 다시 배열로 변환하면 됩니다.

이제 여러분도 JavaScript에서 Set을 프로처럼 활용할 준비가 되었습니다!