[Javascript] 배열의 원소만큼 추가하기 - new Array(), fill()

문제 설명 :

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

 

빈 배열에 원하는 횟수만큼 요소를 넣는다 ⬅ 가 관건이었는데

처음에는 reduce() 메소드를 사용해서 초깃값 []에 콜백함수로 for 반복문을 넣어 push, concat()를 실행시키려고 했다.

그런데 자꾸 undefined에 속성이 없다면서 push든 concat이든 메소드를 사용할 수 없는 오류가 나타났다...ㅠㅠ

그래서 결국 map() 메소드에 for 반복문을 사용하는 식으로 일단 문제를 풀었다. 

 

나의 문제 풀이 :

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

 

내가 원하던 대로 reduce() 를 활용하는 코드는 다른 사람들의 풀이에서 해답을 얻었다.

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

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

 

1. 반복문을 사용하지 않고 아예 초깃값 빈 배열에다가

2. 길이가 각 요소만큼이고 값이 비어있는 배열을 합친 다음

3. fill() 메소드로 비어있던 값을 해당 요소값으로 채우는 것이다.

4. 이 과정을 arr의 요소마다 반복

 

Array() 생성자

사용 방식 :
new Array(element0, element1, ..., elementN) ⬅ 넣고 싶은 요소 원하는 만큼
= [element0, element1, ..., elementN]

new Array(원하는 배열 길이)

 

매개변수에 항목이 하나뿐이고, 그 항목의 자료형이 숫자일 경우 매개변수의 배열의 길이로 간주한다.

배열의 길이 매개변수인 경우 무조건 정수가 들어가야 한다. (실수일 경우 RangeError가 난다.)

ex)
const a = new Array(1.2)  // 항목이 하나이므로 길이로 간주 ➡ 에러 발생
const a = [1.2]   // [1.2]   (1.2라는 요소 1개가 담긴 배열이 생성)

 

이번 문제에 사용한 방식은 배열 길이로 배열 객체를 생성하는 2번째 방식이다.

 

두 번째분 풀이에 new 연산자가 없는데 정상적으로 작동되길래 서치를 해봤는데

같은 부분을 궁금해하는 사람이 있어서 링크를 첨부한다.

대충 요약하자면 Array 생성자는 ES6 문법 전에 만들어진 거여서 new 연산자 없이 사용해도 작동한다는 거고

ES6부터 만들어진 클래스는 new 연산자가 없으면 내장 알고리즘이 적용되지 않는다는 듯...?

 

https://velog.io/@coldair426/new%EC%97%86%EC%9D%B4%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%B8%EC%B6%9C

[JS] new 없이 클래스 호출?

 

fill()

fill() 메소드는 배열의 시작 인덱스부터 끝 인덱스 직전까지를 정적인 값 하나로 채우는 메소드다.

사용 방식 :
fill(채울 값)
fill(채울 값, 시작 인덱스)
fill(채울 값, 시작 인덱스, 끝 인덱스)

 

시작 인덱스를 생략할 경우 기본값은 0

끝 인덱스를 생략할 경우 기본값은 array.length

반환값은 변형한 배열

 

공식 문서에 나온 예제를 보면 쉽게 이해할 수 있다.

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

Array.prototype.fill() - JavaScript | MDN