JavaScript Array.fill.map

Array.fill.map 기본동작

(1) Array

const numbers = Array(10); 

console.log(numbers); // [ <10 empty items> ]

numbers라는 배열에 10개의 빈 공간을 만들겠다

 

 

 

(2) fill

const numbers = Array(10).fill(0);

console.log(numbers); // [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

비어있던 10개의 빈 공간을 숫자 0으로 채워 넣겠다

 

 

 

(3) map

배열의 길이만큼 반복하는 함수로, 주어진 배열을 바꾸고 싶을 때 사용. map으로 기존 배열을 조작하면 새로운 배열이 생성(깊은 복사, deep copy)된다. 첫번째 매개변수는 내용, 두번째 매개변수는 순서를 의미한다.

const numbers = Array(10)

  .fill()

  .map(function (item, idx) {

    return idx;

  });

console.log(numbers); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

이 경우, 순서를 반환하기로 했으므로 배열의 비어있던 10개의 공간에 순번인 0부터 9까지가 들어간다.

 

const numbers = Array(10)

  .fill()

  .map(function (item, idx) {

    return "item";

  });

console.log(numbers); // [ `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item`, `item` ]

이 경우, "item"이라는 문자열을 반환하기로 했으므로, 빈 10개의 공간에 문자열 "item"이 들어간다.

 

const numbers = Array(10)

  .fill()

  .map(function (item, idx) {

    return "item" + idx;

  });

console.log(numbers); // [ `item0`, `item1`, `item2`, `item3`, `item4`, `item5`, `item6`, `item7`, `item8`, `item9` ]

이 경우, "item"이라는 문자열과 순서를 반환하기로 했으므로 빈 공간에 문자열과 숫자가 동시에 들어간다.