Class17(배열 기초)

2022-06-03 3 분 소요

2022. 05. 31. 수업내용 정리 #1/2

배열.. 개념

배열

이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.

배열을 구성하는 각각의 요소를 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
- 특징
  1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 요소끼리 타입이 다를 수도 있습니다.
  2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
  3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

배열의 생성

문법
  
var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
  
var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
  
var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

위의 세 가지 방법은 모두 같은 배열을 만들어줍니다.

배열 리터럴은 대관호([]) 안에 배열 요소를 쉼표로 구분하여 나열하는 방법으로 생성합니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>배열의 생성</h1>
  
	<script>
		var arrLit = [1, true, "JavaScript"];				// 배열 리터럴을 이용하는 방법
		var arrObj = Array(1, true, "JavaScript");			// Array 객체의 생성자를 이용하는 방법
		var arrNewObj = new Array(1, true, "JavaScript");	// new 연산자를 이용한 Array 객체 생성 방법
  		
		document.write(arrLit + "<br>");
		document.write(arrObj + "<br>");
		document.write(arrNewObj);			//위의 세 가지 방법은 모두 같은 결과의 배열을 생성함.
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시1

배열의 참조

배열의 각 요소를 참조하고자 할 때는 [] 연산자를 사용합니다.

문법
배열이름[인덱스]

자바스크립트에서는 배열 요소의 개수를 배열의 길이라고 합니다.

이러한 배열의 길이는 length프로퍼티에 자동으로 갱신됩니다.

인덱스는 언제나 0부터 시작하고 음이 아닌 임의의 정수를 반환하는 임의의 표현식도 사용할 수 있습니다.

이러한 인덱스에는 2³² 보다 작은 양수만을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>배열의 참조</h1>
  
	<script> // 배열 생성 후, 요소를 추가 혹은 삭제하는 예제 
		var arr = ["JavaScript"];		// 요소가 하나뿐인 배열을 생성함.
		var element = arr[0];	// 배열의 첫 번째 요소를 읽어서 할당함.
		arr[1] = 10;			// 배열의 두 번째 요소에 숫자 10을 할당함. 배열의 길이는 1에서 2로 늘어남.
		arr[2] = element;		// 배열의 세 번째 요소에 변수 element의 값을 할당함. 배열의 길이는 2에서 3으로 늘어남.
		document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>");	// 배열의 요소를 모두 출력함.
		document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>");		// 배열의 길이를 출력함.
		delete arr[2];			// 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.
		document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>");	// 배열의 요소를 모두 출력함.
		document.write("배열 arr의 길이는 " + arr.length + "입니다.");			// 배열의 길이를 출력함.
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시2

위의 예제에서 스크립트 부분 세번째 실행문을 보면 처음 선언한 배열의 길이는 1이나 두번째 인덱스(더 큰 인덱스)에 요소를 저장하려고 합니다.

자바스크립트에서는 배열의 길이를 넘는 인덱스에 요소를 저장하는 것을 허용합니다.

이때, 배열의 길이는 위의 예제처럼 자동으로 해당 인덱스까지 늘어납니다.

배열 요소의 추가

배열에 새로운 요소를 추가하는 세 가지의 방법이 있습니다.

문법
arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
  
arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
  
arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가합니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>배열 요소의 추가</h1>
  
	<script>
		var arr = [1, true, "Java"];
		arr.push("Script");				// push() 메소드를 이용하는 방법
		document.write(arr + "<br>");
  
		arr[arr.length] = 100;			// length 프로퍼티를 이용하는 방법
		document.write(arr + "<br>");
  
		arr[10] = "자바스크립트";		// 특정 인덱스를 지정하여 추가하는 방법
		document.write(arr + "<br>");
		document.write(arr[7]);			// undefined
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시3

위의 예제에서 배열 arr의 최종 길이는 11이 됩니다.

이때 배열 요소가 존재하는 인덱스는 0,1,2,3,4,10 뿐이며, 나머지 인덱스에는 배열 요소가 존재하지 않습니다.

이처럼 인덱스에 대응하는 배열 요소가 없는 부분을 홀(hole)이라고 합니다.

자바스크립트에서는 이러한 배열의 홀(hole)을 undefined 값을 가지는 요소처럼 취급합니다.

따라서 위의 예제에서처럼 배열의 홀을 참조하게 되면 undefined 값을 반환하게 됩니다.

배열의 순회

배열의 모든 요소에 차례대로 접근하려고 할 때 for문과 같은 반복문을 사용하여 접근할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
	<style>
	    table { border-collapse: collapse; }
	    tr, td { border: 2px solid orange; padding: 5px }
	</style>
</head>
  
<body>
  
	<h1>배열의 순회</h1>
  
	<script>
		var arr = [1, true, "JavaScript"];
		var result = "<table><tr>";
  		
		for (var idx in arr) {
			result += "<td>" + arr[idx] + "</td>";
		}
		result += "</tr></table>";
  
		document.write(result);
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시4

Array 객체

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄집니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
	<style>
	    table { border-collapse: collapse; }
	    tr, td { border: 2px solid orange; padding: 5px }
	</style>
</head>
  
<body>
  
	<h1>Array 객체</h1>
  
	<script>
		var arr = new Array(10, "문자열", false);
  
		document.write((typeof arr) + "<br>");
		document.write((typeof arr[0]) + "<br>");
		document.write((typeof arr[1]) + "<br>");
		document.write(typeof arr[2]);
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시5

Twitter Facebook LinkedIn

Class17(배열 기초)

2022. 05. 31. 수업내용 정리 #1/2

배열.. 개념

공유하기

댓글남기기

참고

Class01(pocker project with mfc)

Tip03

Class15(레이어)

Class06(트랜잭션)