JavaScript 배열 slice() 메서드란?
JavaScript의 Array slice() 메서드는 기존(더 큰) 배열에서 선택한 요소들만 추출하여 새로운 배열을 반환하는 메서드입니다. 가장 중요한 특징은 원본 배열을 전혀 변경하지 않고(non-destructive) 그대로 유지한다는 점입니다.
기본 문법
arr.slice(start, end)
- start (선택 사항): 추출을 시작할 인덱스입니다. 음수 값을 넣으면 배열 끝에서부터 계산됩니다.
- end (선택 사항): 추출을 종료할 인덱스이며, 이 인덱스의 요소는 포함되지 않습니다. 생략하면 배열 끝까지 추출합니다.
예를 들어 arr.slice(1, 4)는 인덱스 1부터 3까지의 요소를 반환하며, 인덱스 4의 요소는 제외됩니다.
slice() 메서드 예제 코드
다음은 배열 slice() 메서드를 활용한 전체 예제 코드입니다.
<!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 {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Array Slice</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to get elements between first and fourth elements
</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["H", "E", "L", "L", "O"];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = arr.slice(1,4);
});
</script>
</body>
</html>
위 예제에서는 ["H", "E", "L", "L", "O"] 배열에 대해 slice(1, 4)를 호출하므로, 인덱스 1부터 3까지의 요소인 ["E", "L", "L"]이 새로운 배열로 반환됩니다.
실행 결과
페이지가 처음 로드된 화면은 다음과 같습니다.
“CLICK HERE” 버튼을 클릭하면 slice() 메서드의 결과가 화면에 표시됩니다.
정리
slice() 메서드는 원본 배열을 훼손하지 않으면서 특정 범위의 요소를 복사해야 할 때 매우 유용합니다. 반면 원본 배열 자체를 변경해야 하는 경우에는 splice() 메서드를 사용하는 것이 적합합니다. 두 메서드의 차이를 잘 구분해서 상황에 맞게 활용해 보세요.