slice()와 splice()의 기본적인 차이
JavaScript에서 slice()와 splice()는 이름이 비슷해 초보자들이 자주 혼동하는 메서드입니다. 하지만 두 메서드는 원본 배열을 변경하느냐 마느냐, 그리고 무엇을 반환하느냐라는 결정적인 차이가 있습니다.
splice() — 호출된 원본 배열 자체를 변경(mutation)하며, 제거된 요소들을 새로운 배열 객체로 만들어 반환합니다.
slice() — 원본 배열을 전혀 변경하지 않고, 잘라낸 부분만으로 구성된 새로운 배열을 반환합니다.
예제 코드
// splice는 원본 배열을 변경합니다
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2)); // [3, 4, 5] 반환
// slice는 원본 배열을 변경하지 않습니다
let arr2 = [1, 2, 3, 4, 5];
console.log(arr2.slice(2)); // [3, 4, 5] 반환
console.log("배열 변경 후 상태 확인");
console.log(arr); // [1, 2]
console.log(arr2); // [1, 2, 3, 4, 5]실행 결과
[ 3, 4, 5 ] [ 3, 4, 5 ] 배열 변경 후 [ 1, 2 ] [ 1, 2, 3, 4, 5 ]
결과 분석
두 메서드 모두 인덱스 2부터 끝까지 잘라내어 화면에는 동일한 결과인 [3, 4, 5]가 출력됩니다. 하지만 실행 이후 배열의 상태는 완전히 다릅니다.
splice()를 호출한arr은 원본에서 요소가 실제로 제거되어[1, 2]만 남게 됩니다.slice()를 호출한arr2는 원본이 그대로 보존되어[1, 2, 3, 4, 5]를 유지합니다.
핵심 정리 및 활용 가이드
원본 데이터를 보존해야 하는 경우(예: 리액트의 불변성 관리, 함수형 프로그래밍)에는 반드시 slice()를 사용해야 합니다. 반면, 원본 배열에서 실제로 요소를 추가·제거·교체해야 할 때는 splice()가 적합합니다. 또한 splice(start, deleteCount, item1, ...)처럼 두 번째 인수부터 삭제 개수와 삽입할 요소를 지정할 수 있다는 점도 기억해 두면 유용합니다.