JavaScript의 splice() 메서드는 배열에서 기존 요소를 삭제하거나 새로운 요소를 추가할 때 사용하는 대표적인 배열 조작 메서드입니다. 이 메서드는 원본 배열 자체를 직접 변경(mutate)하며, 삭제된 요소들을 담은 배열을 반환합니다.
splice() 메서드 문법
array.splice(index, num, item1, ....., itemX)
매개변수 설명
- index : 요소를 추가하거나 삭제할 시작 위치를 나타내는 정수입니다. 음수를 지정하면 배열 끝에서부터 역순으로 계산됩니다.
- num : 삭제할 요소의 개수입니다. 0을 지정하면 아무것도 삭제하지 않고 요소만 삽입할 수 있습니다.
- item1 … itemX : 배열에 새로 추가할 요소들입니다. 생략하면 지정한 위치의 요소를 삭제하기만 합니다.
예제 1 – 특정 위치의 요소를 삭제하고 새 요소로 교체
아래 예제에서는 인덱스 1부터 2개의 요소(“Books”, “Accessories”)를 삭제하고, 그 자리에 “Pet Supplies”와 “Footwear”를 추가합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Products</h2>
<p>버튼을 클릭하면 업데이트된 상품 목록이 표시됩니다.</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var products = ["Electronics", "Books", "Accessories"];
document.getElementById("test").innerHTML = products;
function display() {
products.splice(1, 2, "Pet Supplies", "Footwear");
document.getElementById("test").innerHTML = products;
}
</script>
</body>
</html>실행 결과
위 화면에서 “Result” 버튼을 클릭하면 다음과 같이 목록이 변경됩니다.
예제 2 – 배열 끝에 가까운 위치에서 요소 교체
이번에는 인덱스 3(배열 범위를 벗어난 위치)에서 1개를 삭제하고, 세 개의 새로운 요소를 한 번에 추가합니다. 시작 위치가 배열 길이보다 크거나 같으면 삭제 없이 배열 맨 뒤에 요소가 추가됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>Products</h2>
<p>버튼을 클릭하면 업데이트된 상품 목록이 표시됩니다.</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var products = ["Electronics", "Books", "Accessories"];
document.getElementById("test").innerHTML = products;
function display() {
products.splice(3, 1, "Pet Supplies", "Footwear", "Home Appliances");
document.getElementById("test").innerHTML = products;
}
</script>
</body>
</html>실행 결과
“Result” 버튼을 클릭하면 아래와 같이 새로운 요소들이 배열에 반영된 것을 확인할 수 있습니다.
정리
- splice()는 요소 삭제와 추가를 동시에 처리할 수 있는 강력한 메서드입니다.
- 반환값은 삭제된 요소들로 구성된 배열이며, 삭제된 요소가 없으면 빈 배열을 반환합니다.
- num을 0으로 지정하면 기존 요소를 건드리지 않고 원하는 위치에 요소를 삽입할 수 있습니다.
- 원본 배열이 직접 수정되므로, 원본을 유지해야 하는 경우에는 미리 복사본을 만들어 두는 것이 좋습니다.