[JavaScript] splice()와 slice() 메서드 정리

이번 글에서는 자바스크립트에서 배열을 변경할 수 있는 메서드들인 splice()와 slice()에 대해서 알려드리겠습니다. 

 

우선, splice() 메서드는 배열에 요소를 추가, 교체, 또는 기존의 요소를 삭제할 수 있게 합니다. 

메서드의 구문은 다음과 같습니다.

exArr.splice(startIndex)
exArr.splice(startIndex, deleteCount)
exArr.splice(startIndex, deleteCount, item0, item1, ..., itemN)

▶ startIndex (필수)

첫 번째 매개변수는 배열의 변경이 시작되는 위치를 지정합니다. 다른 선택적인 매개변수와는 달리 필수이기 때문에, 만약 생략된다면 배열은 그대로 유지됩니다. 

    - startIndex >= exArr.length일 경우, 삭제되는 요소 없이 요소의 추가만 가능합니다. 

    - startIndex가 음수일 경우, 배열에 접근하는 것과 동일하게 배열의 끝에서부터 순서를 시작합니다. (startIndex + exArr.length와 동일한 효과)

    - 음수인데 그 절댓값이 exArr.length보다 크다면 0이 적용됩니다. 

▶ deleteCount 

두 번째 매개변수는 startIndex로 지정된 위치부터 삭제하는 요소의 개수를 지정합니다. 만약 생략되거나, 삭제 가능한 요소의 개수보다 큰 수가 입력되면 startIndex 뒤에 있는 모든 요소를 삭제합니다. 만약 값이 0이거나 음수라면 요소가 삭제되지 않습니다. 

▶ item0, item1, ..., itemN

세 번째 매개변수 부터는 startIndex로 지정된 위치부터 추가하고자 하는 요소들입니다. 만약 지정되지 않았다면 추가되는 요소 없이 요소의 삭제만 가능합니다. 

 

다음은 splice() 메서드의 사용 예시입니다.

const months = ['Jan', 'March', 'April','Ex01', 'Ex02'];
months.splice(1, 0, 'Feb');
console.log(months);
// Array ["Jan", "Feb", "March", "April", "Ex01", "Ex02"]
months.splice(4, 2);
console.log(months);
// Array ["Jan", "Feb", "March", "April"]

 

---

slice() 메서드는 기존의 배열에서 선택한 부분을 얕은 복사하여 새로운 배열을 리턴합니다. 기존의 배열이 수정되는 splice() 메서드와 달리 slice() 메서드는 기존의 배열이 수정되지 않는 것이 특징입니다. 

메서드의 구문은 다음과 같습니다.

exArr.slice()
exArr.slice(startIndex)
exArr.slice(startIndex, endIndex)

▶ startIndex

첫 번째 매개변수는 추출을 시작하는 인덱스를 지정합니다. startIndex 이상의 요소들을 지정하는 것으로, startIndex 위치에 있는 요소도 포함됩니다. 

    - startIndex >= exArr.length일 경우, 추출되는 요소는 없습니다.

    - startIndex가 음수일 경우, 배열에 접근하는 것과 동일하게 배열의 끝에서부터 순서를 시작합니다. (startIndex + exArr.length와 동일한 효과)

    - 음수인데 그 절댓값이  exArr.length보다 크거나 startIndex 값이 생략된 경우에는 0이 적용됩니다. 

▶ endIndex

두 번째 매개변수는 추출을 끝내는 인덱스를 지정합니다. endIndex 미만의 요소들을 지정하는 것으로, endIndex 위치에 있는 요소는 포함되지 않습니다. 

    - endIndex >= exArr.length이거나 endIndex 값이 생략된 경우, 배열 끝까지 모든 요소들이 추출됩니다. 

    - endIndex가 음수일 경우, 배열에 접근하는 것과 동일하게 배열의 끝에서부터 순서를 시작합니다. (endIndex + exArr.length와 동일한 효과)

    - 음수인데 그 절댓값이 exArr.length보다 크다면 0이 적용됩니다. 

    - startIndex보다 endIndex의 위치가 더 앞선다면, 요소들이 추출되지 않습니다. 

 

다음은 slice() 메서드의 사용 예시입니다.

const fruits = ["Apple", "Banana", "Cherry", "Mango"];
const selected_01 = fruits.slice(1, 3); // ["Banana", "Cherry"]
const selected_02 = fruits.slice(3); // ["Mango"]
const selected_03 = fruits.slice(); // ["Apple", "Banana", "Cherry", "Mango"]
console.log(fruits);
// Array ["Apple", "Banana", "Cherry", "Mango"]

 

※ slice() 메서드는 배열뿐만이 아니라 문자열에도 유사하게 적용할 수 있습니다. 추출하고자 하는 문자열에서 추출을 시작하는 인덱스와 추출을 끝내는 인덱스가 매개변수인데, 전자는 후자와 달리 필수 매개변수입니다.