배열

웹 프로그래밍 기초/배열

배열

별초롱언니 2025. 4. 2. 15:20

배열 : 서로 관련된 변수들을 묶어 하나의 이름으로 공유한 자료형

01. 배열의 필요성 : 데이터를 담기 위해서는 변수와 값이 필요한데 관련된 내용의 데이터들이 100개 이상이라면 변수 선언과 초기화 및 접근에서 너무 힘들다. 이때 배열을 사용하면 관련 문제들이 사라진다.

var userName01 = "HongGilDong";

var userName02 = "이순신";

var userName03 = "김유신";

var userName100 = "세종대왕";

위의 문장은 아래와 동일하다 .

var userName = "HongGilDong", "이순신", "김유신",...., "세종대왕"];

위에서 'userName'은 배열명이고 '0'번 방에 "HongGilDong", '1'번 방이 "이순신",'100'번 방이 "세종대왕" 각각 할당되었음을 의미합니다. 이와 같이 각 방은 고유 일련번호로 지정되며 이를 "인덱스"라고 합니다. 배열의 인덱스를 활용하여 반복문 등에서 매우 유용하게 데이터를 다룹니다. 물론, 여러 자료형의 데이터를 담을 수 있습니다.

배열의 생성

01. 리터럴로 배열 생성

배열에 들어가는 값들을 배열 선언과 함께 할당한다. 대괄호([]) 안에 리터럴값을 제공하고 콤마(,)로 구분한다.

var fruits = ["apple","banana","pear"];

<!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>
    var fruits = ["apple","banana","pear"];
    document.write(fruits[0] + "<br>");
    document.write(fruits[1] + "<br>");
    document.write(fruits[2] + "<br>");
    document.write(fruits[3] + "<br>");
  </script>
</body>
</html>

02. Array 객체를 이용하여 배열 생성

리터럴 배열 생성은 실제 데이터 값이 요구된다. Array 객체는 실제 데이터값이 없는 상태의 배열을 생성하고, 필요에 따라 값을 채워나가는 방식이다.

var friends = new Array();

// vas 배열이름 = 새로운 객체 생성을 하겠다 의미하는 키워드 + 객체가 배열임을 의미

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열의 생성2</title>
</head>
<body>
  <script>
    var friends = new Array();
    friends[1] = "홍길동";
    friends[2] = "신사임당";
    friends[4] = "세종대왕";

    document.write(friends[0] + "<br>");
    document.write(friends[1] + "<br>");
    document.write(friends[2] + "<br>");
    document.write(friends[3] + "<br>");
    document.write(friends[4] + "<br>");
    document.write(friends[5] + "<br>");

  </script>
</body>
</html>

배열에 값을 할당할 때에는 인덱스로 선택적인 값 할당이 가능하다. 값이 할당되지 않은 곳은 undefined로 인식된다.

03. 리터럴과 Array() 혼합 방식

배열을 선언할 때에 2가지 방법을 혼합하여 하나의 문장으로 정의하여 선언할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배열의 생성2</title>
</head>
<body>
  <script>
    var fruits = new Array ("apple","banana","orange","pear","lemon");

    document.write(fruits[0] + "<br>");
    document.write(fruits[1] + "<br>");
    document.write(fruits[2] + "<br>");
    document.write(fruits[3] + "<br>");
    document.write(fruits[4] + "<br>");
    document.write(fruits[5] + "<br>");
  </script>
</body>
</html>