자바스크립트에서 두 배열을 비교하고 누락된 요소는 null로 채우기

문제 소개

이번 글에서는 두 개의 배열을 비교한 뒤, 첫 번째 배열의 길이를 기준으로 새로운 배열을 생성하는 함수를 작성해 보겠습니다. 새 배열에는 두 번째 배열에 존재하는 요소는 그대로 담고, 첫 번째 배열에는 있지만 두 번째 배열에는 없는 요소 자리에는 null을 채워 넣습니다.

예를 들어 다음과 같은 두 배열이 있다고 가정해 보겠습니다.

const arr1 = ['f', 'g', 'h'];
const arr2 = ['f', 'h'];

첫 번째 배열에는 있지만 두 번째 배열에는 없는 요소는 'g' 하나입니다. 따라서 기대하는 출력 결과는 다음과 같습니다.

const output = ['f', null, 'h'];

구현 방법

핵심 아이디어는 map() 메서드로 첫 번째 배열을 순회하면서, 별도의 오프셋(offset) 변수를 사용해 두 번째 배열의 인덱스 위치를 추적하는 것입니다. 요소가 일치하면 해당 값을 그대로 반환하고, 일치하지 않으면 오프셋을 조정한 뒤 null을 반환합니다.

const arr1 = ['f', 'g', 'h'];
const arr2 = ['f', 'h'];

const compareAndFill = (arr1, arr2) => {
  let offset = 0;
  const res = arr1.map((el, i) => {
    if (el === arr2[offset + i]) {
      return el;
    }
    offset--;
    return null;
  });
  return res;
};

console.log(compareAndFill(arr1, arr2));

코드 동작 원리

offset 변수는 지금까지 발견된 불일치 요소의 개수를 음수 값으로 기록합니다. 첫 번째 배열의 요소가 두 번째 배열의 대응 위치 요소와 같으면 그 값을 그대로 반환하고, 다르면 offset을 1 감소시킨 후 null을 반환합니다. 이렇게 하면 두 번째 배열의 인덱스가 첫 번째 배열보다 앞서게 되는 경우에도 각 요소를 정확하게 비교할 수 있습니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[ 'f', null, 'h' ]