<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 자바스크립트에서의 배열(Array) 생성 방법 2가지
// 1. 객체 생성 방법을 사용(new Array(배열크기));
var arr1 = new Array(3); // 3개의 공간을 갖는 배열 생성
// => 자바의 경우 int[] arr1 = new int[3]; 코드와 동일함(자바스크립트는 자료형 미정)
// 2. 대괄호를 사용하여 데이터(요소)를 직접 전달하여 생성(많이 사용하는 방법)
var arr2 = [1, 2, 3]; // 3개의 공간에 1, 2, 3 정수를 저장
// fruitsArr 배열에 "사과", "딸기", "바나나" 를 초기화
var fruitsArr = ["사과", "딸기", "바나나"];
// document.write() 함수를 사용하여 fruitsArr 배열 내의 모든 요소를 하나씩 출력
document.write(fruitsArr[0] + ", " + fruitsArr[1] + ", " + fruitsArr[2] + "<br>");
// 배열 내의 모든 요소를 한꺼번에 출력하는 경우 배열명만으로 출력 가능
document.write(fruitsArr + "<br>");
var fruits = fruitsArr; // 변수에 데이터 저장 가능하나 문자열(string)이 아닌 객체(object) 타입
document.write("fruits 변수 타입 = " + typeof(fruits) + ", " + fruits + "<br>");
fruitsArr[0] = "오렌지"; // 0번 인덱스(첫번째 요소) 데이터 변경
document.write("fruitsArr 배열 크기 : " + fruitsArr.length + "<br><hr>" );
// =============================================================================
// 반복문을 사용하여 배열의 각 요소에 접근하기
// 1. 일반적인 for문(인덱스 활용)을 사용하여 접근하기
// => 배열의 첫번째 인덱스(0번)부터 마지막 인덱스까지 제어변수 1씩 증가하며 차례대로 접근
for(var i = 0; i < fruitsArr.length; i++) {
document.write(i + "번째 요소 : " + fruitsArr[i] + "<br>");
}
// 2. for...of 문 사용(가장 많이 사용)
// => 배열 내의 요소를 차례대로 받아와서 사용(인덱스 사용 불가)
// (자바의 향상된 for문(foreach)과 동일한 방식)
// 기본 문법 : for(변수선언 of 배열명) {}
for(var element of fruitsArr) {
// 자동으로 fruitsArr 배열의 요소를 하나씩 꺼내서 좌변의 변수 element 에 저장
document.write("for...of문 사용 : " + element + "<br>");
}
// 3. for...in 문 사용
// => 객체(배열)의 key(배열에서는 인덱스)를 차례대로 받아와서 접근
// => 주로, 객체를 대상으로 사용하며, 배열 대상으로는 잘 사용하지 않음
// 기본 문법 : for(var index in fruitsArr) {}
for(var index in fruitsArr) {
// document.write("for...in문 사용 : " + index + "<br>"); // 0, 1, 2 인덱스 출력됨
// 인덱스 자체를 사용하는 것이 아닌 인덱스를 배열 변수에 적용
document.write("for...in문 사용 : " + fruitsArr[index] + "<br>"); // 실제 데이터 출력됨
}
document.write("<hr>");
// =======================================================================
// 자바의 배열과 다른 점
// 1. 생성된 기존 배열에 새로운 요소 추가 가능
// => 기존에 존재하는 배열의 크기와 상관없이 추가되는 데이터에 따라 공간 확장됨
fruitsArr[3] = "레몬"; // 0 ~ 2번까지 존재하는 배열에 3번 인덱스 추가 후 레몬 저장
document.write(fruitsArr + "<br>");
// 2. 배열의 length 속성은 변경 가능한 속성이므로 배열의 크기를 강제로 변경 가능
document.write("현재 배열 크기 : " + fruitsArr.length + "<br>"); // 크기 4
fruitsArr.length = 10;
document.write("변경 후 배열 크기 : " + fruitsArr.length + "<br>"); // 크기 10
// 만약, 배열을 초기화할 경우 배열 크기를 0으로 지정
fruitsArr.length = 0; // 배열 초기화
document.write("배열 초기화 후 : " + fruitsArr + "<br><hr>"); // 아무 데이터도 출력되지 않음
// 3. 배열에 저장되는 요소들의 데이터타입에 제약이 없음
// => 정수, 문자, 논리형 뿐만 아니라, 객체, 배열, 함수까지도 저장 가능함
var arrAllType = ["홍길동", 3.14, true, function() {alert("배열 내의 함수");}];
for(var item of arrAllType) {
document.write("배열내의 요소 : " + item + ", 데이터타입 : " + typeof(item) + "<br>");
// 만약, 배열 내의 요소 타입이 함수 타입일 경우 함수 실행도 가능
// if(typeof(item) == "function") {
// item(); // item 변수에 저장된 function() {alert("배열 내의 함수");} 함수 코드가 실행됨
// }
}
// 4. 배열에 요소를 전달하여 배열을 생성할 때 마지막 요소 끝에도 콤마(,) 사용 가능(필수 아님)
// => 차후 데이터(요소) 추가/삭제 시 마지막 요소에 대한 콤마 구분 불필요 = Trailing Comma 라고 함
var names = [
"홍길동",
"이순신",
"강감찬",
];
document.write("<hr>");
// ===================================================
// 배열을 다루는 함수
// delete 연산자를 사용하여 배열 내의 요소 삭제 가능
// delete names[2];
document.write(names + "<br>");
// 1. splice(인덱스, 요소갯수) 함수 : 지정된 인덱스부터 요소갯수만큼 배열 요소 삭제
names.splice(1, 1); // 1번 인덱스부터 1개 요소(이순신) 삭제
document.write("splice() 함수 호출 후 : " + names + "<br>"); // 홍길동, 강감찬
// 2. slice(시작인덱스, 끝인덱스) : 시작인덱스 ~ 끝인덱스-1 까지 부분 배열 추출
var arr10 = [1, 2, 3, 4, 5];
var arrSlice = arr10.slice(1, 3);
document.write("slice() 함수 호출 후 : " + arrSlice + "<br>");
</script>
</head>
<body>
</body>
</html>
