JavaScript reduce()로 배열의 인접한 중복 요소를 하나로 묶는 방법

문자열 배열에 중복된 요소가 연달아 포함되어 있는 경우를 생각해 봅시다.

const arr = ['blue', 'blue', 'green', 'blue', 'yellow', 'yellow', 'green'];

이렇게 구성된 배열을 입력으로 받아, 서로 붙어 있는 중복 요소들을 하나의 값으로 병합하는 JavaScript 함수를 작성해야 합니다.

즉, 위 배열이 입력되었을 때 함수가 반환해야 하는 결과는 다음과 같습니다.

const output = ['blueblue', 'green', 'blue', 'yellowyellow', 'green'];

동작 원리

핵심은 reduce() 메서드입니다. 배열을 순회하면서 이전 요소(prev)와 현재 요소(value)를 비교하고, 두 값이 같다면 결과 배열의 마지막 요소에 현재 값을 이어 붙입니다. 값이 다르다면 새로운 그룹을 시작하기 위해 결과 배열에 현재 값을 추가합니다.

예제 코드

const arr = ['blue', 'blue', 'green', 'blue', 'yellow', 'yellow', 'green'];
const combineDuplicate = (arr = []) => {
  let prev = null;
  const groups = arr.reduce((acc, value) => {
    if (prev === value) {
      acc[acc.length - 1] += value;
    } else {
      prev = value;
      acc.push(value);
    }
    return acc;
  }, []);
  return groups;
};
console.log(combineDuplicate(arr));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 'blueblue', 'green', 'blue', 'yellowyellow', 'green' ]

이처럼 reduce()와 이전 값을 저장하는 변수만 활용하면, 별도의 반복문 없이도 인접한 중복 요소를 손쉽게 하나의 그룹으로 묶을 수 있습니다.