[JavaScript]배열에서 중복값 제거하는 방법

JavaScript에서 배열의 중복 값을 제거하는 방법을 정리합니다.

 

목차

1. Set 객체와 spread 연산자 사용
2. filter 함수와 indexOf 함수 사용
3. filter 함수와 hasOwnProperty 함수 사용
4. sort 함수와 filter 함수 사용
5. sort 함수와 reduce 함수 사용

---

Set 객체와 spread 연산자 사용

Set 객체는 고유한 값을 가지는 객체입니다.

Set 객체를 생성하여 중복 값이 없는 객체를 생성하고 spread( ... ) 연산자를 사용하여 Set 객체를 배열로 변환합니다.

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

var setObj = new Set(arr);
console.log(setObj);

var setArr = [...setObj];
console.log(setArr);

실행 결과

---

filter 함수와 indexOf 함수 사용

filter 함수를 실행하여 순차적으로 배열의 요소를 순회합니다.

 

filter 함수를 순회하고 있는 배열 요소의 index를 구하기 위해 indexOf 함수를 사용합니다.

 

indexOf 함수는 동일한 요소가 존재할 경우 맨 앞에 있는 index를 반환하는 특징이 있습니다.

 

indexOf 함수가 반환한 index와 filter 함수를 순회하고 있는 index를 비교합니다.

 

동일하면, true를 반환하여 현재 배열 요소를 추가합니다.

다르면, 이미 추가되어 있으므로 false를 반환하여 추가하지 않습니다.

 

indexOf 함수를 사용하는 방법은 코드가 간결하지만, 배열의 요소가 많은 경우 효율성이 떨어집니다.

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

var uniqueArr = arr.filter(function(item, idx, self) {
    return self.indexOf(item) == idx;
})

console.log(uniqueArr);
// [1, 2, 3, 4, 5]

반응형

---

filter 함수와 hasOwnProperty 함수 사용

hasOwnProperty 함수는 객체에 프로퍼티가 존재하는지 체크하는 함수입니다.

객체의 함수이지만, 배열에서 사용 가능하며, 아래 코드는 일반적으로 많이 사용하는 방법입니다.

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var emptyArr = {};

var uniqueArr = arr.filter(function(item) {
    return emptyArr.hasOwnProperty(item) ? false : (emptyArr[item] = true);
})

console.log(uniqueArr);
// [1, 2, 3, 4, 5]

 

hasOwnProperty 함수의 특징

• 숫자와 문자열을 구분하지 않습니다.
• 프로퍼티의 값이 아닌 프로퍼티의 이름을 체크합니다.

 

숫자와 문자열을 구분하지 않습니다.

var arr = [1, 2, 3, 4, 5, '1', '2', '3', '4', '5'];
var emptyArr = {};

var uniqueArr = arr.filter(function(item) {
    return emptyArr.hasOwnProperty(item) ? false : (emptyArr[item] = true);
})

console.log(uniqueArr);
// [1, 2, 3, 4, 5]

 

프로퍼티의 값이 아닌 프로퍼티의 이름을 체크합니다.

var arr = [
  {
    score : 90
  },
  {
    score : 80
  },
  {
    score : 70
  }
];

var emptyArr = {};

var uniqueArr = arr.filter(function(item) {
    return emptyArr.hasOwnProperty(item) ? false : (emptyArr[item] = true);
})

console.log(uniqueArr);

실행 결과

---

sort 함수와 filter 함수 사용

sort 함수를 사용하여 배열을 정렬 후 filter 함수를 사용하여 중복 값이 제거된 새로운 배열을 생성합니다.

sort 함수의 단점은 기존 배열도 정렬된다는 문제가 있습니다.

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

var uniqueArr = arr.sort().filter(function(item, idx, array) {
    // !idx : 0번째 index인 경우 true 아닐 경우 false
    // item != array[idx - 1] : 현재 요소의 값과 이전 요소의 값을 비교 다르면 true 같으면 false
    return !idx || item != array[idx - 1];
})

console.log(uniqueArr);
// [1, 2, 3, 4, 5]

console.log(arr);
// [1, 1, 2, 2, 3, 3, 4, 4, 5, 5]

 

위 코드를 예시로 sort 함수와 filter 함수를 사용하여 중복 값을 제거하는 방법은 다음과 같습니다.

먼저 sort 함수를 사용하여 배열 arr을 정렬합니다.

arr.sort();

console.log(arr);
// [1, 1, 2, 2, 3, 3, 4, 4, 5, 5]

 

정렬된 배열을 filter 함수를 사용하여 조건에 따라 불리언 값을 반환하도록 합니다.

[1, 1, 2, 2, 3, 3, 4, 4, 5, 5].filter(function(item, idx, array) {
    return !idx || item != array[idx - 1];
})

 

불리언 값을 반환하는 조건입니다.

① index가 0인 경우

!idx 조건에 의해 true를 반환합니다.

 

② 현재 요소의 값과 이전 요소의 값이 다름

현재 요소의 index가 2이며, index가 2인 요소의 값은 2입니다.

배열[현재 요소의 index - 1]은 1번째 index이며, 1번째 index의 값은 1입니다.

현재 요소의 값 : 2

이전 요소의 값 : 1

현재 요소의 값과 이전 요소의 값이 다르기 때문에 의해 true를 반환합니다.

 

③ 현재 요소의 값과 이전 요소의 값이 같음

현재 요소의 index가 5이며, index가 5인 요소의 값은 3입니다.

배열[현재 요소의 index - 1]은 4번째 index이며, 4번째 index의 값은 3입니다.

현재 요소의 값 : 3

이전 요소의 값 : 3

현재 요소의 값과 이전 요소의 값이 동일하기 때문에 false를 반환합니다.

---

sort 함수와 reduce 함수 사용

sort 함수와 filter 함수를 사용하는 방법과 유사하기 때문에 설명은 생략합니다.

☞ reduce 함수 사용 방법 보러 가기

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

var uniqueArr = arr.sort().reduce(function(accumulator, data) {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== data) {
        accumulator.push(data);
    }
    return accumulator;
}, [])

console.log(uniqueArr);
// [1, 2, 3, 4, 5]

---

참고

https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array

Remove duplicate values from JS array