자바스크립트에서 배열을 다루다 보면 중복된 요소를 제거해야 하는 경우가 있을 수 있습니다. 중복 요소가 있는 배열에서 중복을 제거하고 유니크한 값들만을 가져오는 방법을 알아보겠습니다.

1. Set 객체 사용하기

Set 객체는 자바스크립트에서 유일한 값들을 저장하는 자료구조입니다. 이를 활용하여 중복 요소를 제거할 수 있습니다.

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]

위 예제에서 array 배열에는 중복된 값들이 존재합니다. new Set(array)를 이용하여 중복을 제거한 뒤, Array.from()을 사용하여 다시 배열로 변환합니다. 이렇게 하면 uniqueArray에는 중복이 제거된 유니크한 값들만 남게 됩니다.

2. filter() 메서드와 indexOf() 메서드 사용하기

다른 방법으로는 filter() 메서드와 indexOf() 메서드를 결합하여 중복을 제거할 수 있습니다.

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index) => {
  return array.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]

filter() 메서드는 배열을 순회하면서 콜백 함수를 실행하고, 콜백 함수가 true를 반환하는 요소만을 새로운 배열로 반환합니다. 이때 콜백 함수 내부에서 indexOf() 메서드를 사용하여 현재 요소의 인덱스와 처음 등장하는 위치의 인덱스를 비교합니다. 만약 같다면 처음 등장한 요소이므로 true를 반환하여 새로운 배열에 포함시킵니다.

3. reduce() 메서드와 includes() 메서드 사용하기

reduce() 메서드와 includes() 메서드를 활용하여 중복을 제거할 수도 있습니다.

const array = [1, 2, 3, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, value) => {
  if (!accumulator.includes(value)) {
    accumulator.push(value);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

reduce() 메서드는 배열을 순회하면서 누적값에 대한 로직을 적용합니다. 콜백 함수 내부에서 includes() 메서드를 사용하여 현재 요소가 누적값에 포함되어 있는지 확인한 후, 포함되지 않은 경우에만 누적값에 해당 요소를 추가합니다.

마무리

위의 세 가지 방법을 통해 자바스크립트 배열에서 중복 요소를 제거할 수 있습니다. 각각의 방법은 다르게 동작하지만 동일한 결과를 얻을 수 있습니다. 배열에서 중복을 제거하여 유니크한 값들만 남기는 것은 데이터 처리 및 알고리즘 구현에서 유용하게 사용될 수 있습니다.