지금까지 당신이 알고 있던 배열은 가라···!
만약 당신이 이전에 다른 언어를 배웠다면 자바스크립트의 배열이 더 어려울 것이다. 난 아직도 어렵다. 아직도 얼떨떨하고 머리만 긁고 있다~ 자바에서는 한 번 결정한 배열의 타입이 절.대.로 바뀔 수 없지만 자바스크립트에서는 배열의 타입이 고정되어 있지 않아서 정수형, 실수형, 문자형, 불리언 타입 등 한 가지 배열이라는 변수 안에 모두 섞어서 사용할 수 있다. 인덱스도 연속적이지 않아도 되고 중간에 비워져 있어도 된다. 심지어는 한 번 결정한 배열의 숫자에서 맘대로 추가하고 삭제할 수도 있다. 어떻게 이런 일이~ 그럴 수 있는 이유는 자바스크립트에서의 배열은 Array 라는 객체로 다뤄지기 때문이다! 아래의 많은 예시들을 참고해서 배열에 대해 알아보자.
배열을 선언하는 방법 세 가지
var arrList = [1, true, "java script"];
var arrObj = Array(1, true, "java script");
var arrNewObj = new Array(1, true, "java script");
document.write(arrList + "<br />");
document.write(arrObj + "<br />");
document.write(arrNewObj + "<br />");
방법이 달라도 같은 값을 가지고 있다.
자세히 보면 데이터타입도 모두 다르다.
자바나 다른 언어를 떠올리면 이게 돼? 싶을 일이지만 자바스크립트에서 만큼은 가능하다!
배열의 참조
var arr2 = ["JavaScript"];
var element = arr2[0];
arr2[1] = 10;
arr2[2] = element;
document.write("배열 arr의 요소에는 [" + arr2 + "]가 있습니다. <br />");
document.write("배열 arr의 길이는 " + arr2.length + " 입니다. <br />");
delete arr2[2];
document.write("배열 arr의 요소에는 [" + arr2 + "]가 있습니다. <br />");
document.write("배열 arr의 길이는 " + arr2.length + " 입니다. <br />");
자바에서는 한 번 지정된 배열의 크기를 바꿀 수 없었지만 자바스크립트에서 만큼은 자유자재로 바꿀 수 있다. 예시처럼 배열의 두 번째 요소(인덱스 번호 1번)에서 숫자 10을 대입해 추가하는 방법이 있고, delete 예약어를 사용해서 내가 삭제하고 싶은 배열을 지정해 삭제할 수 있다. 삭제를 하더라도 배열의 길이는 변하지 않는다!
배열의 요소 추가
var arr3 = [1, true, "java"];
arr3.push("Script");
document.write(arr3 + "<br />");
arr3[arr3.length] = 100;
document.write(arr3 + "<br />");
document.write("arr3 길이 : " + arr3.length + "<br />");
arr3[10] = "자바스크립트";
document.write(arr3 + "<br />");
document.write("arr3 길이 : " + arr3.length + "<br />");
document.write("arr3[7] : " + arr3[7] + "<br />");
추가 방법 3가지
1. arr.push(추가할 요소); //push() 메소드
2. arr[arr.lenth] = 추가할 요소; //leng 프로퍼티
3. arr[특정인덱스] = 추가할 요소; //특정 인덱스 지정
arr3[10] = "자바스크립트";
인덱스 번호 10에 자바스크립트가 들어가고 사이에는 아무 값도 들어가지 않는다. 예를 들면 입주청소를 하지 않은 방을 구입한 것과 같다. 때문에 아무 값이 초기화 돼 있지 않은 인덱스 번호(여기선 7 지정)를 출력할 경우 undefined가출력된다.
그 이유는?
자바스크립트에서는 선언되지 않은 변수를 사용할 때와 변수는 선언되어 있는데 초기값을 선언하지 않았을 때 undefined을 출력하기 때문이다!
script 부분에서 테이블 사용하는 방법
var arr4 = [1, true, "javaScript"];
result = "<table border='1'><tr>";
for(var i in arr4)
{
result += "<td>" + arr4[i] + "</td>";
}
result += "</tr></table>";
document.write(result);
연관배열?
다른 언어를 배웠다면 배열을 떠올렸을 때 인덱스에 0부터 차례대로 나열되는 숫자가 들어간다고 알고 있겠지만... 자바스크립트에서는 숫자뿐만 아니라 임의의 타입과 값이 들어갈 수 있는데 이것을 연관배열이라고 한다. 사용할 땐 키와 값을 지정한다.
배열명["[키]"] = "[값]"; //입력
document.write(배열명["[키]"]); //출력
document.write("<br /> <h1>연관배열</h1>");
var fruits = new Array();
fruits['a'] = '사과';
fruits['b'] = '포도';
fruits['c'] = '오렌지';
document.write(fruits['a'] + "<br />");
document.write(fruits['b'] + "<br />");
document.write(fruits['c'] + "<br />");
document.write("fruits.length : " + fruits.length + ", fruits[0] : " + fruits[0]);
//연관배열에서는 length가 안 됨
문자열을 배열처럼 접근
var str = "안녕하세요!";
document.write(str.charAt(2)+"<br />");
document.write(str[2]+"<br />");
하 하 |
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
자바스크립트와 제이쿼리의 차이 (0) | 2021.11.07 |
---|---|
연관 배열 예제 (0) | 2021.11.06 |
[JavaScript] 숫자 맞추기 게임 (0) | 2021.11.05 |
JavaScript에서 value의 기능? (0) | 2021.11.05 |
자바스크립트 정리 및 예제들 (0) | 2021.11.03 |