[JavaScript] slice() 메서드 설명 및 예제

728x90

목 차

• 1. slice() 메서드란?
• 2. slice() 메서드 문법
• 3. 주요 특징
• 4. 사용 예제
  • 4-1. endIndex 생략한 경우
  • 4-2. startIndex, endIndex 지정한 경우
  • 4-3. 음수 인덱스 사용한 경우

반응형

 

1. slice() 메서드란?

• JavaScript의 slice() 메서드는 배열과 문자열에서 특정 구간을 추출하여 새로운 배열 또는 문자열을 반환하는 메서드입니다. 원본 데이터는 수정되지 않고, 지정한 범위의 요소 또는 문자를 추출한 새로운 배열이나 문자열을 반환합니다.

 

---

 

2. slice() 메서드 문법

• startIndex: 추출을 시작할 인덱스. 이 인덱스의 요소나 문자는 포함됩니다.
• endIndex (선택적): 추출을 종료할 인덱스. 이 인덱스의 요소나 문자는 포함되지 않습니다. endIndex를 생략하면 배열 또는 문자열의 끝까지 추출합니다.

// 배열 사용 가능
array.slice(startIndex, endIndex)

// 문자열 사용 가능
string.slice(startIndex, endIndex)

 

---

 

3. 주요 특징

1. 원본 데이터가 변하지 않음: slice() 메서드는 배열이나 문자열의 복사본을 반환하며 원본을 수정하지 않습니다.
2. 음수 인덱스 사용 가능: startIndex나 endIndex에 음수 값을 지정하면 배열이나 문자열의 끝에서부터 위치를 계산합니다.
3. 범위 초과: startIndex와 endIndex가 범위를 초과할 경우, startIndex가 배열이나 문자열의 길이보다 크면 빈 배열이나 문자열이 반환됩니다.

 

---

 

4. 사용 예제

4-1. endIndex 생략한 경우

• startIndex는 결과에 포함됩니다. endIndex를 생략하면 마지막 요소나 문자까지 범위에 포함됩니다.

// 배열 사용 예제
let arr = ["apple", "banana", "cherry", "date", "fig"];
console.log(arr.slice(2)); // ['cherry', 'date', 'fig']

// 문자열 사용 예제
let str = "Hello, World!";
console.log(str.slice(7)); // "World!"

 

4-2. startIndex, endIndex 지정한 경우

• endIndex 위치는 포함되지 않지 않습니다.

// 배열 사용 예제
let arr = ["apple", "banana", "cherry", "date", "fig"];
console.log(arr.slice(1, 3)); // ['banana', 'cherry']

// 문자열 사용 예제
let str = "Hello, World!";
console.log(str.slice(7, 12)); // "World"

 

4-3. 음수 인덱스 사용한 경우

• 마지막에 위치한 요소나 문자가 -1부터 시작합니다.
• ...-3, -2, -1 이렇게 끝에서부터 시작합니다. endIndex 위치는 포함되지 않습니다.

// 배열 사용 예제
let arr = ["apple", "banana", "cherry", "date", "fig"];
console.log(arr.slice(-3, -1)); // ['cherry', 'date']

// 문자열 사용 예제
let str = "Hello, World!";
console.log(str.slice(-6, -1)); // "World"

 

---

 

관련글

• [JavaScript] substring() 메서드 설명 및 예제
• [JavaScript] lastIndexOf() 메서드 설명 및 예제
• [JavaScript] indexOf() 메서드 설명 및 예제