[프로그래머스 레벨2] 삼각달팽이 [Javascript/ 이차원 배열 응용]

 

ES6 문법으로 이차원 배열 생성하는 방법

먼저 자바스크립트에서 2차원 배열을 선언하는 방법을 알아봅시다.

const arr = new Array(5).fill(0).map(() => new Array(4));

 

배열을 만들어주고 만든 배열의 원소에 fill 메소드를 통해 값을 채워 넣습니다.
그런 뒤, map 함수를 실행해 각 원소의 자리에 길이가 4인 배열로 바꿔줍니다. 
fill 메소드를 쓰는 이유는 빈 배열의 경우 map 함수가 제대로 실행되지 않기 때문입니다.

 

만약 n x n 이차원 배열을 만들고 싶다면, 

const arr = new Array(n).fill().map(() => new Array(n));
const arr2 = Array.from(Array(n), () => Array(n).fill(0));

중간에 있는 fill에 초기값으로 0으로 굳이 채우지 않아도 됩니다.

그 이유는, fill() 메소드를 사용하는 이유를 아셔야 합니다.

fill() 메소드는 배열의 모든 요소를 정적 값으로 채우는 메소드입니다.
위 코드에서는 new Array(n)으로 배열을 생성하고, 
fill() 메소드를 호출하여 배열의 모든 요소를 undefined 값으로 채웁니다. 
그 다음 map() 메소드를 사용하여 새로운 배열을 생성합니다. 
map() 메소드는 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성합니다.

따라서 fill() 메소드를 사용하면 배열을 채우기 위해 반복문을 사용하지 않고도, 
배열 요소를 초기화할 수 있습니다. 
이 경우 fill() 메소드를 사용하여 배열의 모든 요소를 undefined 값으로 채워, 
나중에 map() 메소드를 사용하여 새로운 배열을 생성할 때 요소를 채울 수 있습니다.

 

만약 배열의 요소를 0으로 초기화하고 싶다면, 뒤에 배열에 fill(초기화 할 값) 을 채워주면 됩니다.

const arr = new Array(n).fill(0).map(() => new Array(n).fill(0))

n = 5일 때,

[
  [ 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0 ],
  [ 0, 0, 0, 0, 0 ]
]

 

 

직각 삼각형 2차원 배열 생성 방법

const triangle = new Array(n).fill().map((_, idx) => new Array(idx+1));

2차원 배열을 만들고, 각 행은 해당 행 번호에 해당하는 열 수를 가집니다.

 

문제에 따라, fill() 메소드를 통해 초기값을 0으로 채워줄 수 있습니다.

const triangle = new Array(n).fill(0).map((_, idx) => new Array(idx+1).fill(0)); 

// [
//   [ 0 ],
//   [ 0, 0 ],
//   [ 0, 0, 0 ],
//   [ 0, 0, 0, 0 ],
//   [ 0, 0, 0, 0, 0 ],
//   [ 0, 0, 0, 0, 0, 0 ]
// ]

 

JavaScript에서 언더스코어(_)는 일반적으로 무시할 수 있는 변수를 나타냅니다. 
이것은 특히 콜백 함수에서 매개 변수를 명시적으로 사용하지 않을 때 유용합니다. 
일반적으로 매개 변수를 생략할 수 없기 때문에 일종의 프로그래머의 꼼수로 사용됩니다.

따라서 코드에서 (_, idx)의 경우, 해당 배열에서 현재 값에 관심이 없으며,
배열의 인덱스 값만 필요하므로 언더스코어 변수 이름을 사용하여 현재 값 무시합니다.

이 코드에서는 idx 변수에만 실제로 관심이 있습니다.

 

 

이차원 배열을 일차원 배열로 평탄화 [배열 합치기]

arr.flatMap(e => e)

arr 이차원 배열 일 때
[
    [ 1 ],
    [ 2, 12 ],
    [ 3, 13, 11 ],
    [ 4, 14, 15, 10 ],
    [ 5, 6, 7, 8, 9 ]
 ]
 
 일차원 배열 평탄화
[1, 2, 12, 3, 13, 11, 4, 14, 15, 10, 5, 6, 7, 8, 9]

 

 

접근법

1. 구조에 집중 : 정사각형을 왼쪽 정렬 시켜서 직사각형으로 접근했습니다.
2. 패턴에 집중 : 달팽이 패턴이 아래 -> 오른쪽 -> 대각선 위로 숫자가 이동하는 패턴입니다. (반 시계 방향)
3. 개수에 집중 : 패턴이 하나씩 변화할 때마다 n의 개수가 하나씩 줄어듭니다.

 

 

전체 코드

function solution(n){
   
    // 2차원 배열을 만들고, 각 행은 해당 행 번호에 해당하는 열 수를 가집니다.
    const triangle = new Array(n).fill().map((_, idx) => new Array(idx+1)); 
    //console.log(triangle)

    
    let count = 0; // 숫자
    // triangle[x][y]
    let x = -1; // 처음  for문에서 triangle[0][0] 인 부분을 채워주기 위해 x가 -1부터 시작해야한다. [++x]  
    let y = 0;
    
    while(n > 0){
        // n의 개수에 주목
        // 아래 -> 오른쪽 - > 대각선 위로 갈수록 n이 하나씩 줄어든다. (그림 참고)
        for(let i = 0; i < n; i++) triangle[++x][y] = ++count; // 아래
        for(let i = 0; i < n- 1 ; i++) triangle[x][++y] = ++count; // 오른쪽
        for(let i = 0; i < n -2; i++) triangle[--x][--y] = ++count; // 대각선 위로
        
        // 앞에 for문 3가지 경우 
        n -= 3;
    }
    //console.log(triangle);
    return triangle.flatMap(e => e);
    // triangle 배열 내의 모든 하위 배열(e)을 하나의 배열로 평탄화 [1차원 배열로]
    
  // [ 1 ],
  // [ 2, 12 ],
  // [ 3, 13, 11 ],
  // [ 4, 14, 15, 10 ],
  // [ 5, 6, 7, 8, 9 ]
    
}

 

주석 생략

function solution(n) {

    const arr = new Array(n).fill().map((_, idx) => new Array(idx+1));
    
    let x = -1;
    let y = 0;
    let count = 1;
    
    while(n > 0){
        for(let i = 0; i < n; i++) arr[++x][y] =  count++; 
        for(let j = 0; j < n-1; j++) arr[x][++y] = count++;
        for(let k = 0; k < n-2; k++) arr[--x][--y] = count++;
        
        n -= 3;
    }
    
    return arr.flatMap(e => e);
}

 

 

참고자료

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

Array.prototype.flatMap() - JavaScript | MDN

https://joonfluence.tistory.com/508

[JavaScript] 자바스크립트에서 2차원 배열을 선언하는 방법