Array.prototype.slice() 사용법

배열에서 slice() 함수는
배열의 특정 범위의 요소를 잘라내어(slice) 추출한 결과를 새로운 배열로 반환하는 함수입니다.
이 함수를 사용하여 배열의 원하는 범위의 요소를 추출할 수 있습니다. 이 과정에서 원본 배열은 바뀌지 않습니다.

문자열에서는 String.prototype.slice()가 문자열의 특정 범위의 문자열을 잘라내어 추출한 결과를 새로운 문자열로 반환합니다.

JavaScript 배열에서 slice() 함수로 특정 범위의 요소를 추출하기 
// 배열을 만듭니다.
const colors = ["red", "green", "blue", "orange", "yellow"];

// 배열의 특정 범위의 요소를 추출하여 새로운 배열을 반환
const slicedColors = colors.slice(1, 3); // 매개변수 설명을 참조하세요.

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

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

참고하세요!
slice() 함수명의 유래는 그 함수의 동작과 관련이 있습니다. "slice"라는 용어는 어떤 대상에서 일부분을 잘라내거나 조각으로 추출하는 동작을 나타냅니다. 배열의 slice() 함수는 이러한 동작을 수행하는 함수로, 원본 배열에서 특정 범위의 요소를 "잘라내서" 새로운 배열로 만듭니다. 따라서 함수명 slice()는 해당 동작을 명확하게 나타내기 위해 사용되었을 것으로 생각됩니다.

slice() 함수의 형식은 다음과 같습니다.

구문

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

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

매개변수

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

slice() 함수는 배열과 문자열뿐만 아니라 다양한 데이터 타입에 대해서도 활용될 수 있으며, 다양한 상황에서 유용하게 사용될 수 있습니다. 다음은 slice() 함수의 다양한 활용 사례입니다.

배열의 부분 복사본 만들기

slice() 함수를 사용하여 배열의 부분 복사본을 만들어 다른 배열에 저장하거나 배열을 분할할 수 있습니다.

JavaScript 
const originalArray = [1, 2, 3, 4, 5];
const copyArray = originalArray.slice(); // 원본 배열의 복사본을 만듭니다.
const subArray = originalArray.slice(1, 4); // [2, 3, 4]

배열 요소 정렬 및 필터링

slice() 함수를 사용하여 배열을 정렬하거나 필터링할 때, 원본 배열의 무결성을 유지하면서 작업을 수행할 수 있습니다.

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

// 원본 배열을 복사하여 새로운 배열을 생성하고 그 복사본을 sort() 함수로 정렬합니다.
const sortedArray = unsortedArray.slice().sort();
// sortedArray는 [1, 2, 3, 4, 5]가 됩니다.

// 정렬된 배열의 복사본을 만들고, filter() 함수를 적용하여 짝수만 추출합니다.
const filteredArray = sortedArray.slice().filter(item => item % 2 === 0);
// filteredArray는 [2, 4]가 됩니다.
자바스크립트 filter() 함수 – 개념 정리 및 사용 예제
자바스크립트 sort() 함수

문자열 처리

slice() 함수는 문자열에서 특정 부분을 추출하여 새로운 문자열을 생성하거나 문자열을 자를 때 유용합니다.

JavaScript 
const text = "Hello, World!";
const slicedText = text.slice(7, 12); // "World"

참조: 배열과 관련된 프로토타입 메서드로 문자열 다루기

문자열은 자바스크립에서 문자 배열로 취급되므로, slice() 함수뿐만 아니라 문자열에 대해 배열과 관련된 프로토타입 메서드 중 일부를 사용할 수 있습니다.

  • length 속성: 문자열의 길이를 반환합니다.
  • charAt(index) 또는 문자열 인덱싱: 문자열에서 특정 위치의 문자를 가져옵니다.
  • substring(startIndex, endIndex): 문자열에서 특정 범위의 문자열을 추출합니다.
  • split(separator): 문자열을 주어진 구분자로 나누어 배열로 반환합니다.
  • join(separator): 배열을 문자열로 변환하며, 배열 요소를 지정된 구분자로 연결합니다.

하지만 배열의 변경 및 조작과 관련된 메서드 중 일부(예: push(), pop(), splice())는 문자열에 대해서는 직접 적용할 수 없습니다.

명세서

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

브라우저 호환성

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기