불로구

자바스크립트 - 배열 & Array 본문

프로그래밍/JavaScript

자바스크립트 - 배열 & Array

맹이맹이 2020. 6. 18. 01:06
반응형

자바스크립트의 배열 만드는 방법

1) [ ]를 사용해서 만들기

2) Array 객체를 사용해서 배열 만들기

​

​

1) [ ]를 사용해서 배열 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = ["홍길동", "홍길서", "홍길남", "홍길북"];
        let age = [30, 25, 33, 29];
        let height = [170.5, 184.3, 177.3, 169.9];
        for(let i=0; i<name.length; i++){
            document.write(name[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<age.length; i++){
            document.write(age[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<height.length; i++){
            document.write(height[i] + " ");
        }
    </script>
</body>
</html>

[ ] 안에 만들고자 하는 원소들의 초기 값들을 작성하면 된다!

​

배열 크기와 원소 추가

자바스크립트 배열은 자바와 다르게 처음 만들어진 크기를 고정시키기 않고, 원소를 추가하여 늘릴 수 있다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = ["홍길동", "홍길서", "홍길남", "홍길북"];
        let age = [30, 25, 33, 29];
        let height = [170.5, 184.3, 177.3, 169.9];
        name[5] = "짱구";
        name[6] = "철수";
        for(let i=0; i<name.length; i++){
            document.write(name[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<age.length; i++){
            document.write(age[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<height.length; i++){
            document.write(height[i] + " ");
        }
    </script>
</body>
</html>

여기서는 일부로 name[4]를 지정하지 않고, name[5],name[6]을 추가하여 배열의 길이를 6으로 늘렸다

출력에 보면 undefined를 볼 수 있을 것이다!

원소의 값을 추가할 때 빈 공간이 발생하면 원소의 값은 undefined가 되므로 주의하자!!

​

배열의 원소 변경

ex) name[0] = "둘리";

그냥 변경하고 싶은 위치에 수정해 주면 된다!

​

2) Array를 이용해서 배열 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = new Array("홍길동","홍길서","홍길남","홍길북");
        let age = new Array(5);
        for(let i = 0; i<age.length; i++){
            age[i] = parseInt(Math.random()*100+1);
        }
        let height = new Array();
        for(let i = 0; i<age.length; i++){
            height[i] = (Math.random()*190+160).toFixed(2);
        }

        for(let i=0; i<name.length; i++){
            document.write(name[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<age.length; i++){
            document.write(age[i] + " ");
        }
        document.write("<br>");
        for(let i=0; i<height.length; i++){
            document.write(height[i] + " ");
        }
    </script>
</body>
</html>

Array를 이용해서 초기 값을 가진 배열과, 초기화되지 않은 배열, 빈 배열을 생성할 수 있다!

​

배열의 길이 구하기

- 배열.length;

​

자바스크립트 배열의 특징

- 배열은 Array 객체이다 : [ ]나 Array나 모두 객체로 다룬다!

- 여러 타입의 데이터가 섞여 저장 가능하다 : 자바 같은 경우 타입을 지정해 주지만 자바스크립트는 타입을

지정하지 않아 여러 타입의 데이터가 저장 가능하다.

​

​

​

혹시나 궁금한 점은 댓글로 남겨주세요!

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - DOM 객체 생성, 삽입, 삭제  (0) 2020.06.22
자바스크립트 - HTML DOM & Document  (0) 2020.06.19
자바스크립트 - 객체 & 코어객체  (0) 2020.06.18
자바스크립트 - 식별자, 데이터 타입, 변수  (0) 2020.06.18
자바스크립트 - 출력, prompt(), confirm(), alert()  (0) 2020.06.17
'프로그래밍/JavaScript' Related Articles more
Comments