javascript fill 사용법(정수 배열 만들고 합도 구하기)

javascript fill 메서드는 "배열의 시작 인덱스부터 ~ 끝 인덱스 이전까지" 정적인 값 하나로 채우는 메서드다.

 

만약 m개의 길이만큼의 배열을 n으로 시작하는 값으로 채우고 싶다면 어떻게 해야할까?

이럴때 fill 메서드를 사용하면 쉽게 만들수 있다.

function fill_test01(m, n) {
  return Array(m).fill(n);
}

console.log(Array(4)) // Array [undefined, undefined, undefined, undefined]
console.log(fill_test01(5, 2)) // Array [2, 2, 2, 2, 2]

Array(5)라고 만약에 쓴다면 5개의 길이를 갖는 배열을 만들어준다.(default 값은 undefind)

 

난 만약에 똑같은 정적인 값을 채우기 싫은데라고 한다면?

뭐 예를들어서 1부터 10까지의 숫자를 배열로 한번에 만들고 싶은데... 이런게 있을수있으면?

조금만 생각해보면 쉽게 답이 나오는데 아래와 같다.

 

function fill_test02(m) {
  return Array(m).fill().map((obj, index) => index +1);
}

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

 

fill( ) 여기에 값을 넣어주는게 아니라 map( ) 메서드를 이용해서 새로운 배열로 반환하는 개념이다.

1 ~ 10까지 출력하는 배열을 만들었지만 map뒤에 index는 0부터 시작하기 때문에 index + 1 여기 값을 조절하면 101 ~110의 배열을 만든다던지 자기가 원하는 형태의 배열을 쉽게 만들수 있다.

 

응용으로 여기서 구한 값들의 합을 구하고 싶으면?

function fill_test03(m) {
  return Array(m)
    .fill()
    .map((obj, index) => index +1)
    .reduce((accumulator, currentValue) => accumulator + currentValue);
}

console.log(fill_test03(10)) // 55

reduce( ) 메서드를 이용해 각 배열의 합을 쉽게 구할수 있다.

 

 

자 지금까지 정리해보면..

1) 만약 m개의 길이만큼의 배열을 n으로 시작하는 값으로 채우고 싶을 때

2) m개의 길이만큼의 배열을 정적인 숫자가 아닌 규칙을 이용해 동적인 값으로 채우고 싶을 때

3) 1, 2번에 해당하는 배열의 값들의 합을 구할때

 

Array(m).fill().map((obj, index) => index + 1) // 입력된 m의 숫자 배열 만들어줌 (Array - fill - map)

여기서 m 배열의 합을 구하려면? reduce( ) 메서드 추가

끝 ^^