slice와 splice는 둘 다 배열의 메서드지만, 각기 다른 용도와 동작 방식을 가지고 있다.
아래의 예시로 두 메서드의 차이점을 명확하게 알고가자!
slice
배열의 일부분을 추출하여 새로운 배열을 반환하는 데 사용되며 원본 배열은 변경되지 않는다.
array.slice(startIndex, endIndex)
startIndex: 추출을 시작한 일덱스
endIndex: 추출을 종료할 인덱스
반환 값: 새 배열(원본 배열은 변경되지 않음)
[예시]
const fruits = ['apple', 'banana', 'cherry', 'date'];
const citrus = fruits.slice(1, 3); // ['banana', 'cherry']
console.log(citrus); // ['banana', 'cherry']
console.log(fruits); // ['apple', 'banana', 'cherry', 'date'] (원본 배열은 그대로)
위 예시를 보면 fruits라는 배열에 slice 메서드를 이용하여
citrus라는 배열을 새롭게 생성해주었다.
console로 찍어보면 원본 배열은 그대로이고 citrus는
1번째 요소에서 시작하여 3번째 이전까지의 요소를 추출하여 담아주었다.
splice
배열의 요소를 추가하거나 제거하는 데 사용되며 원본 배열이 변경된다.
array.splice(startIndex, deleteCount, item1, item2, ...)
startIndex: 변경을 시작할 인덱스
endIndex: 제거할 요소의 수
item: 배열에 추가할 요소(선택사항)
반환 값: 제거된 요소들로 이루어진 배열(제거된 요소가 없다면 빈 배열)
[예시]
const fruits = ['apple', 'banana', 'cherry', 'date'];
const removed = fruits.splice(1, 2); // ['banana', 'cherry'] 제거
console.log(removed); // ['banana', 'cherry']
console.log(fruits); // ['apple', 'date'] (원본 배열이 변경됨)
위 예시를 보면 fruits라는 배열에 splice 메서드를 이용하여
removed라는 배열을 새롭게 생성해주었다.
console로 찍어보면 removed는 1번째 인덱스부터 2개의 제거된 요소가 담겼고,
fruits(원본배열)는 제거되지 않은 요소만 남게되었다.
정리하자면, slice는 원본 배열은 건드리지 않고 지정한 범위의 요소를 포함하는
새로운 배열을 반환하는데 사용이 된다.
splice는 원본 배열을 변경하며, 지정한 인덱스에서 요소를 추가하거나 제거할 수 있다.
제거된 요소를 배열로 반환할 수도 있다.
