[javascript] 배열 1 / 배열(Array) 정의, 배열 인덱스, 배열 길이

배열(Array) 이란

• 배열(Array) 은 여러 개의 값을 순서대로 저장하는 자료 구조
• 각각의 값은 "요소(element)"라고 부르고, 요소는 고유한 번호(인덱스)로 구분됨
• 자바스크립트 배열은 동적 배열이라 크기가 고정되지 않고, 중간에 요소를 추가하거나 삭제할 수 있음

특징

• 인덱스 기반 접근
• 길이(length) 속성
• 동적 크기 할당 가능
• 희소 배열(sparse array) 가능

let fruits = ["사과", "바나나", "포도"];

---

배열과 객체의 차이

구분	객체(Object)	배열(Array)
저장 구조	키: 값 쌍	순서(index)에 따른 값
접근 방법	obj.key 또는 obj["key"]	arr[index]
순서	보장되지 않음(ES6 이후 일부 보장되지만 기본적으로 순서 의미 X)	반드시 0부터 시작하는 순서 유지
용도	데이터의 속성을 표현할 때	여러 데이터를 순서대로 나열할 때
메서드	기본적인 객체 메서드	배열 전용 메서드 제공 (push, pop, map, filter 등)

---

배열 인덱스

• 배열의 인덱스는 배열에서 각 요소의 위치를 나타내는 숫자
• 0부터 시작하는 정수 (실수, 문자, 음수(일반 접근) 등은 사용 불가)
• 자바스크립트 배열은 “빈 공간이 있어도 길이를 자동으로 관리” <empty item>

---

인덱스를 사용한 요소 접근

• 배열에서 특정 요소를 가져오거나 수정하려면 인덱스를 사용
• 배열의 인덱스를 통해 읽기/쓰기 모두 가능

const arr = ['사과', '바나나', '체리'];

console.log(arr[1]); // 바나나
arr[2] = '딸기';      // 체리를 딸기로 변경
console.log(arr);     // ['사과', '바나나', '딸기']

---

인덱스 범위와 유효성

• 유효한 인덱스 범위: 0 ~ 배열 길이 - 1
• 배열 길이보다 큰 인덱스를 사용하면 undefined가 나옴
• 음수 인덱스는 기본적으로 지원되지 않음
  (하지만 at() 메서드를 사용하면 음수 인덱스로 뒤에서부터 접근 가능)

const arr = ['사과', '바나나'];
console.log(arr[5]); // undefined

// 음수 인덱스는 기본적으로 지원되지 않음
console.log(arr[-1]); // undefined

// at() 메서드를 사용하여 음수 인덱스로 뒤에서부터 접근 가능
console.log(arr.at(-1)); // 바나나

---

마지막 요소 접근 (arr[arr.length - 1])

• 마지막 요소에 접근하려면 length 프로퍼티와 인덱스를 조합
• arr.length - 1

const arr = ['사과', '바나나', '체리'];
const last = arr[arr.length - 1]; // '체리'

---

동적 할당 가능

• 배열은 크기가 고정되어 있지 않음
• 배열 길이에 없는 인덱스에 값 할당 가능
• 배열 길이가 자동으로 증가

const arr = ['사과', '바나나'];
console.log(arr.length); // 2

// 인덱스 3에 새로운 값 할당
arr[3] = '체리';
console.log(arr);       // ['사과', '바나나', <1 empty item>, '체리']
console.log(arr.length); // 4

/*

- 기존 배열 길이는 2였지만, arr[3] = '체리'로 3번 인덱스에 값을 넣으면서 배열 길이가 4로 늘어남
- 중간에 비어 있는 2번 인덱스는 자동으로 empty 상태가 됨
- ※배열은 “빈 공간이 있어도 길이를 자동으로 관리”합니다.
*/

---

희소 배열(Sparse Array) 가능

• 희소 배열이란, 일부 인덱스에 값이 없고 비어 있는 배열을 의미
  ex) [ '사과', '바나나', <1 empty item>, '체리' ]
• length는 실제 요소 개수보다 크게 나올 수 있음.
• 반복문에서 forEach나 map 등은 빈 요소를 건너뜀.

const arr = [];
arr[2] = '사과';

console.log(arr);       // [ <2 empty items>, '사과' ]
console.log(arr.length); // 3

arr.forEach((item, index) => {
  console.log(index, item); // index 2: 사과만 출력됨
});

• 빈 요소는 undefined와 다르지만, 접근 시 undefined로 나타남

console.log(arr[0]); // undefined
console.log(arr[1]); // undefined

---

배열의 length 속성

• 배열이 가진 요소의 개수를 나타내는 숫자 값.
• 자동 업데이트: 배열에 요소를 추가하거나 삭제하면 자동으로 갱신됨.
• length 속성은 읽기 전용이 아니기 때문에 직접 변경할 수도 있음

// [문법]
배열.length

let arr = [10, 20, 30];
console.log(arr.length); // 3
arr.push(40);
console.log(arr.length); // 4 (자동 증가)
arr.pop();
console.log(arr.length); // 3 (자동 감소)

---

배열 길이 변경

1) 길이를 늘리는 경우

• 기존 배열의 끝 이후에 빈 슬롯(Empty Slot)이 추가됨.
• 실제 값이 추가되는 게 아니라, 구멍(hole)이 생김 → 즉, undefined와는 다름.

let arr = [1, 2];
arr.length = 5;
console.log(arr);       // [1, 2, <3 empty items>]
console.log(arr[3]);    // undefined (하지만 실제로 값이 존재하지 않음)
console.log(3 in arr);  // false (빈 슬롯이라 존재하지 않음)

2) 길이를 줄이는 경우

• 지정한 길이 이후의 요소는 완전히 삭제됨.
• 배열을 잘라내는 효과와 동일

let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr);  // [1, 2, 3]