JavaScript 따라하기 3일 차 | 배열 Array

배열(Array)

 - 복수개의 데이터를 연속적인 공간에 저장하는 객체(자료구조)

 - 변수와 달리 한 번에 여러 데이터를 저장(관리) 기능

 - 배열에 저장되는 데이터 공간은 인덱스(index)라고 하는 번호를 붙여서 관리

 => 인덱스 번호는 자동으로 부여되며 [0]부터 시작하여 [배열크기-1]까지 부여됨

// [ 배열 선언 기본 문법 ]
let 배열명 = []; //#1
let 배열명 = new Array(); //#2
//=> 주로, 1번 형태를 많이 사용하며, 1번 형태를 그대로 사용하지 않고 대괄호 내에 초기값 지정

let 배열명 = [값1, 값2, ..., 값n]; //#3
=> n개 만큼의 공간을 할당받아 자동으로 데이터를 저장함
=> 각 항목은 콤마(,)로 구분

// [ 배열 접근 기본 문법 ]
배열명[인덱스]

배열 예시

// => 데이터가 미리 준비되어 있을 경우 데이터 저장까지 함께 수행
let fruits = ["사과", "딸기", "오렌지"];
// => fruits 배열 생성 시 인덱스가 자동으로 부여되며
// => 배열이 3칸이므로 인덱스는 0 ~ 2(3-1)번까지 부여됨

// 배열의 각 인덱스에 접근하여 데이터 가져와서 출력하기
document.write(fruits[0] + "<br>"); // 첫번째 데이터(0번 인덱스) 인 "사과" 를 가져와서 출력
document.write(fruits[1] + "<br>"); // 두번째 데이터(1번 인덱스) 인 "딸기" 를 가져와서 출력
document.write(fruits[2] + "<br>"); // 세번째 데이터(2번 인덱스) 인 "오렌지" 를 가져와서 출력

// 만약, 존재하지 않는 인덱스에 접근할 경우 undefined 값이 출력됨
// 	document.write(fruits[3] + "<br>"); // 3번 인덱스(네번째 데이터)가 없으므로 undefined 출력

document.write("<hr>");
// fruits 배열의 첫번째 데이터("사과")를 "바나나" 로 교체(= 값 저장 = 덮어씀)
fruits[0] = "바나나";
fruits[1] = "메론";
document.write(fruits[0] + "<br>"); // 첫번째 데이터(0번 인덱스) 인 "사과" 를 가져와서 출력
document.write(fruits[1] + "<br>"); // 두번째 데이터(1번 인덱스) 인 "딸기" 를 가져와서 출력
document.write(fruits[2] + "<br>"); // 세번째 데이터(2번 인덱스) 인 "오렌지" 를 가져와서 출력

// fruits 배열의 네번째 데이터(3번 인덱스)에 "파인애플" 저장
// => 기존 배열은 3칸짜리이지만, 네번째 데이터를 3번 인덱스에 추가하면 추가 가능(자바는 불가능)
fruits[3] = "파인애플";
document.write(fruits[3] + "<br>");

fruits[4] = 1234; // 동일한 데이터타입이 아니더라도 같은 배열에 저장 가능(자바는 불가능)
document.write(fruits[4] + "<br>");

// 배열의 크기(길이)는 배열명.length 로 알아낼 수 있다!
document.write("fruits 배열 길이(크기) : " + fruits.length + "<br>"); // 5 출력됨
document.write("<hr>");

// 1번 방법으로 배열 nums 생성
var nums = []; // 비어있는 배열 nums 생성됨
document.write("nums 배열 길이(크기) : " + nums.length + "<br>"); // 빈 배열이므로 크기는 0

// 비어있는 배열 nums 에 10, 20, 30 을 차례대로 저장(추가)하기
nums[0] = 10;
nums[1] = 20;
nums[2] = 30;
document.write("nums 배열 길이(크기) : " + nums.length + "<br>");
document.write(nums[0] + "<br>");
document.write(nums[1] + "<br>");
document.write(nums[2] + "<br>");

 

반복문을 활용한 배열 접근

 - 주로 for문을 사용하여 배열에 차례대로 접근

 - for()를 이용한 접근과 for(of)를 이용한 접근이 있다 

< 기본적인 for문을 사용한 배열 접근 기본 공식 >
for(let i = 0; i < 배열명.length; i++) {}
=> 배열명.length 를 통해 배열의 크기를 알아내면 
   0 부터 배열크기보다 작을 동안(배열크기-1 까지) 1씩 증가하면서 차례대로 반복 가능함
=> 사용자가 지정하는 범위에 따라 특정 범위만큼만 접근도 가능


< for...of 문을 사용한 배열 접근 방법 >
for(let 변수명 of 배열명) {}
=> of 우변의 배열 크기만큼 차례대로 반복하면서 좌변의 변수에 배열 데이터를 차례대로 꺼내서 저장
=> 무조건 처음부터 끝까지 차례대로 반복하므로 특정 구간에 대한 반복은 불가능

 

반복문으로 접근 예시

// 배열 fruits 생성 및 "사과", "딸기", "오렌지" 저장 후 출력
let fruits = ["사과", "딸기", "오렌지"];

document.write(fruits[0] + "<br>");
document.write(fruits[1] + "<br>");
document.write(fruits[2] + "<br>");

for(let i = 0; i < fruits.length; i++) { // fruits 배열 크기(3) 보다 작을 동안 반복(0 ~ 2)
    // fruits 배열에 저장된 과일을 하나씩 꺼내서 변수 fruits 에 저장
    let fruit = fruits[i];

    document.write(fruit + "<br>");
}

// 위의 기본 for문 대신 for...of 문을 사용할 경우
for(let fruit of fruits) { 
    // 우변의 fruits 배열에서 차례대로 데이터를 꺼내서 좌변의 변수 fruit 에 저장(반복)
    document.write(fruit + "<br>");
}

document.write("<hr>");

// 배열 nums 생성 및 10, 20, 30, 40, 50 저장 후 출력
let nums = [10, 20, 30, 40, 50];
for(let i = 0; i < 5; i++) { // 0 ~ 4 까지 반복
    document.write(nums[i] + "<br>");
}

// 만약, nums 배열의 여섯번째 데이터(5번 인덱스)에 값(60)을 추가할 경우
nums[5] = 60;
for(let i = 0; i < 6; i++) { // 0 ~ 5 까지 반복
    document.write(nums[i] + "<br>");
}
// => 배열의 크기가 변할 경우 for문의 범위를 수정해야하는 일이 발생함