JavaScript에서 배열의 특정 요소를 제거할 때 가장 널리 사용되는 방법 중 하나가 splice() 메서드입니다. splice()는 단순히 요소를 삭제하는 것뿐만 아니라 교체나 새 요소 추가까지 가능한 강력한 메서드이며, 원본 배열 자체를 직접 변경(mutate)한다는 특징이 있습니다.
splice() 메서드의 기본 문법
splice() 메서드는 두 개의 주요 매개변수를 받습니다.
- 시작 인덱스(startIndex) – 제거를 시작할 위치
- 삭제 개수(deleteCount) – 시작 인덱스부터 제거할 요소의 개수
예를 들어 arr.splice(1, 4)는 인덱스 1부터 4개의 요소를 제거합니다. 즉, 위 예제에서는 첫 번째 요소와 마지막 요소 사이에 있는 값들이 삭제됩니다.
예제 코드
다음은 JavaScript의 splice() 메서드를 사용하여 배열 요소를 제거하는 전체 예제입니다.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Remove elements using splice()</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to remove elements between 1st and 5th element</h3>
<script>
let fillEle = document.querySelector(".sample");
let resEle = document.querySelector(".result");
let arr = [1, 3, 5, 7, 9, 11];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
arr.splice(1, 4);
resEle.innerHTML = "Spliced array = " + arr;
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 – 인덱스 1부터 4개의 요소(3, 5, 7, 9)가 제거되고, 남은 배열 [1, 11]이 초록색 결과 영역에 표시됩니다.
핵심 정리
- splice()는 원본 배열을 직접 수정하며, 제거된 요소들은 배열 형태로 반환됩니다.
- 첫 번째 매개변수는 시작 인덱스, 두 번째 매개변수는 제거할 요소의 개수입니다.
- 두 번째 매개변수를 생략하면 시작 인덱스부터 배열 끝까지 모든 요소가 제거됩니다.
- 배열을 복사하지 않고 그대로 유지하고 싶다면 slice()나 filter() 같은 비파괴적(non-mutating) 메서드를 대신 고려하는 것이 좋습니다.