[JavaScript] 배열 마스터의 필수 관문, splice() 함수 완벽 정리

자바스크립트에서 배열을 자유자재로 다루기 위해 반드시 알아야 할 splice() 함수에 대해 알아보겠습니다.

splice()는 배열의 요소를 삭제, 교체, 추가할 수 있는 만능 도구입니다.

 

하지만 원본 배열을 직접 수정하는 '파괴적 메서드'이기 때문에 정확한 사용법을 익히는 것이 중요합니다.

---

1. 기본 문법

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

• start: 변경을 시작할 인덱스입니다.
• deleteCount (옵션): 삭제할 요소의 개수입니다. 생략하면 끝까지 삭제합니다.
• itemN (옵션): 배열에 추가할 요소들입니다.

---

2. 주요 사용 패턴 4가지

① 특정 위치부터 끝까지 삭제하기

가장 단순한 형태입니다. 시작 인덱스만 전달하면 그 뒤는 모두 사라집니다.

const fruits = ['사과', '바나나', '오렌지', '포도'];
fruits.splice(2); 

console.log(fruits); // ['사과', '바나나'] (인덱스 2번인 오렌지부터 삭제됨)

② 특정 개수만큼만 삭제하기

두 번째 인자를 사용해 원하는 개수만 딱 지울 수 있습니다.

const data = [1, 2, 3, 4, 5];
data.splice(1, 2); 

console.log(data); // [1, 4, 5] (인덱스 1부터 2개 삭제)

③ 요소를 삭제함과 동시에 새로운 요소 추가(교체)

삭제된 자리에 새로운 아이템을 채워 넣을 수 있습니다.

const colors = ['Red', 'Green', 'Blue'];
colors.splice(1, 1, 'Yellow', 'Pink'); 

console.log(colors); // ['Red', 'Yellow', 'Pink', 'Blue'] 
// Green이 빠진 자리에 Yellow와 Pink가 들어갔습니다.

④ 삭제 없이 새로운 요소 중간에 삽입하기

deleteCount를 0으로 설정하면 아무것도 지우지 않고 원하는 위치에 요소를 끼워 넣을 수 있습니다.

const seasons = ['봄', '겨울'];
seasons.splice(1, 0, '여름', '가을');

console.log(seasons); // ['봄', '여름', '가을', '겨울']

---

3. splice() 사용 시 주의사항 (꿀팁)

1. 원본 배열이 변합니다!
2. splice()를 실행하면 변수에 할당된 원본 배열 자체가 수정됩니다. 만약 원본을 보존하고 싶다면 slice()를 쓰거나 스프레드 연산자([...])로 복사본을 먼저 만드세요.
3. 반환값은 "삭제된 요소의 배열"입니다.
4. const removed = arr.splice(1, 2);를 하면 removed 변수에는 삭제된 값들이 담깁니다.
5. 마이너스 인덱스 사용 가능
6. start에 -1을 넣으면 배열의 끝에서부터 계산합니다.

---

4. 요약표

작업 종류	코드 형태
전체 삭제 (n번부터)	arr.splice(n)
일부 삭제	arr.splice(n, 개수)
요소 삽입	arr.splice(n, 0, 값)
요소 교체	arr.splice(n, 개수, 값)

---

마무리하며

splice()는 Angular나 React에서 데이터를 핸들링할 때도 정말 자주 쓰이는 문법입니다.

특히 인덱스를 활용한 데이터 삭제 로직에서 빛을 발하죠.

 

오늘 정리한 예제들을 직접 콘솔에 입력해 보시면서 익혀보세요!