Class18(배열 응용)

2022-06-03 3 분 소요

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

배열.. 응용

희소 배열

배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미합니다.

따라서 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>희소 배열</h1>
  
	<script>
		var arr = new Array(); 		// 빈 배열 객체를 생성함.
		arr[99] = "JavaScript"		// 배열 arr의 100번째 위치에 문자열을 삽입함.
		// 100번째 요소를 삽입했기 때문에 배열의 길이는 100으로 늘어남.
		document.write("배열의 길이는 " + arr.length + "입니다.<br>");
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시6

다차원 배열

배열 요소가 또다른 배열인 요소를 의미합니다.

class 17 에서 다뤘던 배열은 모두 1차원 배열이었습니다.

2차원 배열은 배열 요소가 1차원 배열인 배열을 의미합니다.

3차원 배열은 배열 요소가 2차원 배열인 배열을 의미합니다.

2차원 배열을 이해하면 그 이상의 배열 또한 같은 방식으로 이해할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>다차원 배열</h1>
  
	<script>
		var arr = new Array(3); 		// 3개의 요소를 가지는 배열을 생성함.
		for (var row = 0; row < 3; row++) {
			arr[row] = new Array(4); 	// 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.
			for (var column = 0; column < 4; column++) {
				arr[row][column] = "[" + row + "," + column + "]"; 	// 각각의 배열 요소를 생성함.
				document.write(arr[row][column] + " "); 			// 각 배열 요소에 접근함.
			}
			document.write("<br>")
		}
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시7

연관 배열(associative array)

숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열은 연관 배열이라고 합니다.

대부분의 프로그래밍 언어가 지원하지만 자바스크립트는 별도로 제공하지 않습니다.

대신 인덱스로 문자열을 사용하여 연관 배열처럼 사용할 수 있는 객체(object)를 만들 수 있습니다.

하지만 이렇게 생성된 배열은 자바스크립트 내부 Array 객체에서 기본 객체로 재선언됩니다.

따라서 기존에 사용할 수 있었던 모든 Array메소드와 프로퍼티가 정확하지 않은 결과값을 반환하게 될 것입니다.
```
<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>연관 배열</h1>
  
	<script>
		var arr = [];		// 비어있는 배열을 생성함.
		arr["하나"] = 1;	// 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소를 추가함.
		arr["참"] = true;
		arr["자바스크립트"] = "JavaScript";
  		
		document.write(arr["참"] + "<br>");		// 문자열을 인덱스로 배열 요소에 접근할 수 있음.
		document.write(arr.length + "<br>");	// 0
		document.write(arr[0]);					// undefined
	</script>
  	
</body>
  
</html>
```
웹페이지 화면 ▼

위의 예제에서 연관 배열인 arr은 length 프로퍼티의 값으로 0을 반환합니다.

이처럼 자바스크립트에서 연관 배열은 Array 객체가 아닌 기본 객체이므로, 정확히 말하면 배열이 아닙니다.

ECMAScript 6부터는 이러한 불편함을 해결하기 위해 새로운 데이터 구조인 Map 객체를 별도로 제공하고 있습니다.
문자열 접근 방식(with 배열)

문자열은 변하지 않는 값이므로, 읽기 전용 배열로서 다룰 수 있습니다.

따라서 배열처럼 [] 연산자를 사용하여 문자열을 구성하는 각 문자에 바로 접근할 수 있습니다.

또한, Array 객체가 제공하는 모든 범용 메소드도 사용할 수 있습니다.

문자열의 각 문자는 String객체에서 제공하는 charAt()메소드를 사용해 접근할 수 있습니다.
```
<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>문자열을 배열처럼 접근하기</h1>
  
	<script>
		var str = "안녕하세요!";					// 문자열 생성
		document.write(str.charAt(2) + "<br>");		// 하 
		document.write(str[2]);						// 하
	</script>
  	
</body>
  
</html>
```
웹페이지 화면 ▼

문자열을 배열처럼 착각하여 아래와 같은 오류를 범할 수도 있습니다.
```
var str = "안녕하세요!"; // 문자열 생성
str[0] = "";             // 자바스크립트의 문자열은 읽기 전용이므로, 이 문장은 오류를 발생시킵니다.
```
따라서 문자열을 바로 배열처럼 사용하지 말고, split() 메소드 등을 이용해 먼저 배열로 변환한 후 사용하는 것이 좋습니다.

자바스크립트에서 배열 여부 확인

자바스크립트에서는 배열이라는 타입(type)을 별도 제공하지 않습니다.

자바스크립트 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 ‘object’를 반환합니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>배열 여부 확인</h1>
  
	<script>
		var arr = [1, true, "JavaScript"];	// 배열 생성
		document.write(typeof arr);			// object
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시10

따라서 자바스크립트에서는 해당 변수가 배열인지 여부를 확인할 수 있도록 아래의 세 가지 방법을 제공하고 있습니다.

Array.isArray() 메소드
instanceof 연산자
constructor 프로퍼티

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>배열 여부 확인</h1>
  
	<script>
        function isArray(a) {
			return a.constructor.toString().indexOf("Array") > -1;
		}
		var arr = [1, true, "JavaScript"];				// 배열 생성
          
        document.write(typeof arr,'<br>');			// object
		document.write(Array.isArray(arr) + "<br>");	// true
		document.write(Array.isArray("문자열"),'<br>');		// false
        document.write((arr instanceof Array) + "<br>");	// true
		document.write(123 instanceof Array,'<br>');				// false
        document.write(arr.constructor + "<br>");	// constructor 프로퍼티의 값 출력
		document.write(arr.constructor.toString() + "<br>");	// function Array() {[native code]}
		document.write(arr.constructor.toString().indexOf("Array") + "<br>");	// 10
		document.write(isArray(arr))				// true
          
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

배열기본예시11

다음 예제와 같이 toString() 메소드와 indexOf() 메소드를 함께 사용하면 해당 변수의 배열 여부를 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Array</title>
</head>
  
<body>
  
	<h1>constructor 프로퍼티</h1>
  
	<script>
		function isArray(a) {
			return a.constructor.toString().indexOf("Array") > -1;
		}
  
		var arr = [1, true, "JavaScript"];			// 배열 생성
  
		document.write(arr.constructor + "<br>");	// constructor 프로퍼티의 값 출력
		document.write(arr.constructor.toString() + "<br>");	// function Array() {[native code]}
		document.write(arr.constructor.toString().indexOf("Array") + "<br>");	// 10 해당인수를 찾지 못했다면 -1출력
		document.write(isArray(arr))				// true
	</script>
  	
</body>
  
</html>

배열기본예시12

Twitter Facebook LinkedIn

Class18(배열 응용)

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

배열.. 응용

공유하기

댓글남기기

참고

Class01(pocker project with mfc)

Tip03

Class15(레이어)

Class06(트랜잭션)