[팁] 1~n 배열 만들기

2021. 4. 16.

JavaScript 로 1 ~ n 까지의 숫자 배열을 만들고 싶어졌다. 쉽게 생각할 수 있는 방법은 새로운 n 크기의 배열을 만든 뒤 map 메서드를 사용해 숫자를 1부터 n까지 채워 넣는 것이다.

const nums = new Array(5).map((_, i) => i + 1);

하지만 위 코드의 결과는 우리가 예상한 것과 다르게 나온다.

console.log(nums);
// [empty * 5]

순차적인 값이 들어가길 기대한 것과 달리, 배열의 모든 값은 여전히 비어있다. 왜일까? 버그일까? 아니다. MDN의 Array.prototype.map 문서를 보면 아래와 같은 내용이 나온다.

callback is invoked only for indexes of the array which have assigned values (including undefined).

map 메서드는 값이 할당된 인덱스에 대해서만 동작한다고 되어 있다. new Array(n)으로 생성된 배열은 모든 값이 비어있다. undefined로도 채워져 있지 않다. 때문에 map 메서드가 동작하지 않는 것이다.

그렇다면 해결 방법은? 값을 채워준 뒤 map 메서드를 사용하면 된다.

const nums = new Array(5).fill(0).map((_, i) => i + 1);
console.log(nums);
// [1, 2, 3, 4, 5];

좀 더 ES6+스러운 코드도 있다.

const nums = [...new Array(5)].map((_, i) => i + 1);
console.log(nums);
// [1, 2, 3, 4, 5];