본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 배열

배열

배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.


배열

배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다.

문법

var 변수명 = [값1, 값2, 값3......]

배열 사용하는 방법1

배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다.

var arr1 = new Array();
arr1[0] = 100;
arr1[1] = 200;

배열 사용하는 방법2

배열을 선언과 동시에 데이터를 넣는 방법입니다.

var arr2 = new Array(100,200);

배열 사용하는 방법3

배열을 선언하지 않고 바로 데이터를 넣는 방법입니다.

var arr3 = [100,200];

배열

배열 선언하는 예제입니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>배열</title>
    <script>
        //변수 x = 100; 변수 y = 200 저장한 다음 출력해주세요!!
        const x = 100;
        const y = 200;

        document.write(x);
        document.write("<br>");
        document.write(y);
        document.write("<br><br>");

        //배열을 이용해서 화면에 100과 200을 출력하세요!
        const arr1 = new Array();
        arr1[0] = 100;      //첫번째 배열 저장소에 100을 저장
        arr1[1] = 200;      //두번째 배열 저장소에 200을 저장

        document.write(arr1[0]);
        document.write("<br>");
        document.write(arr1[1]);
        document.write("<br><br>");

        //배열을 선언과 동시에 초기화하여 100과 200을 출력하세요!!
        const arr2 = new Array(100,200);

        document.write(arr2[0]);
        document.write("<br>");
        document.write(arr2[1]);
        document.write("<br><br>");

        //배열을 선언하지 않고 100과 200을 출력하세요!!
        const arr3 = [100,200];

        document.write(arr3[0]);
        document.write("<br>");
        document.write(arr3[1]);
        document.write("<br><br>");

        //배열의 크기 구하기
        const arr4 = [100,200,300,400,500];

        document.write(arr4.length);
        document.write("<br><br>");

        //배열 가져오기
        const arr5 = [100,200,300,400,500];

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

        //배열의 합 구하기
        const arr6 = [100,200,300,400,500];
        let sum = 0;

        for(var i=0; i<arr6.length; i++){
            // sum = 100+200+300+400+500;
            // sum = arr5[0]+arr5[1]+arr5[2]+arr5[3]+arr5[4]
            // sum = arr5[i]+arr5[i]+arr5[i]+arr5[i]+arr5[i]
            sum = sum + arr6[i];
            // 0    =  0  + 100;
            // 100 = 100 + 200;
            // 300 = 300 + 300;
            // 600 = 600 + 400;
            // 1000= 1000+ 500;
            // 1500
        }
        document.write("<br>");
        document.write(sum);
    </script>
</head>
<body>
    
</body>
</html>

배열 객체의 메서드 및 속성

종류 설명
join() 배열 객체의 데이터를 문자형 데이터로 출력합니다.
reverse() 배열 객체의 데이터를 반대로 출력합니다.
sort() 배열 객체의 데이터를 오름차순으로 출력합니다.
slice() 배열 객체의 데이터를 인덱스 구간만큼 가져옵니다.
splice() 배열 객체의 지정 데이터를 삭제하고 새 테이터를 삽입합니다.
concat() 배열 객체의 데이터 중 2개의 배열 객체를 하나로 합칩니다.
pop() 배열 객체의 데이터 중 마지막 데이터를 삭제합니다.
push() 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.
shift() 배열 객체의 데이터 중 첫 번째 데이터를 삭제합니다.
unshift() 배열 객체의 첫 번째 인덱스에 새 데이터를 삽입합니다.
length 배열 객체의 데이터 개수를 반환합니다.

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기