Array( ).fill( ).map

1~100까지 까지 배열을 만들 때 다양한 방법을 시도할 수 있다.

Array(100).fill().map((v, i) => i+1)

✔️ Array().fill().map으로는 이렇게 생성할 수 있다.
원리를 알아보자.

📌 1. Array로 빈 배열을 생성한다.

const arr = Array(100);
console.log(arr);

[ <100 empty items> ] //결과

결과값은 100 empty items로 빈배열이 생성된다.

📌 2. fill로 그 안에 빈 값으로 채운다.

const arr = Array(100).fill();
console.log(arr);
[
  undefined, undefined, undefined, undefined, undefined, undefined,
  undefined, undefined, undefined, undefined, undefined, undefined,
  undefined, undefined, undefined, undefined, undefined, undefined,
  undefined, undefined, undefined, undefined, undefined, undefined,
  undefined, undefined, undefined, undefined, undefined, undefined,...]

📌 3. map 함수를 사용해서 각 자리 index에 해당하는 값 할당하기

const arr = Array(100).fill().map((arr, i) => {  // (arr: 현재값, i:인덱스)
    return i
})

console.log(arr);

[
   0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11,
  12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
  24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
  36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, ... 99]

1. Array(100).fill()의 각 값(undefined)을 map()을 통해 하나씩 불러와서 i로 return
2. map()은 각각 return한 값으로 이루어진 배열을 생성함

어떤 분은 페이지네이션을 구현할 때 이 함수를 사용하셨다고 한다.