JavaScript에서 배열 스플라이싱(Splicing)의 의미
배열 스플라이싱(Splicing)이란 Array.splice() 메서드를 사용하여 기존 배열에 새로운 요소를 추가하거나, 특정 위치의 요소를 제거하는 작업을 의미합니다. 이때 제거된 요소들은 하나의 배열 형태로 반환됩니다.
splice() 메서드의 기본 문법은 다음과 같습니다.
arr.splice(startIndex, deleteCount, item1, item2, ...);
- startIndex: 변경을 시작할 인덱스 위치
- deleteCount: 제거할 요소의 개수 (0이면 아무것도 제거하지 않음)
- item1, item2, ...: 해당 위치에 삽입할 새로운 요소들
JavaScript 배열 Splice 예제 코드
다음은 JavaScript에서 배열을 스플라이싱하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<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>JavaScript에서 배열 스플라이싱하기</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 두 번째 요소 뒤에 새로운 항목들이 추가됩니다
</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(2, 0, "A", "B", "C", "D", "E");
resEle.innerHTML = "Spliced array = " + arr;
});
</script>
</body>
</html>코드 동작 방식 설명
위 예제에서 arr.splice(2, 0, "A", "B", "C", "D", "E")가 호출되면 다음과 같이 동작합니다.
- 인덱스 2(세 번째 요소)부터 변경을 시작합니다.
- 두 번째 인자가 0이므로 기존 요소는 하나도 제거되지 않습니다.
- "A", "B", "C", "D", "E" 다섯 개의 문자열이 인덱스 2 위치에 삽입됩니다.
따라서 원래 배열 [1, 3, 5, 7, 9, 11]은 버튼 클릭 후 [1, 3, "A", "B", "C", "D", "E", 5, 7, 9, 11]로 변경됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭한 후의 결과입니다.
