[Javascript] 배열에 같은 값으로 채우기 - Arrays.fill()

🚀 Arrays.fill()

이번에는 배열을 같은 값으로 채우는 fill() 함수에 대해 알아보겠습니다.

arr.fill(value, start?, end?)

 

🚀 fill() 함수

배열의 start index부터 end index 전까지 value값으로 채워주는 함수입니다.

 

🚀 파라미터

value

배열에 채울 값을 지정합니다.

 

start

value 값을 채울 배열의 시작 index입니다. 입력하지 않으면 기본값은 0입니다.

 

end

value 값을 채울 배열의 종료 index입니다. 입력하지 않으면 기본값은 배열의 길이(arr.length)입니다.

 

➕ 리턴값

지정한 값으로 채워진 배열을 리턴합니다.

 

🚀 예제1

const arr1 = ['a', 'b', 'c', 'd'];
arr1.fill('A'); // ['A', 'A', 'A', 'A']

const arr2 = ['a', 'b', 'c', 'd'];
arr2.fill('A', 1); // 1번 인덱스부터 끝까지... ['a', 'A', 'A', 'A']

const arr3 = ['a', 'b', 'c', 'd'];
arr3.fill('A', 1, 3); // 1번 인덱스부터 3번 인덱스 전까지... ['a', 'A', 'A', 'd']

 

🚀 예제2 - index가 음수일 때

const arr = ['a', 'b', 'c', 'd'];
arr.fill('A', -3, -1); // 인덱스 -3부터 인덱스 -1 전까지... ['a', 'A', 'A', 'd']

 

🚀 배열 초기화

fill() 함수를 배열을 초기화 하는데 사용하면 유용합니다.

Array() 구문을 사용하여 배열을 생성하면, 그 만큼의 element를 가지는 배열이 생성되고,

각 element의 값은 undefined입니다.

여기서 fill() 함수를 사용하면, 생성된 배열의 element의 초기값을 지정할 수 있습니다.

const arr = Array(4).fill('A');
console.log(arr); // ['A', 'A', 'A', 'A']

 

🧑🏻‍💻 활용 - fill() 함수를 이용했던 코테 문제

출처 : 프로그래머스

위 문제는 정수 x와 자연수 n을 입력 받았을 때, 총 n개의 원소가 존재하는 배열이며, 이 원소들은 정수 x의 배수들이 순서대로 들어가게 됩니다.

따라서 처음에 n개의 배열로 각 element들을 정수 x로 초기화하는 것이 우선인데요.

그 이후에는 각 element들을 가져와서 index에 맞게 변형을 시켜줘야 하므로 이어서 map 함수를 사용하면 되겠습니다.

const solution = (x, n) => Array(n).fill(x).map((el, i)=> (i+1)*el);

놀랍게도 이 한 줄이 끝입니다..

fill()를 몰랐을 때는 빈 배열을 만들고 거기에 연산에서 push하고 이런 식으로 했었는데 fill() 함수 간단하게 문제를 해결할 수 있었습니다 👍