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));

코드 설명

• lastIndexOf(val) === ind: 현재 요소가 배열에서 마지막으로 나타나는 위치와 현재 인덱스가 같다면 중복이 아니므로 결과 배열에 추가합니다.
• count++: 중복으로 판별된 경우 제거된 값의 개수를 셉니다.
• " ".repeat(count).split(" "): 제거된 개수만큼의 빈 문자열 배열을 생성합니다.
• concat: 고유 값 배열과 빈 문자열 배열을 하나로 합쳐 최종 결과를 만듭니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

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

결과를 보면 원래 배열에서 중복이 제거된 고유 값들이 먼저 배치되고, 뒤따라 제거된 개수만큼의 빈 문자열이 추가된 것을 확인할 수 있습니다. 전체 배열 길이는 입력 배열과 동일하게 유지됩니다.