slice

JavaScript의 slice 메서드는 문자열과 배열에서 부분을 추출하기 위해 사용됩니다.

slice는 원본 데이터는 변경하지 않고, 새로 잘라낸 데이터(문자열 또는 배열)를 반환합니다.

---

문자열에서 slice

문법

string.slice(startIndex, endIndex)

• startIndex: 추출을 시작할 인덱스 (0부터 시작).
• endIndex: (옵션) 추출을 끝낼 인덱스 (이 인덱스는 포함되지 않음). 생략하면 문자열 끝까지 추출.

특징

• 음수를 사용할 경우, 문자열의 끝에서부터 계산.
• 원본 문자열은 변경되지 않음.

예제

 

const text = "JavaScript is awesome";

console.log(text.slice(0, 10)); // "JavaScript" (0번째부터 9번째까지) 
console.log(text.slice(11)); // "is awesome" (11번째부터 끝까지) 
console.log(text.slice(-7)); // "awesome" (뒤에서 7번째부터 끝까지)
console.log(text.slice(4, -3)); // "Script is awes" (4번째부터 뒤에서 3번째 이전까지)

---

배열에서 slice

문법

array.slice(startIndex, endIndex)

 

• startIndex: 추출을 시작할 인덱스 (0부터 시작).
• endIndex: (옵션) 추출을 끝낼 인덱스 (이 인덱스는 포함되지 않음). 생략하면 배열 끝까지 추출.

특징

• 새로운 배열을 반환하며, 원본 배열은 변경되지 않음.
• 음수를 사용할 경우, 배열 끝에서부터 계산.

예제

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

console.log(numbers.slice(1, 3)); // [20, 30] (1번째부터 2번째까지) 
console.log(numbers.slice(2)); // [30, 40, 50] (2번째부터 끝까지) 
console.log(numbers.slice(-2)); // [40, 50] (뒤에서 2번째부터 끝까지) 
console.log(numbers.slice(1, -1));// [20, 30, 40] (1번째부터 뒤에서 1번째 이전까지)

---

차이점: slice vs substring

• slice와 substring은 비슷하게 문자열을 추출하지만, 몇 가지 차이가 있습니다:
  1. 음수 사용 가능 여부:
     • slice: 음수 사용 가능.
     • substring: 음수 사용 시, 음수는 0으로 간주.
  2. 매개변수 순서:
     • slice: startIndex가 endIndex보다 클 경우 빈 문자열 반환.
     • substring: startIndex와 endIndex가 뒤바뀌면 자동으로 순서를 교환.

---

활용 사례

1. 문자열 조작

const fileName = "document.pdf";
const nameOnly = fileName.slice(0, fileName.lastIndexOf(".")); // "document" 
const extension = fileName.slice(fileName.lastIndexOf(".") + 1); // "pdf"

2. 배열 복사

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

const copy = arr.slice(); // [1, 2, 3, 4, 5]

3. 배열 분할

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

const firstHalf = items.slice(0, items.length / 2); // [1, 2] 
const secondHalf = items.slice(items.length / 2); // [3, 4, 5]

---

slice는 매우 강력한 도구로 문자열과 배열의 부분 추출에 널리 사용됩니다. 사용 목적에 맞게 적절히 활용하면 효율적인 코드를 작성할 수 있습니다!