[JavaScript] 배열 splice 메서드

splice()

자바스크립트의 splice() 메서드는 배열 객체에 사용할 수 있는 내장 메서드이다. 이는 기존 요소를 삭제하거나 교체하여 배열의 내용을 변경하며, 제거된 요소가 담긴 별도의 배열을 새로 반환한다. splice() 메서드는 3개의 매개 변수가 있으며 원본 배열을 직접 변경한다.

Array.splice(start, deleteCount, items, ...)

• start : 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다.
• deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수. deleteCount가 0인 경우 아무런 요소도 제거되지 않는다(옵션).
• items : 제거한 위치에 삽입할 요소들의 목록이다. 생략할 경우 원본 배열에서 요소들을 제거하기만 한다(옵션).

const arr = [1, 2, 3, 4];

//원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

//제거한 요소가 배열로 반환된다.
console.log(result); //[2,3]

//splice 메서드는 원본 배열을 직접 변경한다.
console.log(arr); //[1, 20, 30, 4]

splice() 메서드에 3개의 인수를 빠짐 없이 전달하면 첫 번째 인수, 즉, 시작 인덱스부터 두 번째 인수, 즉 제거할 요소의 개수만큼 원본 배열에서 요소를 제거한다. 그리고 세 번째 인수, 즉 제거한 위치에 삽입한 요소들을 원본 배열에 삽입한다.

 

배열 요소 삭제하기

다음과 같은 내용이 담긴 months라는 배열이 있다고 가정하자. 배열 이름은 months이지만 요일이 배열에 섞여 있는 상태이다. splice() 메서드를 사용해 요일 이름을 제거하는 동시에 요일만 포함된 새 배열을 만들 수 있다.

let months = ["Jan", "Feb", "Mon", "Tue"];
let days = months.splice(2); //인덱스 2부터 배열 변경

console.log(days); //["Mon", "Tue"]

splice() 메서드를 사용할 때는 start 매개 변수에 꼭 값을 전달해야 하는데, 이 매개 변수는 배열의 변경을 시작할 인덱스를 지정한다. deleteCount라는 두 번째 매개 변수에 값을 전달하면 배열에서 제거할 요소의 수를 지정한다. 생략 시 start 인덱스부터 배열의 끝까지의 모든 요소를 제거한다.

let months = ["Jan", "Feb", "Mon", "Tue"];
let days = months.splice(2, 1); //요소 하나만 삭제

console.log(days); //["Mon"]
console.log(months); //["Jan", "Feb", "Tue"]

 

요소 제거하고 새로 추가하기

splice() 메서드로 요소를 삭제하는 동시에 바로 새 요소를 추가할 수도 있다. deleteCount 매개 변수 뒤에 배열에 추가할 요소를 전달하기만 하면 된다.

let months = ["Jan", "Feb", "Mon", "Tue"];
let days = months.splice(2, 2, "Mar", "Apr"); //요소 두 개를 제외하고, 다를 요소를 추가

console.log(days); //["Mon", "Tue"]
console.log(months); //["Jan", "Feb", "Mar", "Apr"]

 

요소를 제거하지 않고 새 배열 요소 추가하기

숫자 0을 deleteCount 매개 변수에 전달하여 기존 요소를 삭제하지 않고도 새 요소를 추가할 수 있다. 요소가 제거되지 않을 경우 빈 배열이 반환되며, 경우에 따라 빈 배열을 변수에 저장해서 사용할 수 있다.

let months = ["Jan", "Feb", "Mon", "Tue"];
month.splice(2, 0, "Mar"); //두 번째 매개변수가 0이므로 기존 요소 모두 유지

console.log(months); //["Jan", "Feb", "Mar", "Mon", "Tue"]