[JavaScript] splice와 slice 비교하기

1. Array.prototype.splice()

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

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가해 배열의 내용을 변경한다.

1) start : 배열의 변경을 시작할 인덱스

• 배열의 길이보다 클 경우 배열의 길이에서부터 시작된다.
• 음수일 경우 배열의 끝에서부터 요소를 센다.
• 절대값이 배열의 길이보다 큰 경우 0으로 세팅한다.

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

• 이 부분을 생략하거나 값이 array.length - start보다 큰 경우 start부터 모든 요소를 제거한다.
• 이 부분이 0 이하라면 어떤 요소도 제거하지 않는다.

3) start : 배열의 변경을 시작할 인덱스

• 배열의 길이보다 클 경우 배열의 길이에서부터 시작된다.
• 음수일 경우 배열의 끝에서부터 요소를 센다.
• 절대값이 배열의 길이보다 큰 경우 0으로 세팅한다.

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

• 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

5) 반환값

• 제거한 요소를 담은 배열로, 아무 것도 제거하지 않았으면 빈 배열을 반환한다.

✏️ 예시

• 하나도 제거하지 않고 2번 인덱스에 "cookie" 추가

let bag = ['candy', 'milk', 'jelly']
let addBag = bag.splice(2, 0, 'cookie')
console.log(bag) // ['candy', 'milk', 'cookie', 'jelly']

• 3번 인덱스에서 한 개 요소 제거

let bag = ['candy', 'milk', 'cookie', 'jelly']
let minusBag = bag.splice(3, 1)
console.log(bag) // ['candy', 'milk', 'cookie']

• 2번 인덱스에서 한 개 요소 제거하고 "chocolate" 추가

let bag = ['candy', 'milk', 'cookie', 'jelly']
let changeBag = bag.splice(2, 1, 'chocolate')
console.log(bag) // ['candy', 'milk', 'chocolate', 'jelly']

• -2번 인덱스에서 한 개 요소 제거

let bag = ['candy', 'milk', 'cookie', 'jelly']
let minusBag = bag.splice(-2, 1)
console.log(bag) // ['candy', 'milk', 'jelly']

• 1번 인덱스를 포함해 이후 모든 요소 제거

let bag = ['candy', 'milk', 'cookie', 'jelly']
let minusBag = bag.splice(1)
console.log(bag) // ['candy', 'milk']

2. Array.prototype.slice()

arr.slice([begin[, end]])

어떤 배열의 begin부터 end까지 (end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. splice와 달리 원본 배열은 바뀌지 않는다.

1) begin : 0으로 시작하는 추출 시작점에 대한 인덱스

• 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.
• 이 부분이 undefined일 경우 0번 인덱스부터 slice한다.
• 이 부분이 배열의 길이보다 클 경우 빈 배열을 반환한다.

2) end : 추출을 종료할 기준 인덱스

• end를 제외하고 추출한다.
• 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.
• 이 부분이 생략되면 배열의 끝까지 추출한다.

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

✏️ 예시

• 기존 배열의 일부 반환

let desserts = ['candy', 'milk', 'jelly', 'caramel']
let chewing = desserts.slice(2)
console.log(chewing) // ['jelly', 'caramel']