나의 풀이

function solution(arr) {
    let answer = [];
    
    arr.map(x => {
        for (i = 1; i <= x; i++) {
            answer.push(x) }
            }) ;
            
    return answer;
}

• map 메소드를 통해 arr 배열 속 원소를 한 번씩 거치고, answer에 push해서 새로운 배열을 생성하고자 함.
• 배열 속 요소만큼 추가하기 위해 반복문 for 를 이용함.

모범답안

function solution(arr) {
    return arr.reduce((list, num) => [...list, ...new Array(num).fill(num)], []);
}

• reduce 메소드는 배열 속 모든 요소를 반복하면서 누적된 값을 만들어내는 함수
  * [] 은 초기값
• 각각의 콜백 함수 list는 누적된 결과 배열을, num은 현재 반복 중인 배열 요소를 나타냄

list: []

• new Array(num).fill(num) : num의 값에 따라 새로운 배열을 만든다. new Array(num)은 길이가 num인 배열을 생성하며, fill(num)은 이 배열을 num으로 채운다.
  -> [num, num, num, ...]

// num이 2인 경우
list: [2, 2]

• [...list, ...new Array(num).fill(num)] : 현재까지 누적된 결과 배열 list에 새로운 배열을 추가한다. ...을 사용하여 list의 배열 요소들과 새로 생성된 배열의 모든 요소를 결합한다.

// reduce 함수 때문에 배열 속 모든 요소에 대하여 작업을 반복하며, 
// `...` 을 통해 모든 요소를 결합한다
// num이 3인 경우와 1인 경우까지 결합
list: [2, 2, 3, 3, 3, 1]

• reduce 메서드는 배열을 반복하면서 위의 작업을 반복하고, 최종적으로 모든 배열 요소가 합쳐진 결과 배열을 반환한다.

---

💡 배열 요소들을 결합하는 스프레드 연산자 (...)에 대한 새로운 발견
여지껏 문자열을 배열로 만드는 데에만 사용했었는데..!
💡 new Array(n) : 길이가 n인 새로운 빈 배열을 생성하는 메소드
여기에 fill(x) 까지 함께 사용하면 x 를 n 만큼 채운 배열이 만들어진다~