new Array(length).map()으로 배열 초기화시 콜백이 실행되지 않는 문제

자바스크립트에서 배열을 초기화하려고 new Array(4).map(() => [])을 사용했는데 의도대로 동작하지 않았다.

 

원인을 찾아보니 JavaScript의 빈 슬롯과 undefined의 차이, 그리고 map() 메서드가 빈 슬롯에 대해 콜백을 실행하지 않는다는 특성 때문이었다.

 

문제 상황

특정 크기의 배열을 만들고 각 요소를 []로 초기화하려고 했다.

const result = new Array(4).map(() => []);
console.log(result); // 기대: [[], [], [], []]

 

하지만 실제 결과는 달랐다.

console.log(result); // [empty × 4]
console.log(result[0]); // undefined

 

원인 분석

빈 슬롯 vs undefined

자바스크립트에서 new Array(length)는 해당 길이만큼의 빈 슬롯 배열을 만든다.

이는 단순히 undefined로 채워진 배열과는 다르다.

// 빈 슬롯을 가진 배열
const emptySlots = new Array(3);
console.log(emptySlots); // [empty × 3]

// undefined를 가진 배열
const undefinedArray = [undefined, undefined, undefined];
console.log(undefinedArray); // [undefined, undefined, undefined]

둘 다 arr[0]은 undefined를 반환하지만, 내부적으로는 슬롯 존재 여부가 다르다.

빈 슬롯은 실제로 요소 자체가 존재하지 않으며, undefined는 존재하는 요소에 값이 없는 것일 뿐이다.

 

map()은 빈 슬롯에 대해 콜백을 실행하지 않는다

Array.prototype.map()은 배열 내 존재하는 요소에 대해서만 콜백을 실행한다. 빈 슬롯에 대해서는 콜백 함수가 아예 호출되지 않는다.

// 빈 슬롯의 경우
const emptySlots = new Array(3);
const result1 = emptySlots.map(() => 'filled');
console.log(result1); // [empty × 3]

// undefined의 경우 
const undefinedArray = [undefined, undefined, undefined];
const result2 = undefinedArray.map(() => 'filled');
console.log(result2); // ['filled', 'filled', 'filled']

 

따라서 다음 코드는 빈 슬롯들에 대해 콜백이 실행되지 않아 초기화가 실패한다.

const result = new Array(4).map(() => []);
console.log(result); // [empty × 4]

 

참고: 콜백을 실행하지 않는 다른 메서드들

map() 외에도 다음 메서드들은 빈 슬롯에 대해 콜백을 실행하지 않는다.

const arr = new Array(3);
arr.forEach(() => console.log('실행')); // 출력 없음
arr.filter(() => true); // []
arr.some(() => true); // false
arr.every(() => true); // true

 

해결 방안

방법 1. fill()로 실제 값을 채워 슬롯을 생성

const result = new Array(4).fill(null).map(() => []);
console.log(result); // [[], [], [], []]

방법 2. Array.from() 사용

const result = Array.from({ length: 4 }, () => []);
console.log(result); // [[], [], [], []]

방법 3. 반복문으로 직접 초기화

const result = [];
for (let i = 0; i < 4; i++) {
  result[i] = [];
}

 

정리

• new Array(length)는 내부적으로 빈 슬롯을 생성한다
• 빈 슬롯은 undefined와 다르며, map(), forEach(), filter() 등의 메서드는 빈 슬롯에 대해 콜백을 실행하지 않는다
• 배열을 초기화할 때는 fill() 또는 Array.from() 등을 사용해 명시적으로 요소를 생성해줘야 한다

이런 미묘한 차이를 몰라서 코드가 의도와 다르게 동작하게 되었고, 앞으로 배열을 초기화할 때에는 이런 특성을 염두에 두고 적절한 방법을 선택해야겠다는 생각을 했다.