자바스크립트에서 배열(Array)을 Set으로 변환하는 방법

자바스크립트의 Set 객체는 중복 없이 고유한 값만 저장하는 내장 컬렉션입니다. 배열에 중복된 요소가 많거나 고유한 값만 추출해야 할 때, 배열을 Set으로 변환하면 아주 간편하게 처리할 수 있습니다.

기본 변환 방법

배열을 Set으로 변환하는 가장 간단한 방법은 new Set() 생성자에 배열을 인수로 전달하는 것입니다. Set 생성자는 이터러블(iterable) 객체를 받아들이며, 생성 과정에서 중복된 값은 자동으로 제거됩니다.

const arr = [2, 3, 4, 2, 3, 4];
const set = new Set(arr);
console.log(set); // Set(3) {2, 3, 4}

실습 예제 코드

다음은 버튼을 클릭하면 숫자와 문자열이 섞인 배열을 Set으로 변환하여 화면에 결과를 표시하는 완전한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
    font-size: 18px;
    font-weight: 500;
    color: rebeccapurple;
}
.result {
    color: red;
}
</style>
</head>
<body>
<h1>Convert array to set</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">Convert</button>
<h3>Click on the above button to convert the above array into a set</h3>
<script>
    let resultEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
    sampleEle.innerHTML = "arr = " + arr;
    document.querySelector(".Btn").addEventListener("click", () => {
        let set1 = new Set(arr);
        resultEle.innerHTML = "set1 = " + [...set1] + "<br>";
    });
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

자바스크립트에서 배열(Array)을 Set으로 변환하는 방법

'Convert' 버튼을 클릭하면 중복이 제거된 Set의 결과가 화면에 표시됩니다. 원래 배열에는 10개의 요소가 있었지만, Set에는 고유한 값인 6개의 요소만 남게 됩니다.

자바스크립트에서 배열(Array)을 Set으로 변환하는 방법

추가 팁: Set을 다시 배열로 변환하기

예제 코드에서처럼 스프레드 연산자([...set])를 사용하면 Set을 다시 배열로 손쉽게 되돌릴 수 있습니다. Array.from() 메서드를 활용하는 방법도 있습니다.

const backToArray = [...set1];         // 스프레드 연산자 사용
const backToArray2 = Array.from(set1); // Array.from() 사용

이처럼 new Set()과 스프레드 연산자를 조합하면 배열에서 중복을 제거하는 강력한 한 줄 코드를 작성할 수 있어, 데이터 정리 작업에 매우 유용합니다.