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

Array.prototype.slice() 사용법 FAQ

Q1: Array.prototype.slice() 메서드는 무엇인가요?
A1: `slice()`는 배열의 일부를 추출하여 새로운 배열을 반환하는 메서드입니다. 원본 배열은 변경하지 않습니다.

---

Q2: 기본 문법은 어떻게 되나요?
A2:
```javascript
arr.slice([begin[, end]])
```
- `begin` (선택): 추출을 시작할 인덱스입니다. 기본값은 0입니다. 음수일 경우 배열 끝에서부터 계산합니다.
- `end` (선택): 추출을 끝낼 인덱스(포함 안 됨)입니다. 기본값은 배열 길이입니다. 음수일 경우 배열 끝에서부터 계산합니다.

---

Q3: 예시를 보여주세요.
```javascript
const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

const part = fruits.slice(1, 3);
console.log(part); // ['banana', 'cherry']

const fromIndex = fruits.slice(2);
console.log(fromIndex); // ['cherry', 'date', 'elderberry']

const negativeIndex = fruits.slice(-3, -1);
console.log(negativeIndex); // ['cherry', 'date']
```

---

Q4: 원본 배열은 변하나요?
A4: 아닙니다. `slice()`는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.

---

Q5: 음수 인덱스는 어떻게 작동하나요?
A5:
- 음수 `begin` 또는 `end` 값은 배열 끝에서부터의 오프셋을 뜻합니다.
- 예를 들어 `slice(-2)`는 배열 끝에서 두 번째 요소부터 끝까지 추출합니다.

---

Q6: `end` 인덱스가 `begin`보다 작으면 어떻게 되나요?
A6: 결과는 빈 배열이 반환됩니다.
```javascript
const arr = [1, 2, 3];
console.log(arr.slice(2, 1)); // []
```

---

Q7: 배열이 아닌 객체에서도 사용 가능한가요?
A7: 배열 유사 객체(array-like object)에도 사용 가능합니다. 다만 `this`가 `length` 프로퍼티와 인덱스 프로퍼티를 가진 객체여야 하며, `call` 또는 `apply`로 사용해야 합니다.

```javascript
const arrayLike = {0: 'a', 1: 'b', length: 2};
const arr = Array.prototype.slice.call(arrayLike);
console.log(arr); // ['a', 'b']
```

---

Q8: `slice()`와 `splice()`의 차이점은 무엇인가요?
A8:
- `slice()`는 배열을 잘라 새 배열을 반환하며 원본 배열을 변경하지 않습니다.
- `splice()`는 배열을 자르거나 삽입하며, 원본 배열을 직접 변경합니다.

---

Q9: 빈 인자를 넣으면 어떻게 되나요?
A9:
- `slice()`를 인자 없이 호출하면 배열 전체를 복사한 새 배열을 반환합니다.

```javascript
const newArr = [1, 2, 3].slice();
console.log(newArr); // [1, 2, 3]
```

---

Q10: 다차원 배열에서 `slice()`는 어떻게 작동하나요?
A10: 얕은 복사를 수행합니다. 즉, 1차원 배열만 복사하고 내부 요소가 배열인 경우 참조만 복사합니다.

```javascript
const nested = [[1], [2], [3]];
const copy = nested.slice();
copy[0][0] = 100;
console.log(nested[0][0]); // 100 (원본에 영향 있음)
```

---

이상으로 `Array.prototype.slice()`의 주요 사용법과 팁을 정리했습니다.

`Array.prototype.slice()` 메서드는 자바스크립트에서 배열의 일부를 선택하여 새로운 배열을 생성하는 데 사용됩니다.

이 메서드는 원본 배열을 변경하지 않으며, 선택된 요소의 복사본을 포함하는 새로운 배열을 반환합니다.

`slice()` 메서드는 다양한 상황에서 유용하게 사용될 수 있으며, 그 사용법을 자세히 살펴보겠습니다.

기본 문법 ```javascript array.slice(start, end); ``` - start : 선택할 요소의 시작 인덱스입니다.

이 인덱스는 포함됩니다.

기본값은 0입니다.

- end : 선택할 요소의 끝 인덱스입니다.

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

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

사용 예제 1. 기본 사용법 ```javascript const fruits = ['apple', 'banana', 'cherry', 'date']; const citrus = fruits.slice(1,

3); console.log(citrus); // ['banana', 'cherry'] ``` 위의 예제에서 `slice(1,

3)`는 인덱스 1부터 2까지의 요소를 선택하여 새로운 배열을 생성합니다.

인덱스 3의 요소는 포함되지 않습니다.



2. 음수 인덱스 사용 `slice()` 메서드는 음수 인덱스를 지원합니다.

음수 인덱스는 배열의 끝에서부터 요소를 선택합니다.

```javascript const numbers = [1, 2, 3, 4, 5]; const lastTwo = numbers.slice(-

2); console.log(lastTwo); // [4, 5] ``` 위의 예제에서 `slice(-

2)`는 배열의 마지막 두 요소를 선택합니다.



3. 원본 배열에 영향 없음 `slice()` 메서드는 원본 배열을 변경하지 않습니다.

```javascript const original = [1, 2, 3, 4, 5]; const copy = original.slice(0); console.log(copy); // [1, 2, 3, 4, 5] console.log(original); // [1, 2, 3, 4, 5] ``` 위의 예제에서 `copy`는 `original` 배열의 복사본이지만, 원본 배열은 그대로 유지됩니다.



4. 전체 배열 복사 `slice()` 메서드에 인자를 주지 않으면 전체 배열을 복사합니다.

```javascript const arr = [1, 2, 3]; const arrCopy = arr.slice(); console.log(arrCopy); // [1, 2, 3] ```

5. 다차원 배열에서의 사용 `slice()` 메서드는 다차원 배열에서도 사용할 수 있습니다.

하지만 주의해야 할 점은 `slice()`가 얕은 복사를 수행한다는 것입니다.

즉, 배열의 요소가 객체일 경우, 객체의 참조가 복사됩니다.

```javascript const arr2D = [[1, 2], [3, 4]]; const shallowCopy = arr2D.slice(); shallowCopy[0][0] = 99; console.log(arr2D); // [[99, 2], [3, 4]] console.log(shallowCopy); // [[99, 2], [3, 4]] ``` 위의 예제에서 `shallowCopy`의 첫 번째 요소를 변경하면 `arr2D`도 영향을 받습니다.

결론 `Array.prototype.slice()` 메서드는 배열의 일부를 선택하여 새로운 배열을 생성하는 데 매우 유용한 도구입니다.

인덱스를 사용하여 원하는 요소를 선택할 수 있으며, 원본 배열을 변경하지 않고 새로운 배열을 반환하는 특성을 가지고 있습니다.

음수 인덱스를 사용하여 배열의 끝에서부터 요소를 선택할 수 있는 기능도 제공하므로, 다양한 상황에서 활용할 수 있습니다.

이러한 특성 덕분에 `slice()`는 자바스크립트에서 배열을 다룰 때 자주 사용되는 메서드 중 하나입니다.