Array.prototype.slice()
-
mdn 정의
"The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified."-
=> slice()메서드는 기존 배열의 일부를 복사하여 새로운 배열을 반환하는데 이 새로운 배열은 기존 배열의 start에서 시작해 end(end는 미포함)까지 선택된 아이템이 담기게 된다. 기존의 배열은 수정되지 않는다.
( start와 end는 아이템의 index를 의미.)
-
=> 간단히 말해 '배열의 일부를 복제한 새로운 배열을 return한다.'고 생각하면 된다.
-
-
ps ) splice VS slice
-
splice는 기존의 배열 수정하여 기존 배열을 반환하는 한편, slice는 기존의 배열은 그대로 두고 새로운 배열을 반환한다.
-
Syntax
slice()
slice(start) //
slice(start, end)-
start (optional)
- 음수가 사용될 수 있는데, 이경우 배열의 끝에서 부터 거꾸로 복제한다. 예를들어 arr.slice(-2)를 하게 되면 배열의 끝부터 마지막 2개의 아이템을 추출한 배열이 반환된다.
- start가 undefined라면, slice메서드는 0번 index부터 시작한다.
- start가 배열의 길이보다 큰 경우엔, 빈배열을 반환한다.
-
end (optional)
-
slice는 end를 포함하지 않고 추출하는데, 예를 들어 slice(1,4)의 경우 4번째 index를 제외한 1번,2번,3번 index의 아이템이 담긴 배열을 반환하다.
-
end에도 음수가 사용될 수 있는데, 이 경우도 배열의 끝에서부터 거꾸로 카운팅한다고 생각하면된다. 예를 들어 slice(2,-1)를 하면 배열의 2번째 index에서 시작해 배열의 마지막 인덱스에서 1개를 제외한 아이템까지 추출한 배열을 반환한다.
-
만약 end가 생략되거나 배열의 길이보다 크다면, slice는 배열의 끝까지 추출한다.
-
📌예
let fruits = ['🍌','🍋','🍎'];
//Q. start와 end 모두 지정하지 않으면?
const fruits0 = fruits.slice();
console.log(fruits0); //output: ['🍌', '🍋', '🍎']
//-> start가 없으므로 0번 index부터 시작하고 end도 없으므로 배열의 끝까지 추출된 배열을 반환한다.
//Q. 바나나와 레몬만 담긴 새로운 배열을 만들고 싶다면?
//방법 1)
const fruits1 = fruits.slice(0,2);
console.log(fruits1); //output: ['🍌', '🍋']
//방법 2)
const fruits2 = fruits.slice(0,-1);
console.log(fruits2); //output: ['🍌', '🍋']
//Q. 사과만 담긴 배열을 만들고 싶다면?
//방법 1)
const fruits3 = fruits.slice(-1);
console.log(fruits3); //output: ['🍎']
//방법 2)
const fruits4 = fruits.slice(2);
console.log(fruits4); //output: ['🍎']
참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
