[JavaScript] 배열의 원소만큼 추가하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

문제

아무 원소도 들어있지 않은 빈 배열 X가 있다.

 

양의 정수 배열 arr가 매개변수로 주어질 때, arr의 앞에서 부터 순서대로 원소를 보면서

 

원소가 a라면 X의 맨 뒤에 a번 만큼 추가하는 일을 반복한 뒤의 X 배열을 반환하는 함수를 작성해라.

 

 

예시

arr	X
[5, 1, 4]	[5, 5, 5, 5, 5, 1, 4, 4, 4, 4]

728x90

 

 

나의 풀이

function solution(arr) {
  const X = [];
  
  arr.map((v) => {
    // arr 원소의 value 만큼 X 배열에 push
    for( let i = 0; i < v; i++ ) {
      X.push(v);
    }
  });
    
  return X;
}

 

 

다른 풀이

function solution(arr) {
  return arr.reduce((a, c) => a.concat(Array(c).fill(c)), [])
}

 

 

Array.prototype.preduce()

매개변수

reduce는 매개변수로 callback 함수와 초기값(initialValue)을 가진다.

 

callback

배열의 각 요소들에 대해서 reducer 함수를 실행하고, 하나의 결과값을 반환한다.

 

reducer 함수는 총 4개의 인자를 가진다.

  • 누산기 (accumulator)

    - 콜백의 반환 값을 누적한다.

    - 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우엔 initialValue의 값이다.

 

  • 현재 값 (currentValue)

    - 처리할 현재 요소

 

  • 현재 인덱스 (currentIndex)

    - 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아닌 경우 1부터 시작한다.

 

  • 원본 배열 (array)

    - reduce()를 호출한 배열

 

initialValue (Optional)

callback의 최초 호출에서 첫 번째 인수에 제공하는 값이고, 제공하지 않는 경우, 배열의 첫 번째 요소를 사용한다.

 

빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

 

동작 방식

[0, 1, 2, 3, 4].reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);

callback	accumulator	currentValue	currentIndex	result
1번째 호출	0	1	1	1
2번째 호출	1	2	2	3
3번째 호출	3	3	3	6
4번째 호출	6	4	4	10

 

초기값을 따로 설정해주지 않았으므로 배열의 첫 번째 값인 0이 초기값이 된다.

 

총 4번 반복하여 실행되고, 누적된 값에 현재값을 더한 값을 반환한다.

 

초기값을 제공해주는 경우에도 마찬가지로 동작한다.

[0, 1, 2, 3, 4].reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array,
) {
  return accumulator + currentValue;
}, 10);

callback	accumulator	currentValue	currentIndex	result
1번째 호출	10	0	0	10
2번째 호출	10	1	1	11
3번째 호출	11	2	2	13
4번째 호출	13	3	3	16
5번째 호출	16	4	4	20

 

 

Array.prototype.fill()

배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경한다. 그리고 수정된 배열을 반환한다.

 

매개변수

value

배열을 채울 값이고, 배열의 모든 요소는 이 값이 된다.

 

value가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조한다.

 

start (Optional)

채우기를 시작할 0 기반 인덱스로, 정수로 변환된다.

  • 음수 인덱스는 배열의 끝부터 거꾸로 센다.

    - start < 0 인 경우, start + array.length가 start 값으로 사용된다.

 

  • start < -array.length 또는 start가 생략된 경우, 0이 사용된다.

 

  • start >= array.length이면, 아무 인덱스도 채워지지 않는다.

 

end (Optional)

채우기를 끝낼 0 기반 인덱스로, 정수로 변환된다.

 

fill()은 end까지 채우며 end 값은 포함하지 않는다.

 

  • 음수 인덱스는 배열의 끝부터 거꾸로 센다.

    - end < 0 인 경우, end + array.length가 end 값으로 사용된다.

 

  • end < -array.length 또는 start가 생략된 경우, 0이 사용된다.

 

  • end >= array.length 이거나 end가 생략된 경우, array.length가 사용되어 끝까지 모든 인덱스가 채워진다.

 

  • end가 정수로 변환된 후, after 보다 앞에 위치면, 아무 인덱스도 채워지지 않는다.

 

예제

// 매개변수로 value만 넣는 경우
[0, 1, 2, 3].fill(4); // [4, 4, 4, 4]

// 매개변수로 value와 start를 넣는 경우
[0, 1, 2, 3].fill(4, 1); // [0, 4, 4, 4]

// 매개변수를 모두 넣는 경우
[0, 1, 2, 3].fill(4, 1, 2); // [0, 4, 2, 3]

// start와 end가 같은 경우
[0, 1, 2, 3].fill(4, 1, 1); // [0, 1, 2, 3]
[0, 1, 2, 3].fill(4, 3, 3); // [0, 1, 2, 3]

// start와 end의 값이 음수인 경우
// start + arr.length
// end + arr.length
[0, 1, 2, 3].fill(4, -4, -3); // [4, 1, 2, 3]

// start와 end가 숫자가 아닌 경우
[0, 1, 2, 3].fill(4, NaN, NaN); // [0, 1, 2, 3]

// start와 end가 범위를 벗어난 경우
[0, 1, 2, 3].fill(4, 5, 7); // [0, 1, 2, 3]

// fill() 함수를 사용한 배열 생성
Array(4).fill(4); // [4, 4, 4, 4]
Array(4).fill({}); // [{}, {}, {}, {}]