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 메서드는 대부분의 오래된 브라우저에서도 사용가능합니다. )

// filter
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#폴리필

// indexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#폴리필

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)로 구현하고 기본 메서드 조차도 최소한으로 호출하는 방향으로 최적화가 필요합니다.
( 근데 이렇게까지 코드 최적화가 필요한경우에는 배열이 중복이되는 로직 자체를 개선하는 방법도 고려해보는게 어떨까 합니다. 🙂)