Array.fill() 메서드

jaedie·2020년 11월 25일
1

JavaScript

목록 보기
7/7
arr.fill(value[, start[, end]])

value: 배열을 채울 값.
start: 시작 인덱스, 기본 값은 0.
end: 끝 인덱스, 기본 값은 this.length

예제1

예제의 1번 row 부터 보면, fill() 메서드에서 필수 매개변수는 value임을 알 수 있다. start 나 end 배개변수가 없으면 타겟이 된 배열의 길이와 동일한 배열을 return하는데, 각 요소가 value 인자로 넣은 '4' 임을 확인할 수 있다.

2~6번 row는 start와 end 매개변수의 활용법을 보여준다.
start는 말 그대로 value인자로 들어간 값이 return될 배열의 몇 번째 index에서부터 시작될지를 정한다. 여기서 start는 해당 index를 포함한다.

end는 start가 시작한 value의 나열을 return될 배열의 몇 번째 index에서 중지하고 해당 index 이후부터는 타겟배열의 기존 요소를 반영할지 정하는 배개변수이다. 여기서 주의할 점은 end의 index는 value를 포함하지 않는다는 것이다.

타겟이 되는 배열의 기존값을 보존할 필요가 없다면 Array() 생성자 메서드를 사용해서도 사용할 수 있다는 내용이 7번재 row다.

예제2

fill() 메서드의 진짜 흥미로운 점은 위 사진에서 볼수 있다.

arr라는 변수에 Array()생성자와 fill()메서드를 사용해서 객체 3개가 담긴 배열을 할당하였다.

이후 arr[0].a = 'aa' 를 통해서 arr의 index 0에 'a'라는 키와 'aa'라는 값을 할당했다.

이상한 점은 이후에 발생하는데, 다시 arr[0].b = 'bb' 로 앞전과 동일 index 0 에만 새로운 키 'b'와 새로운 값 'bb'를 추가하려고 하면 배열안의 모든 객체에 동일하게 적용된다는 점이다.

그 아래 arr2 를 통해서 fill()메서드를 제외한 arr와 동일한 값으로 테스트를 진행한 결과, 당연히 역시나 arr[0]에만 재할당이 적용된 것을 확인할 수 있었다.

여기에서 추론할 수 있는 사실은 fill()메서드를 사용해 객체를 담은 배열을 생성하게 되면, 각 객체가 동일한 메모리 주소값을 할당 받는다는 것이다.

결론

평상시 개발을 할때 이해도 없이 사용한 메서드를 학습하고 뜯어 보는것만으로도 많은 공부가 된다.

메서드 하나가 한 자루의 칼이라고 봤을 때, 충분한 이해없이 해당 메서드를 사용한다는 것은 칼의 끝이나 칼자루만을 사용하는 것과 동일하다.

기왕 칼을 쓰는거 익히는데 시간은 더 투자되더라도 칼의 100%를 사용하는 것이 효율적인 부분과 또한 메서드를 힘들게 개발한 개발자에 대한 예의가 아닐까?

profile
<header>frontend developer</header>

0개의 댓글