JavaScript에서 두 배열을 비교하고 누락된 요소는 null로 채우는 방법

두 개의 배열을 비교한 결과를 바탕으로 세 번째 배열을 만드는 함수를 작성해야 합니다. 새로 만들어지는 배열은 두 번째 배열의 모든 요소를 그대로 담되, 첫 번째 배열에는 존재하지만 두 번째 배열에는 빠져 있는 요소의 자리는 null로 채워야 합니다.

예시

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

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

이 경우 원하는 출력 결과는 다음과 같습니다.

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

요소 'g'는 첫 번째 배열에는 있지만 두 번째 배열에는 없으므로, 결과 배열에서 해당 위치가 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));

코드 동작 원리

compareAndFill 함수는 map() 메서드를 사용해 첫 번째 배열의 각 요소를 순회합니다. 현재 요소가 두 번째 배열의 대응 위치에 있는 요소와 일치하면 그 값을 그대로 반환합니다. 반면 일치하지 않으면 null을 반환하고, offset 변수를 1 감소시켜 이후 비교에서 발생하는 인덱스 어긋남을 보정합니다. 덕분에 중간에 요소가 빠져도 이후 요소들이 올바르게 대조됩니다.

실행 결과

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

[ 'f', null, 'h' ]