[Javascript] 배열 매서드 fill()

fill()은 배열의 매서드이다. 원하는 값을 배열의 원하는 요소 자리에 채우고 싶을 때  fill() 함수를 사용한다. fill() 함수의 기본 형식부터 여러가지 예제를 살펴보자.

 

 

 

 

 

목차

1. fill() 기본 형식
2. fill() 기본 예제
3. 음수 인덱스 값
4. 배열 생성 후 fill()로 값 채우기

 

 

 

 

 

1. fill() 기본 형식

 

배열명.fill(value, start, end);

 

• value : 해당 배열 위치에 넣을 값 (필수 값)
• start : 시작 인덱스 (선택사항, 기본값=0)
• end : 끝 인덱스 (선택사항, 기본값=배열의 length)
• 반환값(return 값) : 지정한 value 값을 채운 배열이 반환된다.

 

fill()은 배열이 반환되는 배열의 매서드이다. value, start, end 3개의 매개변수를 가진다. value값을 시작 인덱스부터 끝 인덱스 '전'까지 채우는 형식이다. 끝 인덱스까지 채워지는 게 아니니 주의하여야 한다.

 

 

 

 

 

2. fill() 기본 예제

const arr1 = ['a', 'b', 'c', 'd'];
console.log(arr1.fill('z', 1, 3));
// ["a", "z", "z", "d" ]
 
const arr2 = ['a', 'b', 'c', 'd'];
console.log(arr2.fill('z', 1));
// ["a", "z", "z", "z" ]
 
const arr3 = ['a', 'b', 'c', 'd'];
console.log(arr3.fill('z'));
// ["z", "z", "z", "z" ]

 

arr1

매개변수(인자) 자리에 value, start, end를 모두 넣으면 시작 인덱스부터 끝 인덱스 전까지 있는 요소를 지정한 value 값으로 변경한다.

 

arr2 

매개변수(인자) 자리에 value, start를 넣으면 시작 인덱스부터 배열 끝까지(length만큼) 지정한 value값으로 채운다.

 

arr3

매개변수(인자) 자리에 value 값만 넣으면 모든 배열 요소가 지정한 value값으로 바뀐다.

 

 

 

 

 

3. 음수 인덱스 값

 

const arr4 = ['a', 'b', 'c', 'd'];
console.log(arr4.fill('z', -3, -1));
// ["a", "z", "z", "d" ]
 
const arr5 = ['a', 'b', 'c', 'd'];
console.log(arr5.fill('z', -3));
// ["a", "z", "z", "z" ]

 

arr4

start, end 인덱스가 음수일 때, 맨 뒤 배열 요소가 -1이 된다. 따라서 -3 인덱스부터 -1 인덱스 전까지 value 값으로 채운다.

 

a	b	c	d
-4	-3	-2	-1

▼

 

a	z	z	d
-4	-3	-2	-1

 

 

arr5

-3 인덱스부터 배열 끝까지(length만큼) 지정한 value 값으로 채운다.

 

 

 

 

 

 

 

4. 배열 생성 후 fill()로 값 채우기

새로운 배열을 생성한 후 fill()을 통해 원하는 value값을 채울 수 있다. 즉, 새 배열의 초기값을 지정할 수 있다. Array() 함수로 5개 요소가 담긴 배열을 만든 후, fill()로 value 값을 채우는 형식이다.

 

const arr6 = Array(5).fill();
console.log(arr6);
// [undefined, undefined, undefined, undefined, undefined]
 
 
const arr7 = Array(5).fill('a');
console.log(arr7);
// ['a', 'a', 'a', 'a', 'a']
 
const arr8 = Array(5).fill().map((item, index) => index + 1); 
console.log(arr8);
// [1, 2, 3, 4, 5]

 

arr6

fill()의 value 값을 지정해주지 않을 경우 모든 배열 요소가 undefined로 세팅된다.

 

arr7

배열의 모든 요소에 'a'라는 value 값이 채워진다.

 

arr8

Array()로 배열을 생성한 후, fill()을 사용해 각 요소의 빈자리를 만들어준다. map() 함수로 다섯 자리를 순회하면서 각 인덱스에 1을 더한 값을 출력해 배열로 만든다. 1부터 5까지 순서대로 출력된다. 인덱스에 1을 더하지 않았다면 [0, 1, 2, 3, 4]로 출력되었을 것이다.