[JavaScript] splice()와 slice()란? 메서드의 차이점?

splice()와 slice() 메서드는 이름이 비슷해서 매일 헷갈리는 메서드 중 하나여서 글로 정리해보고자 한다.
우선 어떻게 사용하는지 알아보자.

---

1️⃣ splice()

사용 방법: arr.splice(start, deleteCount, items);
- start: 배열의 변경을 시작할 index, 음수인 경우 배열 끝에서 시작한다.
- deleteCount[option]: 배열 요소를 삭제할 갯수, 0이나 값을 작성하지 않은 경우 요소를 삭제하지 않으며, 값이 arr.length - start 보다 많은 경우 start부터 모든 요소를 제거한다.
- items[option]: 배열에 추가할 요소, 값을 작성하지 않은 경우 배열의 요소를 삭제하기만 한다.

우선 splice()의 매개변수에 start만 작성한 예시이다.

// 1. start값이 양수인 경우
const arr1 = ['가', '나', '다', '라', '마'];
const deleteArr1 = arr1.splice(2);

console.log(arr1); // ['가', '나']
console.log(deleteArr1); // ['다', '라', '마']

// 2. start값이 음수인 경우
const arr2 = ['가', '나', '다', '라', '마'];
const deleteArr2 = arr2.splice(-2);

console.log(arr2); // ['가', '나', '다']
console.log(deleteArr2); // ['라', '마']

start값이 양수인 경우 index값을 0부터 세고, 반대로 음수인 경우 index값을 -1부터 센다.

아래 예시는 매개변수에 start와 deleteCount를 작성한 예시이다.

// 1. deleteCount 값이 arr.length - start 값보다 적은 경우
const arr1 = ['가', '나', '다', '라', '마'];
const deleteArr1 = arr1.splice(0, 2);

console.log(arr1); // ['다', '라', '마']
console.log(deleteArr1); // ['가', '나']

// 2. deleteCount 값이 arr.length - start 값보다 많은 경우
const arr2 = ['가', '나', '다', '라', '마'];
const deleteArr2 = arr2.splice(1, 5);

console.log(arr2); // ['가']
console.log(deleteArr2); // ['나', '다', '라', '마']

deleteCount 값이 arr.length - start 값보다 적은 경우 deleteCount의 크기만큼 배열 요소를 삭제하는데,
deleteCount 값이 arr.length - start 값보다 많은 경우 start부터 모든 요소를 삭제한다.
📍 deleteCount값을 2로 작성하면 2는 미포함이며 index값이 1까지인 배열 요소가 삭제된다.

마지막 예시는 매개변수에 start, deleteCount 그리고 items를 작성한 예시이다.

const arr = ['가', '나', '다', '라', '마'];
const addArr = arr.splice(0, 2, '바', '사');

console.log(arr); // ['바', '사', '다', '라', '마']
console.log(addArr); // ['가', '나']

배열 index값이 0부터 2(2는 미포함)까지인 요소는 삭제되며 그 자리에 items인 '바'와 '사'를 배열 요소로 추가했다.

---

2️⃣ slice()

사용 방법: arr.slice(start, end);
- start[option]: 배열 요소의 추출 시작점에 대한 index, 0부터 시작하며, 음수인 경우 배열 끝에서부터 시작한다.
- end[option]: 배열 요소의 추출 종료점에 대한 index, end index를 제외하고 추출한다. (아래 예시 참고)

const arr = ['가', '나', '다', '라', '마'];

console.log(arr.slice()); // ['가', '나', '다', '라', '마']
console.log(arr.slice(2)); // ['다', '라', '마']
console.log(arr.slice(-1)); // ['마']
console.log(arr.slice(1, 3)); // ['나', '다']
console.log(arr.slice(-2, 5)); // ['라', '마']

console.log(arr); // ['가', '나', '다', '라', '마']

start값과 end값을 작성하지 않을 순 있지만 배열의 변화가 없어 무의미하다.
start값을 1로 초기화하고 end값을 3으로 작성하면 배열 요소 index가 3인 요소는 포함되지 않는다.그리하여 ['나', '다']만 추출된 것이다.

---

💡 splice()와 slice()의 차이점

- splice()는 원본 배열이 변경되고, slice()는 원본 배열이 변경되지 않는 것이다.

// 1. splice() : 원본 배열이 변경된다.
const arr1 = ['가', '나', '다', '라', '마'];
const deleteArr = arr1.splice(1, 2);

console.log(arr1); // ['가', '라', '마']
console.log(deleteArr); // ['나', '다']

// 2. slice() : 원본 배열이 변경되지 않는다.
const arr2 = ['가', '나', '다', '라', '마'];
const extractionArr = arr2.slice(1, 2);

console.log(arr2); // ['가', '나', '다', '라', '마']
console.log(extractionArr); // ['나']