[ Javascript ] fill 배열 메서드를 이용해 초기값 채워넣기

Array.prototype.fill() - JavaScript | MDN

Array.prototype.fill() - JavaScript | MDN

 

 

Array.prototype.fill

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

 

이때 원본 배열이 변경된다.

const arr = [1, 2, 3];
arr.fill(0);
console.log(arr);   // [0, 0, 0]

 

 

두 번째 인수로 요소 채우기를 시작할 인덱스를 전달할 수 있다.

const arr = [1, 2, 3];
arr.fill(0, 1);
console.log(arr);   // [1, 0, 0]

 

 

세 번째 인수로 요소 채우기를 멈출 인덱스를 전달할 수 있다.

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3);
console.log(arr);   // [1, 0, 0, 4, 5]

 

 

이를 통해 초기값을 할당한 배열을 생성하고 싶을 때

const newArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

이렇게 손으로 다 써줄 필요 없이

const newArr = Array(12).fill(0);

 

Array 생성자 함수로 일정한 크기의 배열을 만들고 내부 요소를 fill로 할당할 수 있다.

 

 

 

실제 적용 예시

const recentDates: Ref<string[]> = ref(Array(12).fill('', 0));