JavaScript slice() 함수

📚 slice() 함수란?

slice() 함수는 배열이나 문자열의 일부를 추출하여 새로운 배열이나 문자열을 반환하는 메서드이다. 원본 데이터를 변경하지 않는 안전한 방법으로 데이터를 다룰 수 있어 매우 유용하다.

---

📖 기본 문법

array.slice(start, end)
string.slice(start, end)

매개변수:

• start(선택): 추출을 시작할 인덱스. 기본값은 0이다.
• end(선택): 추출을 끝낼 인덱스(해당 인덱스는 포함되지 않음). 생략하면 끝까지 추출한다.

반환값: 추출된 요소를 포함한 새로운 배열 또는 문자열

---

📦 배열에서 slice() 사용하기

💡 기본 예제

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

// 인덱스 1부터 3까지 추출 (3은 포함 안 함)
console.log(fruits.slice(1, 3)); 
// ['banana', 'cherry']

// 처음부터 2개 추출
console.log(fruits.slice(0, 2)); 
// ['apple', 'banana']

// 인덱스 2부터 끝까지 추출
console.log(fruits.slice(2)); 
// ['cherry', 'date', 'elderberry']

// 원본은 변경되지 않음
console.log(fruits); 
// ['apple', 'banana', 'cherry', 'date', 'elderberry']

➖ 음수 인덱스 사용

음수를 사용하면 배열의 끝에서부터 역순으로 계산한다.

const numbers = [1, 2, 3, 4, 5];

// 마지막 2개 요소 추출
console.log(numbers.slice(-2)); 
// [4, 5]

// 마지막에서 2개 앞까지 추출
console.log(numbers.slice(0, -2)); 
// [1, 2, 3]

// 두 번째에서 마지막 전까지 추출
console.log(numbers.slice(1, -1)); 
// [2, 3, 4]

🛠️ 실무 활용 예제

배열 복사하기:

const original = [1, 2, 3];
const copy = original.slice(); // 또는 [...original]
copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]

배열의 마지막 N개 요소 가져오기:

const data = [10, 20, 30, 40, 50];

// 마지막 3개
const lastThree = data.slice(-3); // [30, 40, 50]

페이징 구현:

const items = ['a', 'b', 'c', 'd', 'e', 'f'];
const pageSize = 2;
const pageNumber = 1; // 두 번째 페이지

const start = pageNumber * pageSize;
const end = start + pageSize;
const page = items.slice(start, end); // ['c', 'd']

---

📝 문자열에서 slice() 사용하기

💡 기본 예제

const text = 'Hello, World!';

// 인덱스 0부터 5까지
console.log(text.slice(0, 5)); 
// 'Hello'

// 인덱스 7부터 끝까지
console.log(text.slice(7)); 
// 'World!'

// 마지막 6개 문자
console.log(text.slice(-6)); 
// 'World!'

🛠️ 실무 활용 예제

파일 확장자 추출:

const filename = 'document.pdf';
const extension = filename.slice(-3); // 'pdf'

URL의 도메인 부분 추출:

const url = 'https://example.com/page';
const domain = url.slice(8, 19); // 'example.com'

텍스트 미리보기 만들기:

function preview(text, length) {
  if (text.length > length) {
    return text.slice(0, length) + '...';
  }
  return text;
}

console.log(preview('JavaScript은 강력한 언어입니다', 10)); 
// 'JavaScript...'

---

⚖️ slice() vs 다른 메서드

JavaScript에는 유사한 메서드들이 있다. 차이점을 이해하는 것이 중요하다.

slice() vs splice()

const arr = ['a', 'b', 'c', 'd'];

// slice() - 원본 변경 없음
const sliced = arr.slice(1, 3); // ['b', 'c']
console.log(arr); // ['a', 'b', 'c', 'd']

// splice() - 원본 변경함
const spliced = arr.splice(1, 2); // ['b', 'c']
console.log(arr); // ['a', 'd']

slice() vs substring()

문자열에서 substring()도 비슷하지만 약간의 차이가 있다.

const text = 'JavaScript';

// slice() - 음수 인덱스 지원
console.log(text.slice(-4)); // 'ript'

// substring() - 음수는 0으로 처리
console.log(text.substring(-4)); // 'JavaScript'

---

⚠️ 주의사항

1. 얕은 복사 (Shallow Copy)

const nested = [[1, 2], [3, 4]];
const copy = nested.slice();

copy[0][0] = 999;
console.log(nested[0][0]); // 999 - 내부 배열은 복사되지 않음

2. 원본 데이터 보호

function processData(arr) {
  // 함수 내에서 배열을 수정해도 원본은 안전
  const working = arr.slice();
  working.pop();
  return working;
}

const original = [1, 2, 3];
const result = processData(original);
console.log(original); // [1, 2, 3] - 변경 안 됨

---

⚡ 성능 팁

• 큰 배열을 자주 복사해야 한다면 전개 연산자(...)나 Array.from()도 고려하자.
• 불변성이 중요한 상황에서는 slice()를 사용하자.

---

🎓 결론

slice() 함수는 JavaScript에서 배열과 문자열을 안전하게 다루는 필수적인 도구다. 원본 데이터를 보호하면서 필요한 부분만 추출할 수 있어, 함수형 프로그래밍과 불변성을 추구하는 현대적 JavaScript 개발에 매우 중요하다. 음수 인덱스, 페이징, 데이터 처리 등 다양한 상황에서 활용할 수 있으니 자주 연습해보자.