정의 및 사용 방법

배열의 slice() 함수는
주어진 배열에서 지정한 인덱스 범위를 잘라내어(slice) 새로운 배열을 반환합니다.
이때 원본 배열은 변경되지 않습니다.

이 함수를 사용하면 배열에서 원하는 범위에 있는 요소들을 쉽게 추출할 수 있습니다.

특징

  • 인덱스 범위는 매개 변수로 지정한 시작점부터 끝점까지(끝점을 포함하지 않음)입니다.
  • 인덱스 범위로 잘라낸 요소를 새로운 배열로 반환합니다.
  • 이러한 동작으로 원본 배열은 변경되지 않고 그대로 유지됩니다.

배열에서 인덱스는 0부터 시작합니다.

사용법을 시각화하면 다음과 같습니다. 
[😃, 🏀, 🍅, 🐵].slice(0, 2); 👉 [😃, 🏀]

기본 예제

JavaScript 
/*
 * 주의하세요!
 * 배열에서 인덱스는 0부터 시작합니다.
 * 첫 번째 요소의 인덱스는 0이고, 두 번째 요소의 인덱스는 1입니다.
 */

// 배열을 만듭니다.
const colors = ["red", "green", "blue", "orange", "yellow"];

// 배열의 특정 범위의 요소를 추출하여 새로운 배열을 반환
const slicedColors = colors.slice(1, 3); // 1번 인덱스부터 3번 인덱스 직전까지

// 결과를 출력합니다.
console.log(slicedColors); // 출력: ['green', 'blue']

// 이때 원본 배열은 바뀌지 않습니다.
console.log(colors); // 출력: ['red', 'green', 'blue', 'orange', 'yellow']

구문

JavaScript 
arr.slice([start[, end]])

arr은 slice() 함수를 적용할 원본 배열입니다.

매개변수

slice() 함수의 매개변수 설명
start 옵션. 추출을 시작할 0부터 시작하는 인덱스를 지정합니다.
  • 생략하면 기본값으로 0이 사용됩니다.
  • 음수 값을 사용할 수 있으며, 이 경우 배열의 끝에서부터 역으로 카운트됩니다.
  • 추출한 배열의 길이(arr.length)보다 크거나 같으면 아무것도 추출되지 않습니다.
end 옵션. 추출을 끝낼 인덱스를 지정합니다.
slice()는 지정한 이 end 인덱스를 제외하고 추출합니다.
  • 생략하면 배열의 끝까지 추출합니다.
  • 음수 값을 사용할 수 있으며, 이 경우 배열의 끝에서부터 역으로 카운트됩니다.
  • 추출한 배열의 길이(arr.length)보다 크거나 같으면 배열의 끝까지 추출합니다.

반환 값

slice() 함수는 지정된 인덱스 범위에 있는 원본 배열의 요소를 추출하여 새로운 배열을 반환합니다.
반환되는 이 새로운 배열은 원본 배열의 일부 요소를 복사한 것이므로, 원본 배열은 바뀌지 않습니다.

매개변수와 반환 값 예시

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

// 배열의 처음 3개 요소를 추출합니다.
const firstThree = numbers.slice(0, 3);

console.log(firstThree); // 출력: [1, 2, 3]

// 배열의 마지막 2개 요소를 추출합니다.
const lastTwo = numbers.slice(-2);

console.log(lastTwo); // 출력: [4, 5]

예제

예제들을 통해서 slice() 함수의 사용법을 확인해 보세요.

시작 인덱스와 끝 인덱스 지정

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

console.log(fruits.slice(2, 4)); // ['cherry', 'date']
// 인덱스 2("cherry")부터 인덱스 4 이전("date")까지 추출하며, 인덱스 4의 요소는 제외됩니다.

시작 인덱스만 지정

JavaScript 
const fruits2 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits2.slice(2)); // ['cherry', 'date', 'elderberry']
// 인덱스 2("cherry")부터 배열의 끝까지 추출합니다.

음수 인덱스 사용

JavaScript 
const fruits3 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits3.slice(-2)); // ['date', 'elderberry']
// 배열의 끝에서부터 2번째 요소부터 끝까지 추출합니다.

원본 배열의 불변성 확인

JavaScript 
const fruits4 = ["apple", "banana", "cherry", "date", "elderberry"];

console.log(fruits4.slice(2, 4)); // ['cherry', 'date']

// 원본 배열은 그대로 유지됩니다.
console.log(fruits4); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

브라우저 호환성

slice() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
slice() 1 12 1 1

명세서

slice() 함수에 대한 명세서 사양
명세서 사양
slice() ECMAScript Language Specification
#sec-array.prototype.slice

참고문헌

같이 보기