[Javascript] 배열 중복 제거하는 3가지 방법

 

Javascript의 배열에서 중복 되는 값을 제거하는 3가지 방법을 알아보도록 하겠습니다.

 

1. Set
2. indexOf(), filter()
3. forEach(), includes()

 

1. Set

Javascript에서 Set 객체를 이용하면 중복없는 데이터를 표현할 수 있습니다.

Set 객체의 이런 특징을 이용해서, 배열의 중복을 제거할 수 있습니다.

const dupArr = [1, 2, 3, 1, 2];

const set = new Set(dupArr);

const uniqueArr = [...set];

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위의 예제에서는

 

const set = new Set(dupArr);

중복값이 있는 배열을 Set 객체로 만들어서 중복을 제거한 후,

 

const uniqueArr = [...set];

Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환하였습니다.

Set 객체를 배열로 변환할 때, Spread Operator 대신

Array.from() 또는 forEach() 문을 사용할 수도 있습니다.

 

[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법

[Javascript] Set 객체를 배열(Array)로 변환하는 3가지 방법

 

 

 

2. indexOf(), filter()

indexOf() 함수는, 배열에서 특정값이 처음으로 나타나는 index를 리턴합니다.

filter() 함수는 특정 조건에 부합하는 배열의 모든 값을 배열 형태로 리턴합니다.

이 두 함수를 사용하여 배열에 중복된 값을 제거 할 수 있습니다.

const dupArr = [1, 2, 3, 1, 2];

const uniqueArr = dupArr.filter(
  (element, index) => {
      return dupArr.indexOf(element) === index;
  }
);

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위 예제에서

 

dupArr.filter(callback);

filter() 함수는

dupArr의 원소들을 callback 함수로 전달하여 

각 원소들이 callback 함수에 정의된 기준에 부합하는지 검사하고,

검사 결과가 true를 리턴하는 원소을 모아서 배열 형태로 리턴(uniqueArr) 합니다.

 

dupArr.indexOf(element) === index;

filter() 함수로 전달 된 callback 함수는

검사하고 있는 값(element)이 배열(dupArr)에서 가장 처음으로 나타는 index와

검사하고 있는 원소의 index와 비교하여

같을 경우에만 true를 리턴합니다.

위의 예제에서 dupArr의 값이 순서대로 전달되면

'dupArr.indexOf(element) === index' 구문은

true, true, true, false, false 를 순서대로 리턴하여

중복되는 값이 첫번째로 나타나는 경우에만 filter 함수에서 걸러지도록 하였습니다.

 

이 구문이 잘 이해가 가지 않는다면,

다음의 filter(), indexOf() 함수 설명을 좀 더 참조하세요.

 

[Javascript] 배열의 특정 값 찾기 - find(), filter()

[Javascript] 배열의 특정 값 찾기 - find(), filter()

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

 

 

 

3. forEach(), includes()

forEach() 함수는 주어진 배열을 순회하면서, 배열의 원소들로 주어진 callback함수를 실행합니다.

include() 함수는 주어진 배열에 특정 값이 포함되는지 여부를 검사합니다.

 

const dupArr = [1, 2, 3, 1, 2];

let uniqueArr = [];
dupArr.forEach((element) => {
    if (!uniqueArr.includes(element)) {
        uniqueArr.push(element);
    }
});

document.writeln(Array.isArray(uniqueArr));
document.writeln(uniqueArr);

 

위 예제는

 

dupArr.forEach(callback);

dupArr(중복이 있는 배열)을 순회하면서

 

if (!uniqueArr.includes(element))

uniqueArr(중복이 없는 배열)이 배열의 원소를 가지고 있지 않다면,

 

uniqueArr.push(element)

uniqueArr에 배열의 원소를 집어 넣어줍니다.

 

[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

[Javascript] 배열에 특정 값이 포함되어 있는지 여부 체크하기

[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)

[Javascript] 배열 앞, 뒤에 값 추가, 삭제하기 (1)

 

 

 

---

 

Set 객체, indexOf(), filter(), forEach(), includes()를 사용하여

배열의 중복된 값을 제거하는 방법을 알아보았습니다.