JavaScript - 배열 기초

배열

• 동일한 이름을 갖는 원소들의 연속적 저장 영역
• 배열의 원소는 메모리 내에 순서대로 저장
• 배열의 각 원소는 인덱스([0]부터 시작)로 구별
• 배열 선언 형식
  • var 배열명 = new Array(3); // 크기가 정해진 배열
    • var arr = new Array(3);
  • var 배열명 = new Array(); // 크기가 정해지지 않은 배열
    • var arr = new Array();
  • var 배열명 = new Array(값1, 값2, 값3, ... , 값n); // 선언과 동시에 초기화
    • var arr = new Array(1, 2, 3, ... , n);
  • var 배열명 = [값1, 값2, 값3, ... , 값n]; // 대괄호를 사용한 선언과 동시에 초기화
    • var arr = [1, 2, 3, ... , n];
• 배열 사용
  • 배열 원소에 값 저장
    • arr[n] = 10; // n번 인덱스(n+1 번째 위치)에 값 저장
  • 배열 출력
    • document.write(arr[n]);
  • 주의사항
    • 배열의 전체 원소에 값을 저장하거나 출력하기 위해서는 반복문 사용
    • 배열은 크기가 정해져 있기 때문에 반복 횟수를 정할 수 있으므로 for문 사용
    • 반복문은 반드시 0부터(배열을 처음부터 순회해야 할 경우) 시작한다.(배열의 인덱스가 0번부터 시작하기 때문)
• 배열의 크기(원소의 개수)
  • arr.length
• 특징
  • 배열에 데이터 형식이 없기 때문에 각 원소에 다른 유형의 데이터 저장 가능

배열 예시 코드

array.html

        <script type="text/javascript">
            var num = new Array(5); // 크기가 5인 배열 생성

            var player = new Array(); // 크기가 정해지지 않은 배열 선언

            //  배열 선언과 동시에 초기화
            var fish = new Array("고등어", "갈치", "명태", "대구");
            var score = [84, 90, 75, 99];

            // 각 원소의 데이터 타입이 다른 경우
            var student = ["홍길동", 2, 95.3, 'A'];
            var student2 = new Array("홍길동", 2, 95.3, 'A');

            // num 배열의 각 원소 값 저장
            for(var i = 0; i < num.length; i++) {
                num[i] = i;
            }
            // player 배열에 각 원소 값 저장
            for(var i = 0; i < 3; i++) {
                player[i] = "선수" + ( i+1 );
            }

            document.write("num : ");
            for(var i = 0; i < num.length; i++) {
                document.write(num[i] + " ")
            }

            document.write("<br>player : ");
            for(var i = 0; i < player.length; i++) {
                document.write(player[i] + " ")
            }

            document.write("<br>fish : ");
            for(var i = 0; i < fish.length; i++) {
                document.write(fish[i] + " ")
            }

            document.write("<br>score : ");
            for(var i = 0; i < score.length; i++) {
                document.write(score[i] + " ")
            }

            document.write("<br>student : ");
            for(var i = 0; i < student.length; i++) {
                document.write(student[i] + " ")
            }
        </script>

arrayEx1.html

        <script type="text/javascript">
            var colors = new Array(4);
            for(var i = 0; i < colors.length; i++) {
                colors[i] = prompt("색상 입력");
            }
            document.write("<ol type=\"A\">");
            for(var i = 0; i < colors.length; i++) {
                document.write( "<li>" + colors[i] + "</li>");
            }
            document.write("</ol>");
        </script>

arrayEx2.html

        <script type="text/javascript">
            var student = new Array(4);
            for(var i = 0; i < student.length; i++) {
                student[i] = prompt("학생" + (i+1) + " 입력");
            }
            document.write("<table border=\"1\" width=\"200px\">")
            for(var i = 0; i < student.length; i++) {
                document.write("<tr align=\"center\"><td>" + (i+1) + "</td><td>" + student[i] + "</td></tr>");
            }
            document.write("/<table>")
        </script>