숫자를 배열로

const number = 5 라는 숫자가 있다고 가정했을 때, [1,2,3,4,5]에 배열을 생성하고 싶었다.

  const totalPageNumber = Array(5)
    .fill(1)
    .map((n, idx) => n + idx);
  console.log(totalPageNumber); // 결과 [1,2,3,4,5]

천천히 하나하나 설명하자면

const totalPageNumber = Array(5);
console.log(totalPageNumber); //결과 [비어있음 * 5]

Array 메서드를 사용 [ ] 배열을 만든다. 또한 숫자에 대한 하나의 인수만 있다면 [비어있음 * 숫자]가 나온다. 일단, 숫자 값에 따른 빈 배열을 만들어 준다.

const totalPageNumber = Array(5).fill(1);
console.log(totalPageNumber) // [1,1,1,1,1]

ES6 에서 도입된 fill 메서드로 인수로 전달받은 값을 배열의 처음부터 끝가지 요소로 채운다. 비어있는 배열을 전부 1로 채운다.

 .map((n, idx) => n + idx);
// 결과 [1,2,3,4,5]

이제 map을 돌려준다. 첫 번째 인수인 n은 value 값이고 두 번째 idx는 index의 값이다. [1+0, 1+1, 1+2, 1+3, 1+4]로 배열이 map을 돌아 다음과 같은 결과가 나온다.