Slice()

slice()는 배열의 시작 인덱스부터 끝 인덱스(끝 인덱스 미포함)까지 얕은복사를 하여 새로운 배열로 반환한다. 새로운 배열을 반환하므로 원본배열은 변화하지 않는다.

구문

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

예시

const names = ['Cecilia', 'Den', 'Sherlock', 'John', 'Microft'];

console.log(names.slice(2)) //[ 'Sherlock', 'John', 'Microft' ] => 시작인덱스 2부터 끝가지 반환

console.log(names.slice(-2)) // [ 'John', 'Microft' ] => 배열끝에서 요소 2개 반환

console.log(names.slice(5)) // [] => 원본 배열의 길이보다 길어서 빈 배열 반환

console.log(names.slice(2,4)) //[ 'Sherlock', 'John' ] => 시작인덱스2부터 인덱스4전까지(=인덱스3) 반환

// const newNames = names.slice(2,-1) //[ 'Sherlock', 'John' ] => 2번인덱스부터 끝에서 -1
// console.log(newNames) 

원본 배열과 새 배열은 동일한 객체를 참조한다. 그러므로 참조된 객체가 변경되면 새 배열도 참조된 객체에 따라 변경된다.

const names = ['Cecilia', 'Den', 'Sherlock', 'John', 'Microft']; //참조된 배열


const newNames = names.slice(2,4);
console.log(newNames);  //[ 'Sherlock', 'John' ] => 새 배열


// names에서 'Cecilia'를 삭제하면(참조된 배열을 변경하면), 
console.log(newNames);  //[ 'John' ] => 새 배열도 변경된다.

slice()와 splice() 간단비교

slice()와 splice()와 비슷하게 생겨서(?) 헷갈리기도 하는데, 간단하게 비교해보자.

splice(start, deleteCount, addItem)

• start부터 deleteCount개 삭제한다.
• addItem을 추가한다.
• 원본 배열을 수정해서 반환한다.

slice(start, end)

• start부터 end까지 자른다.
• 원본 배열을 얕은 복사해서 새로운 배열로 반환한다.