[자바스크립트 연습문제] 2차원 배열 순서대로 숫자 채우기

** 이 게시물은 텍스트게임메이커를 사용하고 있습니다. '시작하기에 앞서 & 텍스트게임메이커' 글을 반드시 먼저 읽어 보세요.

2차원 배열 순서대로 숫자 채우기

아래 그림처럼 5*5 2차원배열에 숫자를 순서대로 채우는 코드를 작성해 봅시다.

실행 결과는 아래와 같이 나와야 합니다.

  1  2  3  4  5
  6  7  8  9 10
 11 12 13 14 15 
 16 17 18 19 20
 21 22 23 24 25

2차원 배열 숫자채우기는 순서대로 채우기 말고도 여러가지가 있기 때문에 먼저 각 줄을 줄번호로 채우는 코드를 제가 알려드린 후에 해당 코드를 수정하여 직접 정답코드를 만드시면 됩니다.

아래는 각 줄을 줄번호로 채우는 코드입니다.

var ROW_MAX = 5;
var COL_MAX = 5;

//2차원 배열 생성
var arr = [];
for(var i=0; i<ROW_MAX; i++){
  arr[i] = [];
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = null;
  }
}

//2차원 배열 값 넣기
var num = 0;
for(var i=0; i<ROW_MAX; i++){
  num = num+1;
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = num;
  }
}

//출력
TMS.clearScreen();
for(var i=0; i<ROW_MAX; i++){
  for(var j=0; j<COL_MAX; j++){
    TMS.insertText(arr[i][j].toString().padStart(3," "));
  }
  TMS.insertText("\n\r");
}

https://a-mean-blogger.github.io/text-game-maker-js/sandbox 에서 F12를 눌러 브라우저 콘솔을 연 후, 위 코드를 붙여넣기 하면 아래처럼 실행됩니다.


위 코드에서 '//2차원 배열 값 넣기 부분'을 수정하여

  1  2  3  4  5
  6  7  8  9 10
 11 12 13 14 15 
 16 17 18 19 20
 21 22 23 24 25

이렇게 출력되도록 수정해 보세요.

줄번호 넣기 코드 분석

여기서 부터는 위 샘플 코드의 분석입니다. 궁금하신 분들만 읽어보시고 꼭 읽어야 할 내용은 아닙니다.

var ROW_MAX = 5;
var COL_MAX = 5;

//2차원 배열 생성
var arr = [];
for(var i=0; i<ROW_MAX; i++){
  arr[i] = [];
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = null;
  }
}

for 문을 사용해서 줄수가 5, 칸수가 5인 2차원 배열을 생성하였습니다. 자바스크립트는 자체적으로 2차원배열을 생성하는 명령이 없기 때문에 배열을 선언하고, 해당 배열에 배열을 넣는 방법으로 2차원 배열을 생성해야합니다. 위 방법은 이해하기 가장 쉬운 방법으로 코딩한 것이고, 짧게 한줄로 만들고 싶으면

[...Array(ROW_MAX)].map(()=>[...Array(COL_MAX)].map(()=>null));

과 같이 작성할 수도 있습니다. 하지만 입문자가 이해하기에 첫번째 방법이 더 쉬우므로 앞으로도 계속 첫번째 방법을 사용하여 코드를 작성하겠습니다. 이렇게 생성된 arr의 값은 아래와 같습니다.

[ [null,null,null,null,null],
  [null,null,null,null,null],
  [null,null,null,null,null],
  [null,null,null,null,null],
  [null,null,null,null,null] ]

이제 arr[줄번호][칸번호] 로 해당 위치의 값을 읽을 수 있습니다. 배열은 번호가 0부터 시작하므로

     col0 col1 col2 col3 col4
row0 null null null null null
row1 null null null null null
row2 null null null null null
row3 null null null null null
row4 null null null null null

이렇게 생각하시면 됩니다. arr[0][0] 부터 arr[4][4]까지 모두 null을 가지게 되었습니다.

이제 각 줄에 자신의 줄번호를 채워봅시다.

//2차원 배열 값 넣기
var num = 0;
for(var i=0; i<ROW_MAX; i++){
  num = num+1;
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = num;
  }
}

번호를 나타낼 num 변수를 선언하고 0으로 초기값을 주었습니다. 바깥의 for문은 각각 줄을 반복하고, 안쪽의 for문은 해당 줄의 칸들을 반복하게 되므로, 줄의 반복되는 부분에서 num의 값을 1 증가시켜줍니다. 

이 2차원 배열을 텍스트게임메이커로 출력하는 코드는 다음과 같습니다.

// 출력
TMS.clearScreen();
for(var i=0; i<ROW_MAX; i++){
  for(var j=0; j<COL_MAX; j++){
    TMS.insertText(arr[i][j]);
  }
  TMS.insertText("\n\r");
}

아래와 같이 출력됩니다.

11111
22222
33333
44444
55555

5*5 배열이 자신의 줄번호에 맞게 출력하는 것을 볼 수 있습니다. 여기다가 보기 좋게 각 글자 사이에 간격을 주는 코드를 추가해줍시다.

// 출력
TMS.clearScreen();
for(var i=0; i<ROW_MAX; i++){
  for(var j=0; j<COL_MAX; j++){
    TMS.insertText(arr[i][j].toString().padStart(3," "));
  }
  TMS.insertText("\n\r");
}
  1  1  1  1  1
  2  2  2  2  2
  3  3  3  3  3
  4  4  4  4  4
  5  5  5  5  5

이전에 바뀐 부분(arr[i][j].toString().padStart(3," "))을 좀 살펴봅시다. **여기에 사용된 padStart는 텍스트게임메이커의 함수가 아니라 자바스크립트의 네이티브함수입니다.

arr[i][j].toString()으로 현재 숫자 타입인 값을 문자타입으로 바꾸었습니다. padStart 함수는 문자타입에서만 사용가능하기 때문에 타입변환을 해주는 것입니다.

padStart함수는 padStart(길이, 빈칸을_채울_문자열)로 사용되며, 현재 arr[i][j].toString().padStart(3," ")이므로 강제로 문자열의 길이를 3칸으로 하였고, 문자가 없는 빈칸은 " "으로 채웠습니다.

위 코드들을 하나로 묶으면 다음과 같이 됩니다.

var ROW_MAX = 5;
var COL_MAX = 5;

//2차원 배열 생성
var arr = [];
for(var i=0; i<ROW_MAX; i++){  arr[i] = [];
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = null;
  }
}

//2차원 배열 값 넣기
var num = 0;
for(var i=0; i<ROW_MAX; i++){  num = num+1;
  for(var j=0; j<COL_MAX; j++){
    arr[i][j] = num;
  }
}

//출력
TMS.clearScreen();
for(var i=0; i<ROW_MAX; i++){
  for(var j=0; j<COL_MAX; j++){
    TMS.insertText(arr[i][j].toString().padStart(3," "));
  }
  TMS.insertText("\n\r");
}

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP