# 배열

## 개요
JavaScript의 **배열(Array)**은 여러 데이터를 순차적으로 저장하고 관리하는 데 사용되는 기본적인 자료구조입니다. 배열은 동적 크기, 다양한 내장 메서드, 유연한 데이터 처리 기능을 제공하며, 프로그래밍에서 반복 작업, 데이터 집합 처리, 상태 관리 등에 핵심적인 역할을 합니다. 이 문서에서는 배열의 기본 개념, 주요 메서드, 활용 패턴, 그리고 최신 기능까지 다룹니다.

---

## 배열의 기본

### 배열 생성
배열은 두 가지 방식으로 생성할 수 있습니다:
- **배열 리터럴**: `[]`를 사용하는 간결한 방법  
  ```javascript
  const fruits = ['Apple', 'Banana', 'Cherry'];
  ```
- **Array 생성자 함수**: `new Array()`를 사용  
  ```javascript
  const numbers = new Array(1, 2, 3); // [1, 2, 3]
  const emptyArray = new Array(5);   // 길이 5의 빈 배열
  ```

### 요소 접근 및 수정
배열의 요소는 **0-based 인덱스**로 접근합니다:
```javascript
console.log(fruits[0]); // "Apple"
fruits[1] = 'Blueberry'; // 두 번째 요소 수정
```

### 배열 길이
`length` 속성으로 배열의 크기를 확인하거나 조정할 수 있습니다:
```javascript
console.log(fruits.length); // 3
fruits.length = 2; // 배열 크기 조정 (["Apple", "Blueberry"])
```

---

## 배열 메서드

### 변경 메서드 (Mutator Methods)
배열 자체를 수정하는 메서드입니다:

| 메서드 | 설명 | 예시 |
|-------|------|------|
| `push()` | 끝에 요소 추가 | `arr.push('New')` |
| `pop()` | 마지막 요소 제거 | `arr.pop()` |
| `unshift()` | 앞에 요소 추가 | `arr.unshift('First')` |
| `shift()` | 첫 번째 요소 제거 | `arr.shift()` |
| `splice()` | 요소 추가/삭제 | `arr.splice(2, 1, 'X')` |

**예시:**
```javascript
const arr = [1, 2, 3];
arr.splice(1, 1, 'a'); // [1, "a", 3]
```

### 접근 메서드 (Accessor Methods)
배열을 수정하지 않고 정보를 반환하는 메서드:

| 메서드 | 설명 | 예시 |
|-------|------|------|
| `slice()` | 부분 배열 반환 | `arr.slice(1, 3)` |
| `indexOf()` | 요소 인덱스 찾기 | `arr.indexOf('a')` |
| `includes()` | 요소 존재 여부 확인 | `arr.includes('a')` |

**예시:**
```javascript
const arr = [10, 20, 30];
console.log(arr.slice(0, 2)); // [10, 20]
console.log(arr.includes(25)); // false
```

### 순회 메서드 (Iteration Methods)
함수형 프로그래밍 스타일의 메서드:

| 메서드 | 설명 | 예시 |
|-------|------|------|
| `forEach()` | 각 요소에 대해 함수 실행 | `arr.forEach(console.log)` |
| `map()` | 변환된 새 배열 생성 | `arr.map(x => x * 2)` |
| `filter()` | 조건에 맞는 요소로 구성된 배열 반환 | `arr.filter(x => x > 10)` |
| `reduce()` | 누적 계산 수행 | `arr.reduce((a, b) => a + b, 0)` |

**예시:**
```javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]
```

---

## 배열 순회

### 전통적 반복문
```javascript
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
```

### `forEach()` 메서드
```javascript
arr.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});
```

### `for...of` 루프
```javascript
for (const item of arr) {
  console.log(item);
}
```

---

## 다차원 배열
배열 내 배열을 포함하는 구조입니다:
```javascript
const matrix = [
  [1, 2],
  [3, 4]
];
console.log(matrix[0][1]); // 2
```

### 조작 예시
```javascript
matrix.forEach(row => row.push(5)); // 각 행에 5 추가
// 결과: [[1, 2, 5], [3, 4, 5]]
```

---

## Typed Arrays
**Typed Arrays**는 바이너리 데이터를 효율적으로 처리하기 위한 배열입니다. `ArrayBuffer`와 함께 사용되며, `Int8Array`, `Float32Array` 등 다양한 타입이 있습니다:
```javascript
const buffer = new ArrayBuffer(8);
const view = new Int16Array(buffer);
view[0] = 0x1234;
console.log(view[0].toString(16)); // "1234"
```

---

## 최고의 관행 (Best Practices)

1. **배열 구멍(Avoid Holes) 피하기**  
   비연속적인 인덱스는 성능 저하를 초래합니다:
   ```javascript
   const bad = [1, , 3]; // ❌
   const good = [1, undefined, 3]; // ✅
   ```

2. **함수형 메서드 선호**  
   `map`, `filter` 등은 가독성과 불변성 유지에 유리합니다:
   ```javascript
   const squares = numbers.map(n => n ** 2);
   ```

3. **`const` 사용 권장**  
   배열 자체를 재할당하지 않는 경우 `const`로 선언하세요:
   ```javascript
   const arr = [1, 2, 3];
   arr.push(4); // 가능 (내용 수정)
   arr = [];    // ❌ 에러
   ```

---

## 관련 문서 및 참고 자료

- [MDN Web Docs: Array](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [JavaScript.info: Arrays](https://javascript.info/array)
- [ECMAScript 2023 Array Specification](https://tc39.es/ecma262/#sec-array-objects)

--- 

이 문서는 JavaScript 배열의 핵심 개념과 활용법을 다루며, 초보자부터 중급 개발자까지 효율적으로 배열을 사용할 수 있도록 구성되었습니다.