1~N까지의 숫자 배열 만들기(with js)

1에서 9까지의 숫자를 가지는 배열을 만들 때는 [1,2,3,4,5,6,7,8,9]와 같이 일일이 선언할 수 있지만,
일일이 작성하지 않고 함수로 만들 수 있는 방법은 없을까? 이 포스팅에서는 1~N까지의 숫자를 가지는 배열을 만드는 2가지 방법을 알아본다.

1. Array.from 사용하기

Array.from()은 새로운 배열 객체를 생성할 수 있다.

Array.from(A, B)
A에는 배열로 반환하고자 하는 이터러블 객체 B에는 배열의 모든 요소에 대해 호출할 맵핑 함수를 선언

: 먼저 첫번째 인자에 {length: 9}를 넣어주면, 길이가 9인 배열이 생성된다.

const keyboard = Array.from({length:9}); 

//[undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined]

: 그 다음 두 번째 인자는 (v, i)=>i+1을 하면 index+1 형태의 배열이 생성된다.

const keyboard = Array.from({length:9}, (v,i)=>i+1)); 

//[1, 2, 3, 4, 5, 6, 7, 8, 9]

: 만약 다른 배열에 넣어서 사용할 경우 전개 연산자를 이용하면 된다.

const keyboard = [...Array.from({length:9}, (v,i)=>i+1), 'C', 0, '=']; 

//[1, 2, 3, 4, 5, 6, 7, 8, 9, 'C', 0, '=']

2. map() & fill() 사용하기

: 먼저 길이가 9인 배열을 생성한다.

const keyboard = Array(9); 

//[undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined]

: fill()는 배열의 시작 ~ 끝 인덱스 전까지 정적인 값으로 채우는 함수이다.
: 그런데 이 fill()을 map()과 같이 사용하면 map()에서 리턴된 값으로 배열을 채울 수 있다!

const keyboard = Array(9).fill().map((v,i)=>i+1);

////[1, 2, 3, 4, 5, 6, 7, 8, 9]

: 다른 배열에 넣어서 사용할 경우 전개 연산자를 이용하면 된다.

const keyboard = [...Array(9).fill().map((v,i)=>i+1), 'C', 0, '=']; 

//[1, 2, 3, 4, 5, 6, 7, 8, 9, 'C', 0, '=']