본문 바로가기

개발일지/JavaScript + jquery

[js] 1차원, 2차원 배열(Array) 이해하기

1차원 배열

[0] [1] [2]

2차원 배열

[0][0] [0][1] [0][2]
[1][0] [1][1] [1][2]

 

3차원은 입체적인 방식이고 4차원까지 있다고 합니다. 그러나 자주 쓰이는 것은 2차원까지!!

 

 

<1차원 배열>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <script>
	var c1 = [10, 15, 20, 30];
	for(i=0; i<=3; i++){
			document.write(c1[i]+" ");
		}
  </script>
 </body>
</html>

변수 c1에 순서대로 값을 입력하고, 그대로 출력을 해준다. 대신 배열을 정의할 때는 [] 대괄호 안에 넣어줘야한다. 반복문이라서 for문을 사용하는데 주의할 점은 [0]부터 시작한다는 점! 때문에 4가지 숫자가 있다면 i의 값이 0~3까지 되어야 한다. 4까지 하는 경우 숫자 뒤에 undefined(정의가 안 됨) 같이 출력이 된다. 

10 15 20 30 

for(i=0; i<=3; i++)

10 15 20 30 undefined

for(i=0; i<=4; i++)

 


<테이블 안에 값을 넣어보기>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <script>
  var c1 = [10, 15, 20, 30];
  document.write("<table border=1>");
	document.write("<tr>");
	for(i=0; i<=3; i++){
			document.write("<td>" + c1[i] + "</td>");
		}
	document.write("<tr>");
  document.write("</table>");
  </script>
 </body>
</html>

html에서 테이블을 넣는 것과 같은 공식을 사용한다. 대신에 출력문 안에 넣어 준다. 


<2차원 배열>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>2차원</title>
 </head>
 <body>
  <script>
	 //객체 생성
	 var student = new Array(Array('강민성','컴공학과','98','97'),
	 			 Array('김정아','정보학과','88','95'),
				 Array('신은수','행정학과','98','97'),
				 Array('이은준','물리학과','98','97'),
				 Array('강아린','법학과','98','97')
				 );
	 document.write("<table border=1>");
	 document.write("<th>이름</th> <th>학과</th> <th>중간</th> <th>기말</th>");
	 for(i=0;i<=4;i++){
		document.write("<tr>");
		for(j=0;j<=3;j++){ 
			document.write("<td>" + student[i][j] +"</td>");
			}
		document.write("</tr>");
	 }
	 document.write("</table>");
  </script>
 </body>
</html>

1차원 배열의 초기화 및 선언을 할 때는 A = [10]; 굉장히 간단했지만 2차원 배열에서는 New로 새로운 객체를 만들어줘야한다. var student 객체명 = new Array(); 새로운 배열 객체를 만든다는 뜻. Array(Array('강민성','컴공','98','97')); Array안에 또 선언을 해줘야한다. 그리고 출력을 할 땐 중첩 for문을 이용해서 불러와야한다. 1차원 배열은 일반 for문, 2차원 배열은 2중 for문! student[i][j] 라고 생각하면 쉽다. 추가로 테이블까지 씌워봤다.