배열의 중복제거

배열의 중복제거

publish date
Jun 30, 2020
Tags
js
Javascript 의 배열의 중복을 제거하는 방법들을 알아보겠습니다.

1. 배열을 순회하는 방식

배열의 모든 요소를 순회하면서 별도의 배열(중복값이 없는 배열)에 동일한 값이 없는 경우에만 해당 배열에 요소를 추가합니다.
var arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
var uniqueArr = [];

for (var i=0; i<arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) uniqueArr.push(arr[i]);
}

2. filter 메서드 활용

배열을 순회하는 방식이아닌 filter 메서드를 이용하는 방법입니다.
var arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
var uniqueArr = [];

// filter with indexOf
uniqueArr = arr.filter(function(item, pos, self) {
    return self.indexOf(item) == pos;
});

// filter with hasOwnProperty
var already = {};
uniqueArr = arr.filter(function(item) {
    return already.hasOwnProperty(item) ? false : (already[item] = true);
});
filter 메서드사용시 하나는 배열의 indexOf, 다른 하나는 객체의 hasOwnProperty 를 활용하여 중복된 항목을 체크하는 방법입니다.
만약 filter, indexof 함수를 지원하지 않는 브라우저라면 아래와 같이 각각의 메서드를 별도로 정의해주세요.
( hasOwnProperty 메서드는 대부분의 오래된 브라우저에서도 사용가능합니다. )

3. 라이브러리 활용

이번에는 라이브러리를 이용하는 방법을 알아보도록 하겠습니다.

1. JQuery

보편적으로 다들 쓰시는 JQuery 를 활용한 방법입니다.
var arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
var uniqueArr = [];

<em>// JQuery</em>
$.each(arr, function(i, el){
    if($.inArray(el, uniqueArr) === -1) uniqueArr.push(el);
});
사실 특별한 JQuery만의 방법이란 건 없고, 기존 자바스크립트 제공함수를 JQuery 함수로 대체하여 쓰는 정도입니다.

2. Underscore or Lodash

개인적으로 애정하는 라이브러리입니다.
( Underscore와 Lodash 는 매우 유사한 라이브러리입니다. Underscore 를 기반으로 좀 더 개선한게 Lodash라고 보면 되죠. )
var arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];

var uniqueArr = _.uniq(arr);
라이브러리에서 제공하는 uniq 메서드를 사용하면 단 1줄..(ㄷㄷㄷ)에 끝나버립니다. 간단하죠? ㅎㅎ
최신 브라우저만 대응해도 된다면 ES6 를 사용하여 아주 간단히 처리할 수 도 있습니다.( 해당 기능은 오래된 브라우저에서는 지원하지 않을 가능성이 높으므로 별도의 polyfill 추가 또는 사용가능한 환경인지 꼭 확인 후 사용 )
var arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];

uniqueArr = [...new Set(arr)];
물론 위의방법들은 퍼포먼스나 최적화까지 고려하진 않았습니다.
만약, 최적화가 필요하다면 외부 라이브러리는 사용하지 말고, 순수 자바스크립트 코드(Vanilla js)로 구현하고 기본 메서드 조차도 최소한으로 호출하는 방향으로 최적화가 필요합니다.( 근데 이렇게까지 코드 최적화가 필요한경우에는 배열이 중복이되는 로직 자체를 개선하는 방법도 고려해보는게 어떨까 합니다. 🙂)