[JS] 자바스크립트 slice()와 splice()의 차이점

 

공부 목적

알고리즘 공부를 하다가 배열 문제에서 slice와 splice를 자주 사용했습니다. 자주 사용하는 만큼 개념을 정리하면 좋을 것 같아 정리했습니다.

 

---

Array.prototype.slice()

기본 문법

slice() 메소드는 배열의 일부분을 추출하여 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.

 

사용법은 다음과 같습니다.

array.slice(start, end)

 

start: 추출을 시작할 인덱스 번호

- 추출할 때 이 시작 인덱스가 포함됩니다.

- 음수 값을 넣으면 배열의 끝에서부터 역방향으로 계산합니다.

- 생략 시 start 값은 0으로 간주합니다.

 

end: 추출을 종료할 인덱스 번호

- 추출할 때 이 종료 인덱스는 포함되지 않습니다. end 번호 앞까지 추출합니다.

- 음수 값을 넣으면 start와 동일하게 배열의 끝에서부터 역방향으로 계산합니다.

- 생략 시 배열의 끝까지 추출합니다.

반환값: 추출한 요소를 포함한 새로운 배열

 

예시 코드 1

let fruits = ["apple", "banana", "kiwi", "lemon", "orange", "mango"];
let slicedFruits = fruits.slice(1, 4); // [ 'banana', 'kiwi', 'lemon' ]

 

예시 코드 2

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr1 = arr.slice(0, 8);
// [0, 1, 2, 3, 4, 5, 6, 7];

let newArr2 = arr.slice(3);
// [3, 4, 5, 6, 7, 8, 9, 10];

let newArr3 = arr.slice(9, 11);
// [9, 10];

let newArr4 = arr.slice(-9, -4);
// [ 2, 3, 4, 5, 6 ]

let newArr5 = arr.slice(-8);
// [3, 4, 5, 6, 7, 8, 9, 10];

---

Array.prototype.splice()

기본 문법

splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 이 메소드는 원본 배열 자체를 수정합니다. 반환값은 제거한 요소를 담은 배열입니다. 만약 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

 

사용법은 다음과 같습니다.

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

 

start: 변경을 시작할 인덱스 번호

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

- 음수를 지정한 경우 배열의 끝에서부터 요소를 셉니다.

- 배열의 길이보다 큰 수를 지정한 경우, 실제 시작 인덱스는 배열의 길이로 설정합니다.

- 절대값이 배열의 길이보다 큰 경우, 0으로 세팅합니다.

 

deleteCount: 제거할 요소의 개수

- 생략하거나 / 값이 array.length - start보다 큰 경우, start 인덱스부터 배열의 끝까지 모든 요소가 제거됩니다.

- 0 이하의 수를 지정할 경우, 어떤 요소도 제거되지 않습니다.

 

item1, item2, ...: 배열에 삽입될 요소

- start 인덱스 이후부터 삽입됩니다.

- 생략 시 삽입되지 않습니다. 지정하지 않는 경우 요소 제거만 수행합니다.

- item1, item2... 순서대로 배열에 추가됩니다.

 

예시 코드 1

let fruits = ["apple", "banana", "lemon", "orange", "mango"];
let removedFruits = fruits.splice(1, 2, "grape", "kiwi");
// 인덱스 1번부터 2개 요소(banana, lemon)를 제거하고, "grape", "kiwi" 추가
console.log(removedFruits); // [ 'banana', 'lemon' ]
console.log(fruits); // [ 'apple', 'grape', 'kiwi', 'orange', 'mango' ]

 

splice(1, 2, "grape", "kiwi")는 fruits 배열에서 인덱스 1번부터 2개의 요소를 제거합니다. 그 자리에 "grape"와 "kiwi"를 삽입합니다. 그 결과 변경된 fruits 배열은 [ 'apple', 'grape', 'kiwi', 'orange', 'mango' ]가 됩니다.

제거된 요소들인 [ 'banana', 'lemon' ]은 removedFruits 변수에 배열로 반환됩니다.

splice()는 원본 배열을 변경하기 때문에 원본 배열은 업데이트 됩니다.

 

예시 코드 2: 배열의 길이보다 start의 절대값이 큰 경우

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr1 = arr.splice(-13, 1); // start 0으로 세팅
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(newArr1); // [0]

 

배열의 길이보다 start의 절대값이 큰 경우, start의 값은 0으로 시작합니다. 0번 부터 1개를 삭제하므로 0 요소만 삭제됩니다.

 

예시 코드 3: deleteCount를 생략하거나, 그 값이 array.length - start보다 큰 경우

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

 

deleteCount가 생략되었을 경우 지정한 start 인덱스부터 끝까지 모두 제거됩니다.

 

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArr = array.splice(5, 6);
console.log(array); // [ 1, 2, 3, 4, 5 ]
console.log(newArr); // [ 6, 7, 8, 9, 10 ]

 

deleteCount가 array.length(원본 배열 길이) - start 의 값보다 큰 경우, 지정한 start 인덱스부터 끝까지 모두 제거됩니다. 위 코드에서는 10(원본 배열 길이) - 5(start 값) = 5와 deleteCount 값 6을 비교했을 때 deleteCount 값이 더 크므로 5번 요소부터 끝까지 제거합니다.

 

---

 

정리

slice()와 splice()는 배열을 다룰 때 유용하게 사용됩니다. slice()는 원본 배열을 변경하지 않고 일부 요소를 추출해 새로운 배열을 반환합니다. splice()는 원본 배열을 수정하여 요소를 추가하거나 삭제합니다.