JavaScript에서 배열에 포함된 중복 값을 찾거나 제거하고 싶다면, 객체(Object)를 활용하는 간단한 기법을 사용할 수 있습니다. 아래 예제 코드를 실행하면 배열에서 중복된 요소가 걸러진 결과를 확인할 수 있습니다.
예제 코드
<html>
<body>
<script>
function removeDuplicate(arr) {
var c;
var len = arr.length;
var result = [];
var obj = {};
for (c = 0; c < len; c++) {
obj[arr[c]] = 0;
}
for (c in obj) {
result.push(c);
}
return result;
}
var myArr = [10, 20, 30, 40, 10, 40, 70, 80, 70, 90];
document.write(removeDuplicate(myArr));
</script>
</body>
</html>
코드 동작 원리
이 코드의 핵심은 객체의 특성을 활용하는 것입니다.
1. 객체를 키 저장소로 사용: 첫 번째 반복문에서 배열의 각 요소를 객체 obj의 키(key)로 저장합니다. 객체는 동일한 키를 두 개 이상 가질 수 없기 때문에, 중복된 값이 여러 번 등장해도 자동으로 하나만 남게 됩니다.
2. 결과 배열 생성: 두 번째 for...in 반복문은 객체에 남아 있는 고유한 키들을 하나씩 꺼내 result 배열에 추가합니다.
3. 결과 반환: 최종적으로 중복이 제거된 배열이 반환되어 화면에 출력됩니다.
참고: ES6의 Set 활용하기
최신 JavaScript(ES6 이상)에서는 Set 자료구조를 사용하면 훨씬 더 간결하게 중복을 제거할 수 있습니다.
var myArr = [10, 20, 30, 40, 10, 40, 70, 80, 70, 90];
var uniqueArr = [...new Set(myArr)];
console.log(uniqueArr); // [10, 20, 30, 40, 70, 80, 90]
Set은 중복을 허용하지 않는 자료구조이므로, 배열을 Set으로 변환했다가 다시 펼침 연산자(...)로 배열화하면 한 줄로 중복 제거가 완료됩니다.
실행 결과
10,20,30,40,70,80,90
원본 배열 [10, 20, 30, 40, 10, 40, 70, 80, 70, 90]에서 중복된 10, 40, 70이 제거되고 고유한 값들만 출력되는 것을 확인할 수 있습니다.