자바스크립트의 slice() 메서드는 배열에서 선택한 요소들만 추출하여 새로운 배열로 반환하는 메서드입니다. 원본 배열은 그대로 유지되기 때문에, 기존 데이터를 훼손하지 않고 부분 배열을 만들어야 할 때 매우 유용합니다.
slice() 메서드 문법
slice() 메서드의 기본 문법은 다음과 같습니다.
array.slice(start, end)
- start: 추출을 시작할 위치를 나타내는 정수입니다. 음수를 지정하면 배열의 끝에서부터 역순으로 계산됩니다.
- end: 추출이 끝나는 위치를 나타내는 정수입니다. 단, 해당 인덱스의 요소는 결과에 포함되지 않으며, 생략하면 배열의 끝까지 모두 추출합니다.
그럼 자바스크립트에서 slice() 메서드를 직접 구현해 보겠습니다.
예제 1 – 기본 사용법
다음 예제에서는 상품 카테고리 배열에서 인덱스 2부터 4 직전까지의 요소를 추출합니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p id="test"></p>
<script>
var arr = ["Accessories", "Electronics", "Books", "Pet Supplies"];
document.getElementById("test").innerHTML = "초기 배열 = "+arr+", <br>슬라이스 결과 = "+arr.slice(2, 4);
</script>
</body></html>실행 결과
인덱스 2와 3에 해당하는 “Books”와 “Pet Supplies”만 새로운 배열로 반환된 것을 확인할 수 있습니다.
예제 2 – 버튼 클릭으로 슬라이스 결과 확인하기
이번에는 버튼을 클릭했을 때 배열의 일부 요소를 잘라내어 화면에 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>차량 종류</h2>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
document.getElementById("test").innerHTML = "초기 배열 = "+car;
function display() {
document.getElementById("test").innerHTML = "일부 요소를 잘라낸 후의 배열 = "+car.slice(1,4);
}
</script>
</body></html>실행 결과
페이지가 로드되면 초기 배열이 먼저 표시됩니다.
“결과 보기” 버튼을 클릭하면 다음과 같이 슬라이스된 배열이 출력됩니다.
인덱스 1부터 3까지의 요소인 “Convertible”, “SUV”, “AUV”가 반환되며, 원본 car 배열은 여전히 그대로 유지됩니다.
정리
slice() 메서드는 시작 인덱스와 종료 인덱스를 기준으로 배열의 일부를 복사해 새 배열을 반환합니다. 원본 배열을 변경하지 않으면서 특정 범위의 데이터가 필요할 때 적극적으로 활용해 보세요.