[js] 그림 확대 (lv.0, 정답률 78%)

직사각형 형태의 그림 파일이 있고, 이 그림 파일은 1 × 1 크기의 정사각형 크기의 픽셀로 이루어져 있습니다. 이 그림 파일을 나타낸 문자열 배열 picture과 정수 k가 매개변수로 주어질 때, 이 그림 파일을 가로 세로로 k배 늘린 그림 파일을 나타내도록 문자열 배열을 return 하는 solution 함수를 작성해 주세요.

제한사항

• 1 ≤ picture의 길이 ≤ 20
• 1 ≤ picture의 원소의 길이 ≤ 20
• 모든 picture의 원소의 길이는 같습니다.
• picture의 원소는 '.'과 'x'로 이루어져 있습니다.
• 1 ≤ k ≤ 10

나의 풀이

function solution(picture, k) {
    // 가로로 k배 늘리기 
    let widthK = picture.map((v) => {
        v = v.split('').map((el) => {
            return el.repeat(k);
        })
        return v.join('');
    })
    
    // 세로로 k배 늘리기
    let lengthK = widthK
        .map((v) => {
            return Array(k).fill(v);
        })
        .flat();
    
    return lengthK;
}

이거도 힘들었다... 이렇게 풀고 싶지 않았지만 일단 다른 떠오르는 방법이 없었다.

• 먼저 가로로 k배를 늘려준다. 이건 map을 사용해서 원본 배열을 돌아준다.
  - 각 요소를 배열로 split해준 뒤 또 한 번 map()을 돌며 각 요소마다 k배씩 반복 후 문자열로 합쳐서 리턴한다.
  

이번엔 세로로 k배를 늘려준다.

배열을 복제해서 이차 배열 만들기

• 가로로 늘려놓은 배열에서 세로로 늘릴 때 우선 배열을 걍 복제해서 만들어버린다. Array(k).fill(v)를 해서 k만큼의 빈 배열을 만들고 그 안을 v로 채워준다.

그럼 콘솔에 찍었을 때 이런 식의 이차 배열이 나온다.

flat()

Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다.

이 메서드는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 유용한 메서드이다!

• 생성된 이차 배열을 flat()으로 합쳐주면 완성이다.

다른 풀이 1

function solution(picture, k) {
    var answer = [];

    picture.forEach((line) => {
        const expanded = [...line].reduce((acc, cur) => acc + cur.repeat(k), '');

        for(let i=0; i<k; i++) answer.push(expanded);
    });

    return answer;
}

• 빈 배열 answer를 초기화한다.
• picture의 각 요소에 대해 forEach 메서드를 사용한다. 각 줄은 line이라고 한다.
• 주어진 line 문자열의 각 문자를 k배 확장한다.
  - 스프레드 연산자를 통해 문자열을 배열로 변환
  • reduce() 메서드를 사용해 각 문자(cur)를 k번 반복(cur.repeat(k))하여 누적한다.
  • expanded => 가로로 k배 확장된 문자열이 된다.
• for 반복문을 사용하여 expanded의 문자열을 k번 answer 배열에 추가한다.
  - 각 줄을 세로로 k배 확장하는 것과 동일한 효과
• 모든 줄을 처리한 후 최종적으로 확장된 그림 문자열을 담고 있는 answer 배열을 반환한다.

다른 풀이 2

function solution(picture, k) {
    let result = [];

    picture.map((v) => {
        const cur = [...v].map((c) => c.repeat(k)).join('');
        for(let i = 0; i < k; i++) result.push(cur);
    });

    return result;
}

• result라는 빈배열 선언
• picture 배열의 각 요소에 대해 map() 메서드를 사용하여 반복 작업을 수행한다! c.repeat(k)를 호출하여 각 문자를 k배 확장한 후 join('')를 사용하여 확장된 문자들을 하나의 문자열로 병합한다 (가로로 k배 확장된 한 줄)
• for문을 통해 확장된 문자열 cur을 result 배열에 k번 추가한다 (세로로 k배 확장된 한 줄)
• 모든 줄을 처리한 후, 확장된 그림을 나타내는 result 배열 반환