[JavaScript] fill() 함수 알아보기

 

fill()

fill(value)
fill(value, start)
fill(value, start, end)

• value (필수)
  • 해당 배열 위치에 넣을 값.
  • value가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조합니다.
• start (옵션)
  • 0 기반으로 채우기를 시작할 인덱스
  • 정수로 변환
  • 음수 인덱스는 배열의 끝부터 거꾸로 셉니다.
• end (옵션)
  •  끝 인덱스
  • 기본값은 배열의 길이
  • 정수로 변환됩니다. end는 포함하지 않습니다.

let arr = [1, 2, 3];

/*arr배열에 value : 4 로 채운다.*/
console.log(arr.fill(4)); // [4, 4, 4]

/*arr배열에 value : 4 를 1번째부터 끝까지 채운다.*/
console.log(arr.fill(4, 1)); // [1, 4, 4]

/*arr배열에 value : 4를 1번째부터 2-1까지 채운다.*/
console.log(arr.fill(4, 1, 2)); // [1, 4, 3]

/*arr배열에 value : 4를 1번째부터 0번째까지 채운다(변경x) */
console.log(arr.fill(4, 1, 1)); // [1, 2, 3]

/*arr배열에 value : 4를 3번째부터 2번째 까지 채운다(변경x)*/
console.log(arr.fill(4, 3, 3)); // [1, 2, 3]

/*arr배열에 value : 4로 -3번째에 채운다. */
console.log(arr.fill(4, -3, -2)); // [4, 2, 3]

/*arr배열에 value : 4를 3번째부터 4번째 까지 채운다.*/
console.log(arr.fill(4, 3, 5)); // [1, 2, 3]

/*길이가 3인 배열에 value : 4를 채운다.*/
console.log(Array(3).fill(4)); // [4, 4, 4]

 

 

map()과 함께 사용하기

let arr = Array(10).fill().map((el, i)=> i+1);

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

let arr2 = Array(100).fill(); // fill()함수에 넘겨주는 인자가 없으니 100개의 "undefined" 생성


arr2.fill().map((a,i) => {
	return i;
});


console.lof(arr2);
// 결과 : 0~99까지 i값 만큼 채운다.
[
   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]

 

 

2차원 배열에서의 주의점

 

fill() 함수에서 가장 주의해야 할 점은 위에서 알아본 것처럼 value가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조합니다. 즉 fill()함수는 value값이 참조타입(객체,배열,함수)이 전달된다면 참조값(값이 저장된 메모리 주소)이 저장됩니다.

 

fill()함수 사용 시 같은 메모리 주소가 저장됩니다.

그렇기 때문에 하나의 배열을 각 배열 요소가 같은 메모리 주소를 참조하기 때문에 arr [0] 번째에 추가하더라도 다른 요소에도 값이 추가가 됩니다.

 

따라서 2차원 배열을 만들 때는 1차원 배열에 또 다른 배열 객체를 추가하여 2차원 배열 만드는 방법을 사용해야 합니다.

 

 

// arr[5][5] (빈 배열 생성)
const arr1 = Array.from(Array(5), () => new Array(5));

// arr[5][2] (1~5로 값을 fill하여 생성)
const arr2 = Array.from(Array(5), () => Array(5).fill().map((v,i) =>i+1));

console.log(arr2); 

/* 결과 : 

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]

*/

 

 

 

 

 

---

 

Reference

• Mdn web docs