JS에서 일정 길이의 배열을 만드는 방법 3가지

js에서 일정 길이의 배열을 만드는 방법에는 여러 가지가 있다. 진짜 아무것도 모른다면 다음과 같이 할 수 있을 것이다.

const arr = [];
for(let i = 0; i < 10; i++) {
	arr.push(i);
}

이렇게 하면 0~9 10개로 찬 array가 만들어질 것이다. 하지만 이 코드는 반복문을 쓰면서 push를 하나씩 하기 때문에 보기에 좋지 않다. 좀 더 좋은 방법을 알아보자.

new Array 와 fill, map을 활용한 방법

const arr = new Array(10).fill().map((v, i) => i);
console.log(arr);

길이 10의 array를 만들고 fill로 undefined로 채운다. 그리고 map 을 이용하여 배열을 채우는 방법이다. 이걸로도 충분히 일정 길이의 배열을 만들 수 있지만 더 좋은 방법이 있다.

Array.from 을 활용한 방법

const arr = Array.from({ length: 10 }, (v, i) => i);
console.log(arr);

이렇게 하면 위에랑 같은 효과를 볼 수 있다. array는 length라는 property가 있는 객체이다. 따라서 {length:10}이라는 객체를 Array.from을 사용하면 undefined로 가득찬 배열이 된다. 뒤에 콜백함수는 map 메서드와 같은 역할을 하는데 따라서 0부터 9로 가득찬 배열이 완성된다.

재귀함수를 이용한 방법

const range = (start, end) =>
  start < end ? [start, ...range(start + 1, end)] : [];

const arr = range(0, 10);
console.log(arr);

재귀함수를 이용한 방법이다. 이 방법은 함수형 프로그래밍에서 많이 쓰이는 것 같다. start, end를 받아서 계속 해서 start가 end 보다 크거나 같을 때까지 계속 재귀를 호출한다. 그러면 똑같이 0부터 9까지의 배열이 완성 된다. 함수형 프로그래밍이라 성능이 그렇게 좋지는 않을 것이라 생각한다.

결론

위 방법들 말고도 다른 방법들이 있겠지만, 위의 방법들을 추천한다. 특히 Array.from을 활용한 방법은 정말 신기하고도 좋은 코드인 것 같다. 그 외에 함수형 프로그래밍을 좋아하시는 분들은 재귀함수를 사용하는 방법을 사용하길 추천한다.