배열의 원소를 제거하는, splice 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열의 원소를 삭제하거나 삭제하고 새로운 원소들을 추가하는 메서드인 splice 메서드에 대해서 알아보겠습니다.

표현식은 다음과 같습니다.

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

splice의 메서드의 인자로 들어오는 값은 차례로 start, deleteCount, items 입니다.

start는 삭제할 배열의 요소의 index 번호를 의미합니다.

그리고 뒤에 나오는 deleteCount 인자는 start 부터 몇 개의 요소를 삭제할지 결정하는 숫자입니다.

즉, start 인덱스부터 deleteCount 갯수만큼 삭제하겠다는 의미입니다.

start와 deleteCount뒤에 오는 인자들은 items 로 여러개가 들어올 수 있습니다.

이는 배열에 추가될 요소를 의미합니다. 이는 삭제된 요소의 위치(index)에 들어옵니다.

메서드의 리턴값은 삭제된 원소들의 배열입니다.

그리고 메서드를 실행하면 원래의 배열은 수정됩니다.

이해를 돕기위해 예제를 살펴보겠습니다.

var arr = ["인덱스0", "인덱스1", "인덱스2", "인덱스3"];
 
var spliced = arr.splice(2, 1);
console.log(spliced); // ["인덱스2"]
console.log(arr); // (3) ["인덱스0", "인덱스1", "인덱스3"]

위의 예제는 배열 arr에 splice 메서드를 이용해 인덱스 2 부터 1개의 원소를 삭제한 예제입니다.

리턴값은 삭제된 요소들의 배열이므로 spliced는 ["인덱스2"] 입니다.

메서드를 실행시킨 뒤 arr를 콘솔에 찍어보면 ["인덱스0", "인덱스1", "인덱스3"] 와 같이 "인덱스2" 원소가 삭제된 것을 알 수 있습니다.

*원본이 손상

그럼 특정 위치의 원소를 삭제하고 해당위치에 새로운 원소를 추가하는 예제를 살펴보겠습니다.

var arr = ["인덱스0", "인덱스1", "인덱스2", "인덱스3"];
 
var spliced = arr.splice(1, 2, "새로운 원소1", "새로운 원소2", "새로운 원소3");
console.log(spliced);
// (2) ["인덱스1", "인덱스2"]
console.log(arr);
// (5) ["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"]

위의 예제에서 splice 메서드를 이용해 인덱스 1의 위치에서부터 2개의 원소를 삭제하고 그 위치에 새로운 원소 세 개를 추가하였습니다.

삭제된 원소는 원래의 배열의 인덱스 1의 "인덱스1"과 1부터 2개이므로 "인덱스2" 입니다.

그리고 그 위치에 새로운 원소 1, 2, 3 이 추가된 것을 콘솔로 찍어본 것을 통해 알 수 있습니다.

arr = (5) ["인덱스0", "새로운 원소1", "새로운 원소2", "새로운 원소3", "인덱스3"] (원본 손상)

spliced = (2) ["인덱스1", "인덱스2"] (삭제된 배열)

여기까지 배열의 원소를 삭제, 추가하는 메서드인 splice 메서드에 대해서 알아보았습니다.

splice 메서드를 사용하면 원본이 손상된다는 것에 주의해주셔야 합니다.

글을 읽는 모든 분께 조금이나마 도움이 되길 바라겠습니다. 

감사합니다.

** 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)