[JavaScript] 배열에서 중복된 값 제거하는 4가지 방법 (set, filter, index of, reduce)

🤔 Set

set은 중복데이터저장을 허용하지 않는 자료구조임.

그래서 set을 한 번 거치면 중복제거가 되는 구조.

 

근데 얘는 {}형태로 나옴. 다시 배열의 형태로 바꾸려면

1.  [...set operator] 문법이나
2.  Array.form

이 두 가지로 간단하게 변환이 가능함

let arr = [1, 1, 2, 3, 1];

let newArr = new Set(arr);	// {1, 2, 3}
console.log([...newArr]);	// [1, 2, 3]
console.log(Array.form(newArr);	// [1, 2, 3]

 

 

 

 

 

 

🤔 filter(), indexOf()

indexOf(element)는 배열에서 요소의 index를 리턴하는데,

중복값이 있을 경우 낮은 Index를 리턴함.

그래서 indexOf(element) === index가 true가 되는 경우는 하나뿐이고, 다른 중복된 값은 flase가 리턴되어 filter에 의해 걸러짐.

참고로 filter(lambda)는 람다가 true일 때 그 요소를 결과에 포함시킴.

let arr = [1, 1, 2, 3, 1];

let newArr = arr.filter((element, index) => arr.indexOf(element) === index);
console.log(newArr);	// [1, 2, 3]

 

 

 

 

 

🤔 reduce()

reduce()는 배열 요소의 값들을 순차적으로 순회하면서 하나의 값을 만드는 함수임.

초기값 initialValue가 주어지면, 배열의 0번 index로부터 연산을 수행하고, 그 결과를 다음 연산의 인자(accumulator)로 전달함. (누적한다고 생각하면 될 듯)

아래 예제는 reduce로 중복제거를 하는 방법인데 accumulator에 추가 안 된 요소라면 추가하고, 그렇지 않으면 추가하지 않음.

+) 리듀스는 자주 쓰는 함수라 알아두면 좋을 듯하다.

let arr = [1, 1, 2, 3, 1];

let newArr = arr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], [])
console.log(newArr);	// [ 1, 2, 3]

 

 

 

 

🤔 for 반복문

반복문으로 모든 요소를 돌면서 중복값을 제거하도록 구현할 수 있음.

아래 예제는 forEach를 사용해 구현했음

let arr = [1, 1, 2, 3, 1];
let newArr = [];

arr.forEach((element)=>{
	if(!newArr.includes(element)){
    	newArr.push(element);
    }
});

console.log(newArr);	// [1, 2, 3]

 

 

 

 

TMI. 난 보통 이렇게 쓴다. 구냥 제일 간단하기 때문

cosnt newArr = [...new Set(arr)]

 

 

 

 

 

---

 

🛠️ Reference

https://codechacha.com/ko/javascript-remove-duplicates-in-array/