JavaScript - 배열 slice() 사용법 및 예제

구문

자바스크립트의 slice 함수는 원본 배열은 유지하고 begin부터 end까지(end 미포함)의 새로운 배열 객체를 반환합니다.

arr.slice([begin[, end]])

파라미터

1. begin(Optional)
   
   • 추출 시작할 배열의 index
   • 음수 index일 경우 배열의 끝에서부터의 길이를 의미
     • 예) slice(-2)는 배열의 마지막 2개의 요소를 추출
   • 값이 undefined일 경우 index 0과 동일 동작
   • 배열의 길이보다 큰 index일 경우 빈 배열 반환
2. end(Optional)
   • 추출 종료할 배열의 index, end index를 제외 하고 추출 
     • 예) slice(1, 4)는 두번째 요소부터 네번째 요소까지 (1, 2, 3) 추출
   • 음수 index일 경우 배열의 끝에서부터의 길이를 의미
     • 예) slice(2, -1)는 세번째 요소부터 끝에서 두번째 요소까지 추출
   • 값이 생략 될 경우 배열의 끝(array.length)까지 추출
   • 배열의 길이보다 큰 index일 경우도 마찬가지로 배열의 끝(array.length)까지 추출

반환 값

추출한 요소를 포함한 새로운 배열.

예제

1. 배열의 일부를 반환하는 새로운 배열

const numbers = [1, 2, 3, 4, 5];
// 양수 index    0, 1, 2, 3, 4
// 음수 index   -5,-4,-3,-2,-1

console.log(numbers.slice()); // index 0부터 추출(0, undefined, null 동일 동작)
// expected : [1, 2, 3, 4, 5];

console.log(numbers.slice(1)); // index 1부터 추출
// expected : [2, 3, 4, 5];

console.log(numbers.slice(-2)); // 마지막요소부터 마지막에서 두번째 요소까지 추출
// expected : [4, 5];

console.log(numbers.slice(99)); // 배열의 길이보다 클 경우 빈 배열
// expected : [];


console.log(numbers.slice(1, 4)); // index 1부터 index 4까지(index 4제외) 추출
// expected : [2, 3, 4];

console.log(numbers.slice(2, -1)); // index 2부터 마지막에서 첫번째 요소까지(마지막에서 첫번째 요소 제외) 추출
// expected : [3, 4];

console.log(numbers.slice(2, 99)); // index 2부터 마지막에서 요소까지 추출(end가 배열의 길이보다 큼)
// expected : [3, 4, 5];

 

음수 index와 end의 개념이 조금 헷갈리기 쉬우니 주의 해야합니다.