자바스크립트로 2차원 배열을 희소 배열(Sparse Array)로 변환하는 방법

문제 소개

다음과 같이 좌표 쌍으로 구성된 2차원 배열이 있다고 가정해 보겠습니다.

const arr = [
  [3, 1],
  [2, 12],
  [3, 3]
];

이 배열의 각 요소는 [행 인덱스, 열 인덱스] 쌍을 나타냅니다. 우리는 이러한 배열을 입력으로 받아 희소 배열(sparse array) 형태로 변환하는 자바스크립트 함수를 작성해야 합니다.

즉, 함수는 입력 배열에 지정된 인덱스 위치의 요소에만 값(1)을 할당하고, 나머지 모든 요소는 undefined로 초기화된 새로운 2차원 배열을 생성해야 합니다.

기대 결과

위 입력 배열에 대해 함수는 다음과 같이 값을 할당해야 합니다.

output[3][1] = 1;
output[2][12] = 1;
output[3][3] = 1;

나머지 모든 요소는 undefined로 초기화되므로, 최종 출력은 다음과 같은 형태가 됩니다.

const output = [
  undefined,
  undefined,
  [
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    1
  ],
  [
    undefined,
    1,
    undefined,
    1
  ]
];

해결 코드

이를 구현한 코드는 다음과 같습니다.

const arr = [
  [3, 1],
  [2, 12],
  [3, 3]
];
const map2D = (arr = []) => {
  const res = [];
  arr.forEach(el => {
    res[el[0]] = res[el[0]] || [];
    res[el[0]][el[1]] = 1;
  });
  return res;
};
console.log(map2D(arr));

코드 동작 원리

함수의 동작을 단계별로 살펴보면 다음과 같습니다.

• 먼저 결과를 저장할 빈 배열 res를 생성합니다.
• forEach를 사용해 입력 배열의 각 좌표 쌍 [행, 열]을 순회합니다.
• res[el[0]] = res[el[0]] || [] 구문은 해당 행이 아직 존재하지 않을 경우에만 새 배열을 생성하고, 이미 존재한다면 기존 배열을 그대로 재사용합니다.
• 이후 res[el[0]][el[1]] = 1로 해당 위치에 값 1을 할당합니다.

자바스크립트에서는 배열 인덱스에 건너뛰어 값을 할당하면 중간 인덱스가 자동으로 빈 슬롯(empty slot)으로 채워지는 희소 배열이 생성됩니다. 이 특성을 활용하면 별도의 초기화 과정 없이도 간결하게 희소 배열을 만들 수 있습니다.

출력 결과

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

[
  <2 empty items>,
  [ <12 empty items>, 1 ],
  [ <1 empty item>, 1, <1 empty item>, 1 ]
]

출력 결과에서 확인할 수 있듯이, 값이 할당되지 않은 인덱스는 empty item으로 표시됩니다. 이는 undefined가 명시적으로 할당된 상태와는 미묘하게 다른, 값 자체가 존재하지 않는 상태를 의미합니다. 다만 두 경우 모두 접근 시 undefined를 반환하므로 실제 사용에는 큰 차이가 없습니다.