배열은 자바스크립트에서 매우 유용한 데이터 구조입니다. 그러나 때로는 배열에서 중복된 값을 가진 요소들을 필터링하고 싶을 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 배열을 사용하여 중복된 값을 가진 요소를 필터링하는 방법에 대해 알아보겠습니다.

1. Set 사용하기

ES6(ECMAScript 2015)부터 자바스크립트에는 Set이라는 내장 객체가 추가되었습니다. Set은 중복된 값을 허용하지 않는 컬렉션으로, 배열의 중복 값을 필터링하는데 유용하게 사용될 수 있습니다. 아래는 Set을 이용하여 중복 값을 필터링하는 예제 코드입니다.

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

const filteredArr = [...new Set(arr)];

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

Set 객체를 생성하기 위해 new Set(arr)를 사용하고, 중복 값을 제거하기 위해 스프레드 문법(...)을 활용합니다. 이렇게 중복 값이 제거된 배열이 filteredArr에 저장되어 출력됩니다.

2. reduce() 메소드 사용하기

reduce() 메소드는 배열을 순회하면서 원하는 값을 누적하는데 사용되는 메소드입니다. 이를 활용하여 배열에서 중복 값을 제거하는 방법을 알아보겠습니다.

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

const filteredArr = arr.reduce((uniqueArr, currentValue) => {
  if (!uniqueArr.includes(currentValue)) {
    uniqueArr.push(currentValue);
  }
  return uniqueArr;
}, []);

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

reduce() 메소드를 호출할 때 첫 번째 인자로는 누적 값(여기서는 중복 값이 제거된 배열)을 저장할 변수를 전달하고, 두 번째 인자로는 현재 처리 중인 요소 값을 받습니다. 함수 내에서는 현재 요소가 이미 uniqueArr 배열에 포함되어 있는지 확인하고, 포함되어 있지 않다면 push() 메소드를 사용하여 해당 요소를 uniqueArr 배열에 추가합니다.

3. filter() 메소드와 indexOf() 메소드 사용하기

filter() 메소드와 indexOf() 메소드를 결합하여 배열의 중복 값을 필터링할 수도 있습니다.

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

const filteredArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

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

filter() 메소드를 호출할 때 콜백 함수를 전달하여 각 요소가 중복되지 않는지 확인합니다. indexOf() 메소드를 사용하여 현재 요소의 인덱스와 배열에서 첫 번째로 등장하는 인덱스를 비교합니다. 이를 통해 중복된 값들을 필터링하여 새로운 배열을 생성합니다.

결론

자바스크립트에서 배열의 중복 값을 필터링하는 방법에 대해 알아보았습니다. Set 객체를 사용하거나 reduce() 메소드, filter() 메소드와 indexOf() 메소드를 활용하는 방법을 소개했습니다. 이러한 방법들을 조합하여 필요에 맞게 중복 값을 제거하는 방법을 선택할 수 있습니다. 적절한 상황에서 적합한 방법을 선택하여 자바스크립트 코드를 작성해보세요.