요약
둘 다 배열 메소드이지만 용도가 다름.
- 복사/추출용 → slice (배열 일부 또는 전체, 원본 보존)
- 수정/삽입/삭제용 → splice (원본 변경)
✅ slice()
- 역할: 배열의 일부분을 잘라서 새 배열로 반환
- 원본 배열 변경: ❌ 변경하지 않음
- 문법:
array.slice(start, end)
- `start`: 시작 인덱스 (포함)
- `end`: 끝 인덱스 (미포함)
const fruits = ["apple", "banana", "cherry", "date"];
const result = fruits.slice(1, 3);
console.log(result); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"]
✅ splice()
- 역할: 배열에서 요소를 추가, 삭제 또는 교체
- 원본 배열 변경: ✅ 변경함
- 문법:
array.splice(start, deleteCount, item1, item2, ...)
- `start`: 조작을 시작할 인덱스
- `deleteCount`: 삭제할 요소 개수
- item1, item2, ...: 추가할 요소들 (옵션)
splice - 추가
const arr = [1, 2, 5];
arr.splice(2, 0, 3, 4);
console.log(arr); // [1, 2, 3, 4, 5]
splice - 삭제
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2);
console.log(removed); // [3, 4]
console.log(arr); // [1, 2, 5]
splice - 수정
const arr = [1, 2, 99, 4, 5];
arr.splice(2, 1, 3);
console.log(arr); // [1, 2, 3, 4, 5]'JS' 카테고리의 다른 글
| 변경된 카카오맵 API 플랫폼 도메인 등록 위치 (0) | 2026.02.11 |
|---|---|
| this를 명시적으로 설정하는 2가지 함수, .call()과 .bind()의 차이 + .apply() (0) | 2025.11.14 |
| 클로저의 원리가 적용된 React Hooks (0) | 2025.05.13 |
| 함수 파라미터를 중괄호로 감싸서 받을 때와 그냥 받을 때의 차이 (0) | 2025.05.10 |
| 자주 사용되는 JavaScript Web API들 (0) | 2025.05.10 |