JavaScript 배열에서 고유 값 얻기
JavaScript에서 배열에 중복된 값이 여러 개 포함되어 있을 때, Set 객체를 활용하면 간단하게 고유한 값만 추출할 수 있습니다. Set은 중복을 허용하지 않는 자료구조이므로, 배열을 Set으로 변환하는 것만으로 자동으로 중복이 제거됩니다.
아래 예제는 숫자와 문자열이 섞여 있는 배열에서 중복 값을 제거하는 전체 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>배열에서 고유 값 추출하기</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>배열에서 고유 값 가져오기</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 배열에서 중복 값이 제거됩니다</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 = "arr = " + [...set1] + "<br>";
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 원본 배열이 화면에 표시됩니다.
'클릭하세요' 버튼을 누르면 중복이 제거된 결과가 출력됩니다.
코드 동작 원리
핵심 로직은 단 두 줄입니다.
new Set(arr) — 배열을 Set 객체로 변환합니다. Set은 동일한 값을 하나만 저장하기 때문에 이 과정에서 중복 요소가 모두 사라집니다.
[...set1] — 스프레드 연산자(spread operator)를 사용해 Set을 다시 일반 배열로 변환합니다. Set은 반복 가능(iterable)한 객체이므로 스프레드 문법으로 손쉽게 배열화할 수 있습니다.
이 방법의 장점은 코드가 매우 간결하고, filter와 indexOf를 조합하는 기존 방식(O(n²))보다 성능이 뛰어나다는 점입니다. Set을 사용하는 방식은 대체로 O(n)의 시간 복잡도로 동작합니다.
또한 ES6 이상 환경이라면 한 줄로 더 간단하게 작성할 수도 있습니다.
const uniqueArr = [...new Set(arr)];
단, 주의할 점은 이 방법이 객체(object)처럼 참조 타입인 경우에는 같은 내용이라도 서로 다른 인스턴스는 별개의 값으로 취급한다는 것입니다. 원시 타입(숫자, 문자열, 불리언 등)의 중복 제거에는 가장 적합한 방법입니다.