JavaScript 배열에서 중복 요소를 제거하면서 길이를 동일하게 유지하는 방법

JavaScript에서 배열을 입력받아 모든 중복 값을 제거한 뒤, 제거된 개수만큼 빈 문자열을 배열 끝에 삽입하여 원래 배열의 길이를 그대로 유지하는 함수를 작성해야 하는 경우가 있습니다.

예를 들어 중복 값이 4개 발견되면, 해당 값들을 모두 제거한 후 배열 끝에 빈 문자열 4개를 추가해야 합니다.

이번 포스팅에서는 reduce와 lastIndexOf 메서드를 활용해 이 문제를 해결하는 방법을 살펴보겠습니다.

구현 예제

const arr = [1,2,3,1,2,3,2,2,3,4,5,5,12,1,23,4,1];
const deleteAndInsert = arr => {
    const creds = arr.reduce((acc, val, ind, array) => {
        let { count, res } = acc;
        if(array.lastIndexOf(val) === ind){
            res.push(val);
        }else{
            count++;
        }
        return {res, count};
    }, {
        count: 0,
        res: []
    });
    const { res, count } = creds;
    return res.concat(" ".repeat(count).split(" "));
};
console.log(deleteAndInsert(arr));

코드 동작 원리

위 코드가 어떻게 작동하는지 단계별로 정리하면 다음과 같습니다.

1. reduce 메서드로 배열을 순회하면서, 각 요소의 현재 인덱스(ind)가 해당 값이 마지막으로 등장하는 인덱스(lastIndexOf(val))와 일치하는지 확인합니다.

2. 두 값이 일치한다면 해당 값은 중복이 아니므로 결과 배열 res에 저장됩니다.

3. 일치하지 않는다면 중복 값이므로 count를 1씩 증가시켜 제거된 개수를 기록합니다.

4. 순회가 끝나면 " ".repeat(count).split(" ")를 통해 중복 개수만큼의 빈 문자열 배열을 만들고, concat으로 기존 결과 배열 뒤에 붙여 전체 길이를 유지합니다.

실행 결과

코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

[
    2, 3, 5, 12, 23, 4, 1,
    '', '', '', '', '', '', '',
    '', '', '', ''
]

결과를 보면 중복이 제거된 고유한 숫자들 앞쪽에 배치되고, 제거된 중복 요소의 개수만큼 빈 문자열이 배열 끝에 채워져 원본 배열과 동일한 길이(17)를 유지하는 것을 확인할 수 있습니다.