자바스크립트 배열 slice() 함수 – 배열을 지정한 인덱스 범위로 자르기

정의 및 사용 방법

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

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

특징

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

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

기본 예제

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']

구문

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']