[Javascript] Array.fill() 메서드

[Javascript] Array.fill() 메서드

일반적인 배열 생성 (생성자)

const array = Array(5);
array.length = 5;
// length 프로퍼티를 사용하여 배열의 길이 조절
array.length = 2;
array[0] = undefined;

 

위 예시를 보면 Array() 라는 배열 생성자를 사용하여 array라는 배열 변수에 5칸짜리 배열을 생성하였다.

만약 length 프로퍼티를 2로 변경한다면 배열의 가장 큰 인덱스 값이 2가 된다. (즉, length 프로퍼티로 배열의 2~4번째 인덱스에 해당하는 요소들이 배열에서 모두 삭제됨. => length 프로퍼티는 배열을 변경시킬 수 있어 사용에 주의!)

Array.fill( value, start, end ) 메서드 : 원시값

const array = [].fill(5); // array = [5] (리터럴 방식)
const array2 = Array(0).fill(5); // array2 = [5] (생성자 방식)
const array3 = Array(5).fill(5); // array3 = [5, 5, 5, 5, 5]

 

위 코드는 fill 메서드를 통해서 원시값을 채워넣은 예시이다. (얕은 복사)

Array.fill() 메서드  : 객체값 ⭐

const objectArray = Array(5).fill({}); // objectArray = [{}, {}, {}, {}, {}]
objectArray[0].id = 1; //[{ id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }]

 

객체값을 fill() 메서드의 value값으로 채워넣을 경우에 주의할 점이 위 예시 코드이다. 객체를 fill로 복사하고 전달하기 때문에 모두 같은 주소를 참조하고 있다. 따라서 하나를 변경한다면 서로 다른 주소를 바라보고 있지 않고 같은 주소를 바라보고 있어서 모두 동일하게 변경되는 것이다. (깊은 복사)

const numberArray = Array(5).fill(3); // numberArray = [3, 3, 3, 3, 3];
numberArray[0] = 5; // numberArray = [5, 3, 3, 3, 3];

 

객체값을 value값으로 가지는 경우와 다르게 원시값을 가지는 경우엔 첫 번째요소만 값이 변경되는 것을 알 수 있다. 원시값은 항상 값을 복사하기 때문에 서로 다른 메모리 저장 공간에 저장되어 있다.