<Programmers> 배열의 원소만큼 추가하기

문제

아무 원소도 들어있지 않은 빈 배열 X가 있습니다.
양의 정수 배열 arr가 매개변수로 주어질 때,
arr의 앞에서부터 차례대로 원소를 보면서 원소가 a라면 X의 맨 뒤에 a를 a번 추가하는 일을 반복한 뒤의 배열 X를 return 하는 solution 함수를 작성해 주세요.

---

문제 접근

1. 정수 배열 arr의 길이만큼 반복한다.
2. 배열 i번째 값만큼 다시 순회한다.
3. 반복하는 값을 빈 배열에 push한다.

---

문제 풀이

function solution(arr) {
  const resultArr = [];

  // 각 arr 배열의 요소에 대해 반복합니다.
  for (let i = 0; i < arr.length; i++) {
    // arr[i] 값만큼 반복하여 resultArr에 추가합니다.
    for (let j = 0; j < arr[i]; j++) {
      console.log("arr[i] : ", arr[i]);
      resultArr.push(arr[i]);
    }
  }

  console.log(resultArr);

  // 최종적으로 채워진 배열 resultArr을 반환합니다.
  return resultArr;
}

solution([5, 1, 4]); // [5, 5, 5, 5, 5, 1, 4, 4, 4, 4]

---

더 쉬운 풀이

function solution(arr) {
  const fillArr = arr.map((value) => new Array(value).fill(value));

  return [].concat(...fillArr);
}

solution([5, 1, 4]); // [5, 5, 5, 5, 5, 1, 4, 4, 4, 4]

new Array(10) ➡️ 빈 배열을 10개 생성
fill(7) ➡️ 7을 배열에 모두 할당

arr.map((value) => new Array(value).fill(value)); ➡️ 빈 배열을 value만큼 생성하고, fill(value) 빈 배열에 value를 채워넣음.

해당 코드를 실행하면 fillArr 상수는 [ [...value...], [...value..], [...value...] ] 형태로 될 것이다.

해당 중첩 배열을 1차 배열로 만들어주기 위해서 [].concat()을 사용할 수 있다.

빈 배열과 concat 내부에 들어온 배열들을 병합

[].concat(...fillArr);

---

정리

1. new Array === Array의 동작방식이 같다는 것을 알게되었다.
   차이점 또한 알게되었다.
   함수로서의 Array는 call이나 apply같은 메서드를 호출할 수 있다.
   하지만 new Array는 생성자 함수이기 때문에 메서드를 호출할 수 없다.

2. fill 메서드는 배열에 value 값을 채워준다.

3. concat 메서드는 공백을 제거하는 용도로만 알고있었는데, 중첩 배열을 flat array로 만들어 줄 수 있음을 알게되었다.

mdn - 생성자 Array
mdn - fill()
mdn - concat()

중첩배열을 만들 때에는 flat()을 사용하지 마세요.