JS | Splice / Slice 비교

splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. start는 배열의 변경을 시작할 인덱스, deleteCount는 제거할 요소의 수, item은 추가할 요소들이다. deleteCount를 생략하면 start 인덱스부터 모든 요소를 제거한다. item을 생략하면 splice는 제거만 수행한다.

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

let fruits = ['orange', 'strawberry', 'banana', 'apple'];
let removed = fruits.splice(2, 0, 'pineapple', 'mandarine');

// ['orange', 'strawberry', 'banana', 'pineapple', 'mandarine']

removed = friuts.splice(2);
//['orange', 'strawberry']

slice

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. 단, 중첩된 배열(depth2부터)은 얕은 복사로 참조된 객체가 변경되면 원본 배열과 복사된 배열이 모두 영향을 받는다.

begin은 잘라내어 반환할 배열의 시작 인덱스, end는 잘라내어 반환할 배열의 끝 기준점을 나타내는 인덱스이고 end는 포함하지 않는다. 즉, 반환되는 배열은 begin부터 end-1가 된다.

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

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus = ['Orange','Lemon]