2021-07-11
자바스크립트 내에서 중복된 값을 가지는 여러 인덱스들이 존재하며, 이를 제거하고 싶어질 수가 있는데, 이럴 경우 일일이 for문과 같은 루프를 돌리는 것보다 간단히 제거하는 방법이 있다. 이 방법을 알아보자.
- 예제
아래의 예제는 간단한 문자들을 가지고 있는 배열이며, 불필요하게 중복되는 문자열이 다수 존재하는 것을 확인할 수 있다.
const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd']
console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ]- Set
set이라는 자료구조는 중복된 값을 포함할 수 없다. 오로지 유니크한 값들만 가지게 되는데, 이를 활용해보자.
const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd']
const set1 = new Set(arr)
console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ]
console.log(set1) // Set { 'W', 'o', 'r', 'l', 'd' }
set1이라는 변수에 Set 객체에 매개값을 중복된 배열 arr을 넣어준 후 출력해 보면 중복된 값들을 제거되고 저장된 것을 확인할 수 있다. 이제 마지막으로 다시 새로운 배열에 담아주면 끝난다.
- Array.from()
Array.from() 를 사용하여 배열 형식으로 변환해주면 중복 값이 제거된 배열 데이터 형식으로 정리된다.
const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd']
const set1 = new Set(arr)
const arr2 = Array.from(set1)
console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ]
console.log(set1) // Set { 'W', 'o', 'r', 'l', 'd' }
console.log(arr2) // [ 'W', 'o', 'r', 'l', 'd' ]-코드 한줄 정리
물론 한줄에 코드를 정리할 수도 있다.
const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd']
const set1 = new Set(arr)
const arr2 = Array.from(set1)
console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ]
console.log(set1) // Set { 'W', 'o', 'r', 'l', 'd' }
console.log(arr2) // [ 'W', 'o', 'r', 'l', 'd' ]
//한줄로 코드 정리
const arr3 = Array.from(new Set(arr))
console.log(arr3) // [ 'W', 'o', 'r', 'l', 'd' ]메인 이미지 출처 : Photo by Ruben Frivold on Unsplash