[JavaScript] 자바스크립트 Slice()와 Splice()의 차이점

자바스크립트에서 slice와 splice는 둘 다 배열에서 요소를 추출하거나 배열을 변경하는 데 사용된다. 하지만 두 함수는 목적이나 사용법에 따라 다르게 사용할 수 있다.

---

 

Slice()

배열의 일부분을 추출하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

 

기본 문법은 아래와 같다.

array.slice(start, end)

 

1. start (필수)

- 추출을 시작할 인덱스 번호

- 이 시작 인덱스를 포함한 뒤 추출이 시작됨

- 음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산

- 만약 생략되면 start 값은 0으로 간주됨

 

2. end (선택)

- 추출을 종료할 인덱스 번호

- 이 종료 인덱스는 추출에 포함되지 않으며, 추출은 end 번호 바로 앞의 인덱스까지 수행함

- 음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산

- 만약 end가 생략되면 배열의 끝까지 추출함

 

 

 

예시 코드1

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const slicedFruits = fruits.slice(1, 4);

console.log(slicedFruits); // 출력 결과 : ['banana', 'cherry', 'date']
console.log(fruits); // 출력 결과 : ['apple', 'banana', 'cherry', 'date', 'elderberry']

 

예시 코드2

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


let newArr1 = array.slice(3, 5);			// [4, 5]
let newArr2 = array.slice(undefined, 5);		// [1, 2, 3, 4, 5]
let newArr3 = array.slice(-3);				// [8, 9, 10]
let newArr4 = array.slice(-3, 9);			// [8, 9]
let newArr5 = array.slice(10);				// []
let newArr6 = array.slice(4);				// [5, 6, 7, 8, 9, 10]
let newArr7 = array.slice(undefined);			// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let newArr8 = array.slice(5, -4);			// [6]
let newArr9 = array.slice(2, 15);			// [3, 4, 5, 6, 7, 8, 9, 10]

/* 원본 배열은 변경되지 않음 */
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

이 처럼 slice()는 원본 배열에서 지정된 범위의 요소를 추출하여 새로운 배열로 반환한다.

 

---

 

Splice()

배열에서 요소를 추가, 제거 또는 교체하는 작업을 수행한다. 이때 원본 배열이 수정된다. splice()는 제거된 요소를 포함할 수 있고, 새로 삽입된 요소들 또한 포함할 수 있다.(이 말이 무슨 말이냐면 아래 예시코드 참고)

 

기본 문법은 아래와 같다.

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

 

1. start (필수)

- 변경을 시작할 인덱스 번호

- 이 시작 인덱스부터 요소가 제거되거나 새로운 요소가 삽입됨

 

2. deleteCount (선택)

- 제거할 요소의 개수

- 생략하면 start 인덱스부터 배열의 끝까지 모든 요소가 제거됨

 

3. item1, itme2, ... (선택)

- 배열에 삽입될 요소

- start 인덱스 이후부터 삽입됨

- 생략하면 삽입되지 않음

- item1, item2, item3... 1번, 2번, 3번 순서대로 배열에 추가됨

 

 

예시 코드1

splice()는 제거된 요소를 포함할 수 있고, 새로 삽입된 요소들 또한 포함할 수 있다.

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

// 인덱스 2번 부터 2개의 요소(cherry, date)를 제거하고, 'grape', 'kiwi'를 삽입
const removedElements = fruits.splice(2, 2, 'grape', 'kiwi');

console.log(fruits); // 원본 배열 : ['apple', 'banana', 'grape', 'kiwi', 'elderberry']
console.log(removedElements); // 삭제된 요소 배열 : ['cherry', 'date']

위 코드에서 splice(2, 2, 'grape', 'kiwi')는 fruits 배열에서 인덱스 2부터 2개의 요소를 제거하고, 그 제거한 자리에 'grape'과 'kiwi'를 삽입한다. 그 결과로 변경된 fruits 배열은 ['apple', 'banana', 'grape', 'kiwi', 'elderberry']가 된다. 제거된 요소들인 'cherry'와 'date'는 removedElements 변수에 배열로 반환된다.

splice()는 원본 배열을 변경하기 때문에 원본 배열(fruits)은 'cherry'와 'date'가 삭제된 상태로 업데이트 된다.

 

 

예시코드2

const fruits = ['apple', 'banana', 'cherry'];

fruits.splice(1, 0, 'orange', 'grape');
console.log(fruits); // 원본 배열 : ['apple', 'orange', 'grape', 'banana', 'cherry']

위 코드에서 splice(1, 0, 'orange', 'grape')는 fruits 배열의 인덱스 1번 위치에 'orange'와 'grape'를 추가한다. 따라서 'orange'와 'grape'가 fruits 배열에 삽입되고, 원본 배열의 길이가 변경된다. 그리고 deleteCount가 0이므로 삭제는 하지 않는다.

 

 

예시코드3

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];



let newArr1 = array.splice(-6, 4);		// 원본 : [1, 2, 3, 4, 5, 6, 11, 12]
console.log(newArr1);  				// 삭제 요소 : [7, 8, 9, 10]

음수로 시작하면 뒤에서 6번째부터 수정을 시작한다.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
let newArr1 = array.splice(-13, 1);		// 원본 : [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
 console.log(newArr1);  			// 삭제 요소 : [1]

뒤에서 부터 13자리로 시작해야하는데 배열의 길이보다 start의 절대값이 큰 경우, start의 값은 0으로 시작한다. 0번 부터 1개를 삭제하므로 1인 요소만 삭제된다.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
let newArr1 = array.splice(3);			// 원본 : [1, 2, 3]
console.log(newArr1);  				// 삭제 요소 : [4, 5, 6, 7, 8, 9, 10, 11, 12]
 

/* [4, 5, 6, 7, 8, 9, 10, 11, 12]를 가지는 배열에서 다시 splice 진행 */
let newArr2 = newArr1.splice(6, 4);		// 원본2 : [4, 5, 6, 7, 8, 9]
console.log(newArr2);  				// 삭제 요소 :[10, 11, 12]

deleteCount가 생략되거나, deleteCount가 array.length(원본 배열 길이) - start 의 값보다 큰 경우, 지정한 start 인덱스부터 끝까지 모두 제거된다.

위 코드에서는 9(원본 배열 길이) - 6(start 값) = 3 과 deleteCount 값 4를 비교했을 때 deleteCount 값이 더 크므로 6번 요소부터 끝까지 제거한다. 즉, newArr2는 [4, 5, 6, 7, 8, 9, 10, 11, 12]의 배열에서 6번째인 10 요소 부터 마지막 12 요소까지 삭제한다.

 

---

이렇게 slice()와 splicce()는 배열을 다룰 때 유용하게 사용되며, 각각 다른 동작과 목적을 가지고 있다. 요약하자면, slice()는 원본 배열을 변경하지 않고 일부 요소를 추출하여 새로운 배열을 반환한다. splice()는 원본 배열을 수정하여 요소를 추가하거나 삭제한다.

 

 

 

 

• Reference : https://im-developer.tistory.com/103