(JS) 배열의 중복제거

배열을 순회하는 방식

배열의 모든 요소를 순회하면서 별도의 배열(중복값이 없는 배열)에 동일한 값이 없는 경우에만 해당 배열에 요소를 추가한다.

const arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
let uniqueArr = [];

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

filter 메서드 활용

배열을 순회하는 방식이 아닌 filter 메서드를 이용하는 방법이다.

const arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
let uniqueArr = [];

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

//filter with hasOwnProperty
let already = {};
uniqueArr = arr.filter(function(item) {
  return already.hasOwnProperty(item) ? false : (already[item] = true);
});

filter 메서드 사용시 하나는 배열의 indexOf, 다른 하나는 객체의 hasOwnProperty를 활용해 중복된 항목을 체크하는 방법이다.

만약, filter, indexOf 함수를 지원하지 않는 브라우저라면 아래와 같이 각각의 메서드를 별도로 정의해줘야 한다.

라이브러리 활용

Underscore or Lodash

let arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
let uniqueArr = _.uniq(arr);

라이브러리에서 제공하는 uniq 메서드를 사용하면 단 1줄로 끝나버린다.
마찬가지로,

let arr = ["apple", "orange", "apple", "blueberry", "grape", "orange"];
let uniqueArr = [...new Set(arr)];

위 기능은 오래된 브라우저에서는 지원하지 않을 가능성이 높으므로 별도의 polyfill 추가 또는 사용 가능한 환경인지 꼭 확인 후 사용해야 한다.

만약, 최적화가 필요하다면 외부 라이브러리는 사용하지 말고,
순수 자바스크립트 코드(vanilla js)로 구현하고 기본 메서드 조차도 최소한으로 호출하는 방향으로 최적화가 필요하다.