[프로그래머스 / JavaScript] Lv.0 배열의 원소만큼 추가하기

 

문제

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

 

 

제한사항

• 1 ≤ arr의 길이 ≤ 100
• 1 ≤ arr의 원소 ≤ 100

 

 

입출력 예

arr	result
[5, 1, 4]	[5, 5, 5, 5, 5, 1, 4, 4, 4, 4]
[6, 6]	[6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]
[1]	[1]

 

 

 

---

내가 작성한 답안

const solution = (arr) => {
    let X = '';
    arr.map(e => X += ` ${e}`.repeat(e));
    return X.split(' ').slice(1, X.length).map(e => +e);
}

 

길이만큼 new Array(n)을 만들어서 .fill로 채우면 되겠다! 까지는 생각했는데 for나 map을 이중으로 쓰지 않고 채우는 방법을 명쾌하게 찾지 못했다.

 

바로 생각나는게 문자열을 반복하는 repeat 메서드여서 arr의 요소를 템플릿 리터럴로 문자열화 시키고 그 수만큼 반복했고, 숫자가 두 자릿수 이상일 경우 구분을 주기 위해 앞에 공백을 추가하는 방식으로 진행했다.

 

작업을 여러 번 거친다는 생각이 들어서 풀면서도 이게 맞나..? 싶은 생각이 들었다🤨

 

 

 

---

다른 사람들이 작성한 답안

1. reduce + fill을 이용한 풀이

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

 

reduce() 메서드는 합계를 구할 때만 사용했는데 현재값을 이용해서 값을 처리할 수 있는 풀이식은 처음 봐서 새로웠다.

 

여기서 list는 누산값, num은 현재값이므로 누산값에 num의 길이만큼(new Array(num)) num값으로 채운(.fill(num))값을 [] 배열화시켜 간단하게 표현했다.

 

 

Array.prototype.reduce()

arr.reduce(callback[, initialValue])

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.

 

매개변수

• callback: 배열의 각 요소에 대해 실행할 함수로, 다음의 네가지 인수를 받는다.
  　👉 accumulator (acc, 누산기 / 필수값) : 콜백의 반환값 누적
  　👉 currentValue (cur, 현재 값 / 필수값) : 처리할 현재 요소
  　👉 currentIndex (idx, 현재 인덱스 / 선택값) : 처리할 현재 요소의 인덱스로, initialValue를 제공한 경우 0, 아니면 1부터 시작
  　👉 array (src, 원본 배열 / 선택값) : reduce()를 호출한 배열
  
  
• initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값으로, 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

 

반환값

누적 계산의 결과 값

 

 

 

 

2. map + fill을 이용한 풀이

const solution = a => a.map(v=>Array(v).fill(v)).flat()

 

arr을 map을 돌려 현재 요소의 길이만큼의 배열을 만들고 동일한 값을 채운 배열들을 만들고, flat() 메서드를 이용해 해당 배열들을 연결했다.

 

 

Array.prototype.flat()

const newArr = arr.flat([depth])

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.

 

매개변수

• depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값으로, 기본 값은 1
  

 

반환값

하위 배열을 이어붙인 새로운 배열

 

예시 (1)_중첩 배열 연결

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

 

예시(2)_중첩 배열 연결 및 빈 배열 제거

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

 

 

 

---

[참고 자료]

https://school.programmers.co.kr/learn/courses/30/lessons/181861

https://hianna.tistory.com/397

[Javascript] 배열 합치기 3가지 방법

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Array.prototype.concat() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

Array.prototype.flat() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN