반응형
SMALL
📌 slice()란?
JavaScript의 slice() 메서드는 배열(Array) 또는 문자열(String)에서 특정 부분을 추출하여 새로운 배열이나 문자열을 반환하는 메서드입니다.
✅ 기본 문법
array.slice(start, end);
string.slice(start, end);- start: 추출을 시작할 인덱스 (0부터 시작)
- end: (옵션) 종료 인덱스 (이전 인덱스까지 포함, 해당 인덱스는 제외됨)
- 원본 데이터는 변경되지 않음 (불변성 유지)
📌 slice()의 주요 활용 사례
- 배열에서 특정 요소 추출
- 문자열에서 특정 부분 가져오기
- 배열 복사 (얕은 복사)
- 마지막 몇 개의 요소 가져오기
- 페이지네이션 (데이터 나누기)
- 배열에서 특정 구간 삭제 (splice()와 비교)
- Immutable 방식으로 배열 조작하기
- 배열 역순 정렬 시 활용 (reverse()와 함께 사용)
- 비구조화 할당(Destructuring)과 조합
- React 또는 Frontend 개발에서 활용
📌 slice() 실전 예제 10가지
1️⃣ 배열에서 특정 요소 추출
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>slice() 예제</title>
</head>
<body>
<script>
const fruits = ["사과", "바나나", "오렌지", "포도", "수박"];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // ["바나나", "오렌지", "포도"]
</script>
</body>
</html>✅ 설명: slice(1, 4)는 1번 인덱스부터 4번 인덱스 직전(3번)까지 추출함.
2️⃣ 문자열에서 특정 부분 가져오기
<script>
const str = "Hello, JavaScript!";
console.log(str.slice(7, 17)); // "JavaScript"
</script>✅ 설명: slice(7, 17)을 사용하여 "JavaScript" 부분을 추출함.
3️⃣ 배열 복사 (얕은 복사)
<script>
const numbers = [1, 2, 3, 4, 5];
const copiedNumbers = numbers.slice();
console.log(copiedNumbers); // [1, 2, 3, 4, 5]
</script>✅ 설명: slice()를 사용하면 원본 배열을 변경하지 않고 복사 가능.
4️⃣ 마지막 몇 개의 요소 가져오기
<script>
const names = ["Alice", "Bob", "Charlie", "David", "Eve"];
console.log(names.slice(-2)); // ["David", "Eve"]
</script>✅ 설명: slice(-2)를 사용하면 배열의 마지막 2개 요소를 가져올 수 있음.
5️⃣ 페이지네이션 (데이터 나누기)
<script>
const data = Array.from({ length: 100 }, (_, i) => i + 1);
const pageSize = 10;
const page = 3;
const paginatedData = data.slice((page - 1) * pageSize, page * pageSize);
console.log(paginatedData); // [21, 22, ..., 30]
</script>✅ 설명: 페이지네이션을 구현할 때 slice()를 활용하여 특정 페이지의 데이터를 가져옴.
6️⃣ 배열에서 특정 구간 삭제 (splice()와 비교)
<script>
const items = ["A", "B", "C", "D", "E"];
console.log(items.slice(0, 2).concat(items.slice(3))); // ["A", "B", "D", "E"]
</script>✅ 설명: slice()를 사용하여 특정 요소를 삭제할 수도 있음.
7️⃣ Immutable 방식으로 배열 조작하기
<script>
const arr = [10, 20, 30, 40, 50];
const newArr = [...arr.slice(0, 2), 25, ...arr.slice(2)];
console.log(newArr); // [10, 20, 25, 30, 40, 50]
</script>✅ 설명: slice()와 스프레드 연산자를 조합하여 불변성 유지하며 배열 수정.
8️⃣ 배열 역순 정렬 시 활용 (reverse()와 함께 사용)
<script>
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.slice().reverse()); // [5, 4, 3, 2, 1]
</script>✅ 설명: slice().reverse()를 사용하여 원본 배열을 변경하지 않고 역순 정렬.
9️⃣ 비구조화 할당(Destructuring)과 조합
<script>
const list = ["A", "B", "C", "D"];
const [first, ...rest] = list.slice(1);
console.log(first); // "B"
console.log(rest); // ["C", "D"]
</script>✅ 설명: slice()와 비구조화 할당을 함께 사용하여 배열 분리 가능.
🔟 React 또는 Frontend 개발에서 활용
import { useState } from "react";
function PaginatedList({ items }) {
const [page, setPage] = useState(1);
const pageSize = 5;
const paginatedItems = items.slice((page - 1) * pageSize, page * pageSize);
return (
<div>
<ul>{paginatedItems.map(item => <li key={item}>{item}</li>)}</ul>
<button onClick={() => setPage(page + 1)}>다음 페이지</button>
</div>
);
}✅ 설명: React에서 slice()를 활용하여 페이지네이션 기능을 구현할 수 있음.
📌 마무리 🎯
🔑 slice() 핵심 정리
- 배열 및 문자열에서 특정 부분을 추출하는 메서드
- 불변성(immutable) 유지하며 데이터를 조작 가능
- 페이지네이션, 필터링, 데이터 조작 등 다양한 활용 가능
- React 및 Frontend 개발에서도 유용하게 사용
반응형
LIST
'Javascript' 카테고리의 다른 글
| [Dseok의 코딩스터디] JavaScript async/await 한방에 끝내기 | 개념 & 실전 예제 10가지 (2) | 2025.03.06 |
|---|---|
| [Dseok의 코딩스터디] JavaScript slice() vs splice() 차이점 한방에 끝내기 (1) | 2025.03.06 |
| [Dseok의 코딩스터디] JavaScript로 인터렉티브 타이머 효과 만들기 (0) | 2025.03.03 |
| [Dseok의 코딩스터디] JavaScript로 랜덤 얼굴 생성기 구현하기 (0) | 2025.03.03 |
| [Dseok의 코딩스터디] JavaScript로 간단한 채팅봇 만들기 (1) | 2025.03.02 |