자바스크립트에서 Array.prototype.fill()의 사용법은 무엇인가요?

자바스크립트 Array.prototype.fill() 사용법 FAQ

Q1: Array.prototype.fill() 메서드는 무엇인가요?
A1: fill() 메서드는 배열의 모든 요소를 특정 값으로 채워 배열을 수정하는 메서드입니다. 기존 배열을 변경하며 새로운 배열을 반환하지 않습니다.

---

Q2: 기본 사용법은 어떻게 되나요?
A2:
```javascript
array.fill(value, start, end)
```
- `value`: 배열에 채울 값 (필수)
- `start`: 채우기를 시작할 인덱스 (옵션, 기본값: 0)
- `end`: 채우기를 끝낼 인덱스 (옵션, 기본값: 배열 길이)

예:
```javascript
let arr = [1, 2, 3, 4];
arr.fill(0); // [0, 0, 0, 0]
arr.fill(5, 1); // [0, 5, 5, 5]
arr.fill(9, 1, 3); // [0, 9, 9, 5]
```

---

Q3: fill()는 원본 배열을 변경하나요?
A3: 네, fill() 메서드는 배열을 직접 수정합니다. 즉, 원본 배열이 변경됩니다.

---

Q4: start와 end 인덱스는 어떻게 동작하나요?
A4:
- `start`는 값을 채우기 시작하는 인덱스이고 (기본 0)
- `end`는 값을 채우기를 멈출 인덱스로, 해당 인덱스 요소는 포함하지 않습니다 (기본 배열 길이).
음수 인덱스도 사용할 수 있으며, 배열 끝에서부터의 오프셋으로 처리됩니다.

예:
```javascript
let arr = [1, 2, 3, 4];
arr.fill(7, -3, -1); // [1, 7, 7, 4]
```

---

Q5: fill()에 객체를 넣으면 어떻게 되나요?
A5: 객체도 값으로 할당할 수 있으나, 배열 요소에는 같은 객체의 참조가 복사 됩니다. 따라서 각 요소는 같은 객체를 가리키게 됩니다.
```javascript
let obj = {a:1};
let arr = new Array(3).fill(obj);
arr[0].a = 99;
console.log(arr[1].a); // 99 (같은 객체 참조)
```

---

Q6: 빈 배열(new Array(size))에 fill()을 사용하면 어떻게 되나요?
A6: new Array(size)는 요소가 비어 있는 "희소 배열"입니다. fill()을 사용하면 해당 범위에 값을 채워 실제 요소가 만들어집니다.

```javascript
let arr = new Array(3);
console.log(arr); // [ <3 empty items> ]
arr.fill(0);
console.log(arr); // [0, 0, 0]
```

---

Q7: fill()과 map()을 함께 사용해 값을 채울 수 있나요?
A7: 아무 값으로 전부 채운 후 map()으로 바꾸는 방법이 있지만, fill() 자체는 고정한 값으로만 채우므로 map()과 함께 쓰는 것이 일반적입니다.

```javascript
let arr = new Array(5).fill(0).map((_, i) => i + 1);
console.log(arr); // [1, 2, 3, 4, 5]
```

---

Q8: fill() 메서드는 IE나 구형 브라우저에서 지원되나요?
A8: Array.prototype.fill()은 ECMAScript 2015(ES6)에서 도입되어 IE에서는 지원되지 않습니다. 구형 브라우저 지원이 필요하면 폴리필을 사용해야 합니다.

---

Q9: fill() 메서드 사용 시 주의할 점은?
A9:
- 원본 배열이 직접 수정됩니다. 불변성을 유지하고자 하면 사용에 주의해야 합니다.
- 객체 참조가 복사되므로, 객체 내부 수정이 의도치 않게 영향을 줄 수 있습니다.
- start와 end가 음수일 경우 배열 끝에서부터 계산됩니다.

---

요약:
`Array.prototype.fill(value, start=0, end=array.length)`는 배열의 요소를 지정된 값으로 0개 이상 덮어쓰는 메서드로 원본 배열을 직접 수정합니다. 음수 인덱스도 지원하며, 객체는 참조가 복사된다는 점에 유의해야 합니다.

`Array.prototype.fill()` 메서드는 자바스크립트에서 배열의 모든 요소를 특정 값으로 채우는 데 사용됩니다.

이 메서드는 배열의 특정 범위에 대해 값을 설정할 수 있으며, 기본적으로 배열의 모든 요소를 채울 수 있습니다.

`fill()` 메서드는 원본 배열을 변경하며, 새로운 배열을 반환하지 않습니다.

사용법 `fill()` 메서드는 다음과 같은 구문을 가지고 있습니다: ```javascript array.fill(value, start, end) ``` - value : 배열의 각 요소를 채울 값입니다.

이 값은 배열의 모든 요소에 할당됩니다.

- start (선택적): 배열의 시작 인덱스입니다.

기본값은 `0`입니다.

- end (선택적): 배열의 끝 인덱스입니다.

이 인덱스는 포함되지 않습니다.

기본값은 배열의 길이입니다.

예제 1. 기본 사용법 ```javascript let arr = new Array(

5); arr.fill(0); console.log(arr); // [0, 0, 0, 0, 0] ``` 위의 예제에서 `new Array(

5)`는 길이가 5인 빈 배열을 생성합니다.

`fill(0)` 메서드를 호출하여 배열의 모든 요소를 `0`으로 채웁니다.



2. 부분적으로 채우기 ```javascript let arr = [1, 2, 3, 4, 5]; arr.fill(0, 1,

4); console.log(arr); // [1, 0, 0, 0, 5] ``` 이 예제에서는 배열의 인덱스 `1`부터 `4`까지의 요소를 `0`으로 채웁니다.

인덱스 `4`는 포함되지 않기 때문에 결과는 `[1, 0, 0, 0, 5]`가 됩니다.



3. 음수 인덱스 사용 음수 인덱스를 사용하여 배열의 끝에서부터 요소를 채울 수도 있습니다.

```javascript let arr = [1, 2, 3, 4, 5]; arr.fill(0, -

3); console.log(arr); // [1, 2, 0, 0, 0] ``` 이 경우 `-3`은 배열의 끝에서 세 번째 요소를 가리키며, 그 위치부터 배열의 끝까지 `0`으로 채워집니다.

주의사항 - `fill()` 메서드는 원본 배열을 변경합니다.

따라서 원본 배열을 유지하고 싶다면, 먼저 배열을 복사한 후 `fill()`을 호출해야 합니다.

- 객체나 배열과 같은 참조 타입을 `fill()` 메서드로 채울 경우, 모든 요소가 동일한 참조를 공유하게 됩니다.

즉, 하나의 요소를 변경하면 다른 요소에도 영향을 미칩니다.

```javascript let arr = new Array(

3).fill({}); arr[0].name = "Alice"; console.log(arr); // [{ name: "Alice" }, { name: "Alice" }, { name: "Alice" }] ``` 위의 예제에서 모든 요소가 동일한 객체를 참조하므로, 하나의 요소를 변경하면 모든 요소에 동일한 변화가 반영됩니다.

결론 `Array.prototype.fill()` 메서드는 배열을 간편하게 특정 값으로 채울 수 있는 유용한 도구입니다.

배열의 모든 요소를 채우거나 특정 범위의 요소를 채우는 데 사용할 수 있으며, 음수 인덱스를 통해 배열의 끝에서부터 채우는 것도 가능합니다.

그러나 원본 배열이 변경된다는 점과 참조 타입을 사용할 때의 주의사항을 염두에 두어야 합니다.