[자바스크립트-배열] splice, slice 정리

매번 사용할때 마다 헷갈리던 splice와 slice를 한번 정리해야겠다는 생각이 들었습니다. 매번 헷갈리는 내용인 부수효과여부, 반환값, 두번째 인수 3가지를 정리해보고 싶었습니다.
두번째 인수는 삭제할 개수인지 삭제할 인덱스인지 헷갈려 추가로 정리하게 되었습니다.

 

splice

splice 는 배열 요소를 삭제하거나 배열에 새로운 요소를 추가해주는 기능을 합니다. 기본 구문은 아래와 같습니다.

Array.prototype.splice(startIndex [,deleteCount [, item1[, item2[, ...]]]]);

 

배열 요소 삭제하기

배열 요소를 삭제하기 위해서는 첫번째 인수로 삭제하려는 인덱스, 두번째 인수로 인덱스로부터 삭제할 deleteCount 값을 넘겨주면 됩니다. 삭제시 인덱스로부터 연속된 위치에 있는 값만 삭제가능합니다.

 

아래는 1, 2, 3, 4를 배열 요소로 갖는 배열이 존재합니다. 이때 배열 요소 2와 3을 제거하려고 합니다. 요소 2의 인덱스는 1이고 삭제하려는 배열요소는 2개이기 때문에 첫번째 인수로는 1, 두번째 인수로는 2를 전달합니다.

const list = [1, 2, 3, 4];
list.splice(1, 2); // [2, 3]

 

splice 메서드를 통해서 삭제하는 것은 원본 배열을 변경시킵니다. 삭제하려는 요소는 배열에서 제거되고 삭제 된 값을 요소로 하는 새로운 배열을 반환해줍니다. 이때 얕은 복사가 발생합니다.

만약 deleteCount를 인수로 전달하지 않는 경우 인덱스로부터 배열의 마지막 요소까지 모두 제거합니다.

 

배열 요소 추가하기

배열요소를 추가하기 위해서는 첫번째 인수로 추가하려는 인덱스, 두번째 인수로는 deleteCount (삭제하지 않을 경우 0), 세번째 인수 부터는 추가하려는 요소를 전달하면 됩니다.

 

아래는 1, 2, 3, 4를 배열 요소로 갖는 배열이 존재합니다. 이때 숫자 5와 6을 추가하려고 합니다. 배열의 인덱스 1부터 시작해서 두 인수를 차례로 추가합니다.

const list = [1, 2, 3, 4];
list.splice(1, 0, 5, 6); // []
console.log(list); // [1, 5, 6, 2, 3, 4]

부수효과여부	반환값	두번째 인수
O	제거된 요소 배열

 

slice

slice 는 기존 배열 요소로 새로운 배열을 만들어줍니다. 이때 얕은 복사가 발생합니다. 첫번째 인수로 새로운 배열로 만들 시작 인덱스, 두번째 인수로 마지막 인덱스를 전달하면 처음과 마지막 인덱스 사이에 있는(처음인덱스 요소는 포함되지만 마지막 인덱스 요소는 포함되지 않음) 요소로 새로운 배열을 생성 후 반환합니다.

만약 인수를 전달하지 않는 경우 모든 배열 요소를 갖는 새로운 배열을 반환합니다.

Array.prototype.slice([startIndex [,endIndex]]);

시작 인덱스는 1, 두번째 인덱스는 3를 전달한 경우 인덱스 1부터 3 이전까지의 요소로 새로운 배열을 반환합니다. 인덱스를 전달하지 않는 경우 모든 배열 요소를 갖는 새로운 배열을 반환합니다.

const list = [1, 2, 3, 4];
list.slice(1, 3); // [2, 3]
list.slice(); // [1,2,3,4]

부수효과여부	반환값	두번째 인수
X	새롭게 생성된 배열	마지막 인덱스