[JavaScript] splice()로 배열의 특정 인덱스 요소 삭제/추가/교체하기

 

 

splice() 로 배열의 특정 인덱스 요소 삭제/교체/추가하기

 

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

 

 

🍊 splice() 기본 구문

array.splice(시작 인덱스, 삭제할 요소 개수, 추가할 요소, ••• )

 

매개변수

📍 시작 인덱스

배열의 변경을 시작할 인덱스입니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음).

값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.

 

📍 삭제할 요소 개수 [optional]

배열에서 제거할 요소의 수입니다. 이 요소를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

 

📍 추가할 요소 [optional]

배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

 

반환 값

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

 

🍊 splice() 사용해보기

📌 요소 추가하기

• 요소 제거 없이, 2번 인덱스에 drum 추가하기

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

삭제할 요소의 개수를 0으로 설정했기 때문에 삭제되는 요소 없이 해당 인덱스에 추가만 됩니다.

 

 

• 요소 제거 없이, 2번 인덱스에 drum과 guitar 추가하기

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

마찬가지로 요소 추가만 발생합니다.

 

 

📌 요소 삭제하기

• 인덱스 3에서 하나의 요소 삭제

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

이 경우 반환값으로 삭제된 요소가 담깁니다.

 

 

 

📌 요소 추가와 삭제 동시에 하기 (교체하기)

• 인덱스 2에서 하나의 요소 삭제하고, trumpet 추가하기

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

인덱스2에 있던 drum을 삭제하고 대신 trumpet이 추가됩니다.

 

 

📌 음수 인덱스 사용하기

• 인덱스 -2에서 하나의 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

 

 

 

---

본 포스팅은 MDN의 문서를 정리한 것입니다. 😀

 

Array.prototype.splice() - JavaScript | MDN