JavaScript에서 놓치기 쉬운 배열의 특징들

지금까지 당신이 알고 있던 배열은 가라···!

만약 당신이 이전에 다른 언어를 배웠다면 자바스크립트의 배열이 더 어려울 것이다. 난 아직도 어렵다. 아직도 얼떨떨하고 머리만 긁고 있다~ 자바에서는 한 번 결정한 배열의 타입이 절.대.로 바뀔 수 없지만 자바스크립트에서는 배열의 타입이 고정되어 있지 않아서 정수형, 실수형, 문자형, 불리언 타입 등 한 가지 배열이라는 변수 안에 모두 섞어서 사용할 수 있다. 인덱스도 연속적이지 않아도 되고 중간에 비워져 있어도 된다. 심지어는 한 번 결정한 배열의 숫자에서 맘대로 추가하고 삭제할 수도 있다. 어떻게 이런 일이~ 그럴 수 있는 이유는 자바스크립트에서의 배열은 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 />");

하 하