[JavaScript] 배열 - slice() vs splice()

JS에서 slice와 splice 둘 다 배열에서 요소를 추출하거나 배열을 변경하는 데 사용된다. 하지만 두 함수는 목적이나 사용법에 따라 다르게 사용할 수 있다.

[1] Array​.prototype​.slice()

slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열로 반환한다. 즉, 원본 배열은 변경되지 않는다.

array.slice(start[, end])

start: 추출을 시작할 인덱스 번호

• 시작 인덱스를 포함한 뒤 추출이 시작된다.
• undefined인 경우: 0부터 slice
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
• 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다.

end: 추출을 종료할 기준 인덱스 번호

• end는 추출에 포함되지 않으며, 추출은 end를 제외하고 그 전까지의 요소만 추출한다.
• 지정하지 않을 경우: 배열의 끝까지 slice
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출한다.
• 배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출한다.

반환값: 추출한 요소를 포함한 새로운 배열

예시

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let arr1 = arr.slice(3, 5); // [4, 5]
let arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5]
let arr3 = arr.slice(-3); // [8, 9, 10]
let arr4 = arr.slice(-3, 9); // [8, 9]
let arr5 = arr.slice(10); // []
let arr6 = arr.slice(4); // [5, 6, 7, 8, 9, 10]
let arr7 = arr.slice(undefined); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr8 = arr.slice(5, -4); // [6]
let arr9 = arr.slice(2, 15); // [3, 4, 5, 6, 7, 8, 9, 10]

1. arr1 : index번호 3부터 4까지 추출
2. arr2 : index번호 0부터 4까지 추출
3. arr3 : 뒤에서 3개 추출
4. arr4 : 뒤에서부터 3번째 숫자인 8부터 추출하기 시작해서 앞에서부터 9번째 숫자(10) 전까지 추출하므로 숫자 8과 9 추출
5. arr5 : 배열의 길이가 10이므로 index번호 10부터 추출하면 추출할 요소가 없으므로 빈 배열을 리턴
6. arr6 : index번호 4부터 끝까지 추출
7. arr7 : 처음부터 끝까지 추출
8. arr8 : index번호 5번인 6부터 추출 시작하여 끝에서부터 -4번째인 7 전까지 추출하므로 숫자 6을 추출
9. arr9 : index번호 2번부터 끝까지 추출

---

[2] Array​.prototype​.splice()

splice() 메소드는 배열에서 요소를 추가, 삭제 또는 교체하는 작업을 수행한다. 이 메소드는 원본 배열 자체를 수정한다. 

splice(start[, deleteCount[, item1[, item2[, ...]]]])

start: 배열의 변경을 시작할 인덱스 번호

• 이 시작 인덱스부터 요소가 제거되거나 새로운 요소가 삽입된다.
• 음수를 지정한 경우: 배열의 끝에서부터 요소를 센다.
• 배열의 길이보다 큰 수를 지정한 경우: 실제 시작 인덱스는 배열의 길이로 설정
• 절대값이 배열의 길이보다 큰 경우: 0으로 세팅

deleteCount: 배열에서 제거할 요소의 수

• 생략 또는 값이 array.length - start보다 큰 경우: start부터의 모든 요소가 제거된다.
• 0 이하의 수를 지정: 어떤 요소도 제거되지 않는다.

item1, item2, ... : 배열에 추가할 요소

• start 인덱스 이후부터 삽입된다.
• item1, item2, ... 순서대로 배열에 추가된다.
• 지정하지 않는 경우: splice()는 요소 제거만 수행한다.

반환값: 제거한 요소를 담은 배열

• 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

예시

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 

let arr1 = arr.splice(10, 2, 'a', 'b', 'c'); 

console.log(arr);   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1);  // [11, 12]

splice() 함수를 사용하면 원본 배열인 arr이 변경된다.
10번째 인덱스부터 2개의 요소를 삭제하고 'a', 'b', 'c'를 추가했으므로
11과 12가 삭제되고 이 삭제된 요소들의 배열은 arr1 변수에 담긴다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 

let arr1 = arr.splice(-6, 4); 

console.log(arr);   // [1, 2, 3, 4, 5, 6, 11, 12]
console.log(arr1);  // [7, 8, 9, 10]

-6을 넣으면 뒤에서부터 6번째인 7부터 시작하여 4개의 요소를 삭제한다. 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 

let arr1 = arr.splice(-13, 1); 

console.log(arr);   // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr1);  // [1]

-13의 절대값이 배열의 길이보다 큰 경우에는 start의 값은 0으로 세팅한다.
0번째 요소부터 1개의 요소를 삭제하므로 숫자 1이 삭제된다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(3); 

console.log(arr);   // [1, 2, 3]
console.log(arr1);  // [4, 5, 6, 7, 8, 9, 10, 11, 12] 

let arr2 = arr1.splice(6, 4); 

console.log(arr1);  // [4, 5, 6, 7, 8, 9]
console.log(arr2);  // [10, 11, 12]

deleteCount가 생략되거나 array.length - start의 값보다 큰 경우
지정한 start 인덱스부터 끝까지 모두 제거한다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

let arr1 = arr.splice(5, 0, 'add'); 

console.log(arr);   // [1, 2, 3, 4, 5, "add", 6, 7, 8, 9, 10, 11, 12]
console.log(arr1);  // []

deleteCount가 0이거나 0보다 작은 수이면 어떤 요소도 삭제되지 않는다.
그러므로 arr1은 빈배열을 반환한다.

---

요약

slice()는 원본 배열을 변경하지 않고 일부 요소를 추출하여 새로운 배열을 반환한다.
splice()는 원본 배열을 수정하여 요소를 추가, 삭제 또는 교체한다.