[JavaScript]배열의 slice와 splice 메서드의 차이점

배열의 slice와 splice 메서드의 차이점

JavaScript의 slice() 메서드와 splice() 메서드는 배열을 자르거나 배열의 요소를 제거하는 목적으로 사용됩니다.

 

두 메서드는 이름과 사용 목적이 비슷하므로 동일한 역할을 수행하는 것처럼 보이지만, 몇 가지 차이점이 존재합니다.

 

이번 포스팅은 slice() 메서드와 splice() 메서드 사용 방법과 차이점을 소개합니다.

---

slice 메서드

JavaScript의 Array에서 제공하는 slice() 메서드는 이름 그대로 무언가를 자르는 것을 의미합니다. 시작 위치부터 마지막 위치까지 배열의 요소를 자를 수 있으며, 원래 배열을 변경하지 않고 새로운 배열을 반환합니다.

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

slice() 메서드는 두 개의 매개변수를 가지며, 해당 매개변수는 생략할 수 있습니다.

 

begin

- 배열을 자르는 것을 시작하는 위치입니다. 

- 생략한 경우 0번째 인덱스부터 시작합니다.

- 음수(-n)인 경우 (배열의 길이 - n)번째 인덱스부터 시작합니다.

- 시작 위치(begin)가 배열의 길이를 초과하면, 빈 배열을 반환합니다.

 

end

- 배열을 자르는 것을 종료하는 위치입니다.

- 생략한 경우 시작 위치(begin)부터 배열의 마지막 인덱스까지 자릅니다.

- 음수(-n)인 경우 (배열의 길이 - n)번째 인덱스까지 자릅니다.

- 마지막 위치(end)가 배열의 길이를 초과하면, 배열의 마지막 인덱스까지 자릅니다.

 

다음 예제는 숫자 타입의 배열에서 slice() 메서드를 호출하는 다양한 방법입니다.

const numArray = [0, 5, 10, 15, 20];

// 매개변수를 생략
console.log(numArray.slice()); // [0, 5, 10, 15, 20]

// 두 번째 매개변수를 생략
console.log(numArray.slice(2)); // [10, 15, 20]

// 첫 번쨰 매개변수가 -2인 경우
console.log(numArray.slice(-2)); // [15, 20]

// 첫 번쨰 매개변수가 -2인 경우 아래와 동일합니다.
console.log(numArray.slice(numArray.length - 2)); // [15, 20]

// 첫 번쨰 매개변수가 1, 두 번째 매개변수가 3인 경우
console.log(numArray.slice(1, 3)); // [5, 10]

// 첫 번째 매개변수가 두 번째 매개변수보다 큰 경우
console.log(numArray.slice(3, 1)); // []

// 첫 번째 매개변수가 1, 두 번째 매개변수가 -1인 경우
console.log(numArray.slice(1, -1)); // [5, 10, 15]

// 첫 번째 매개변수가 1, 두 번째 매개변수가 -1인 경우 아래와 동일합니다.
console.log(numArray.slice(1, numArray.length - 1)); // [5, 10, 15]

---

splice 메서드

JavaScript의 Array에서 제공하는 splice() 메서드는 이름 그대로 무언가를 접착하는 것을 의미합니다. 배열의 요소를 추가 및 변경하거나 삭제할 수 있으며, 새로운 배열을 생성하지 않고 splice() 메서드를 호출한 배열을 변경합니다.

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

splice() 메서드는 n개의 매개변수를 가지며, 첫 번째 매개변수는 생략할 수 없습니다.

 

start

- 배열의 요소를 추가 및 변경 또는 삭제를 시작하는 위치입니다.

- 음수(-n)인 경우 (배열의 길이 - n)번째 인덱스부터 시작합니다.

- 값이 배열의 길이보다 큰 경우 0으로 설정됩니다.

 

deleteCount

- 배열에서 제거할 요소의 개수입니다.

- 생략하거나 배열의 길이(array.length) - 시작 위치(start)보다 큰 경우 시작 위치(start)부터 모든 요소를 제거합니다.

- 0 이하인 경우 어떠한 요소도 제거하지 않습니다.

 

item1, item2, ..., itemN

- 배열에 추가할 요소입니다.

- 생략한 경우 splice() 메서드는 시작 위치(start)부터 특정 개수(deleteCount)만큼 배열의 요소를 제거합니다.

 

다음 예제는 숫자 타입의 배열에서 splice() 메서드를 호출하는 다양한 방법입니다.

 

예제 1. 첫 번째 매개변수가 2인 경우

const numArray = [0, 5, 10, 15, 20];

numArray.splice(2);

// 2번째 인덱스부터 시작하는 모든 요소가 제거됩니다.
console.log(numArray); // [0, 5]

 

예제 2. 첫 번째 매개변수가 -2인 경우

const numArray = [0, 5, 10, 15, 20];

numArray.splice(-2);

// 배열의 길이(5) - 2번째 인덱스부터 시작하는 모든 요소가 제거됩니다.
// 즉, 3번째 인덱스부터 시작하는 모든 요소가 제거됩니다.
console.log(numArray); // [0, 5, 10]

 

예제 3. 첫 번째 매개변수가 1, 두 번째 매개변수가 0인 경우

const numArray = [0, 5, 10, 15, 20];

numArray.splice(1, 0);

// 0개의 요소를 제거하므로 어떠한 요소도 제거하지 않습니다.
console.log(numArray); // [0, 5, 10, 15, 20]

 

예제 4. 마지막 위치부터 25, 30, 35를 추가

const numArray = [0, 5, 10, 15, 20];

numArray.splice(numArray.length, 0, 25, 30, 35);

// 배열의 마지막 위치부터 25, 30, 35이 추가됩니다.
console.log(numArray); // [0, 5, 10, 15, 20, 25, 30, 35]

 

예제 5. 2번째 인덱스의 값을 100으로 변경

const numArray = [0, 5, 10, 15, 20];

numArray.splice(2, 1, 100);

// 2번쨰 위치부터 1개의 요소를 제거 후 100을 추가합니다.
console.log(numArray); // [0, 5, 100, 15, 20]

---

정리

slice() 메서드

- 원본 배열을 변경하지 않습니다.

- 배열을 자르는 목적으로 사용합니다.

- 두 개의 매개변수를 가지고 있습니다.

 

splice() 메서드

- 원본 배열을 변경합니다.

- 배열의 요소를 추가, 변경, 삭제하는 목적으로 사용합니다.

- N개의 매개변수를 가집니다.