ECMAScript, 배열의 splice와 slice 메소드

자바스크립트 코드를 작성하다 보면 배열을 이용하는 경우가 많은데, 늘 splice와 slice 메소드가 헷갈린다. 이번 기회에 정리해두려 한다.

1. Array.prototype.splice

기존 배열을 변형하는 메소드다.

Array.prototype. splice  (start, deleteCount, items...)

배열의 start번째부터 deleteCount개 만큼의 요소를 '제거'한 다음, 그 자리에 items를 '삽입'한다. '제거'된 요소의 배열을 리턴한다.

const array = [1, 2, 3, 4, 5, 6];

array.splice(0, 1); // [ 1 ]
console.log(array); // [ 2, 3, 4, 5, 6 ]

array.splice(3,1);  // [ 5 ]
console.log(array); // [ 2, 3, 4, 6 ]

array.splice(0,2);  // [ 2, 3 ]
console.log(array); // [ 4, 6 ]

array.splice(1, 0, 'a', 'b', 'c', 'd'); // []
console.log(array); // [ 4, 'a', 'b', 'c', 'd', 6 ]

2. Array.prototype.slice

기존 배열을 변형하지 않고 기존 요소를 참조하는(얕은 복사) 새로운 배열을 만들어 리턴하는 함수다.

Array.prototype. slice  (begin, end )

배열의 begin번째 요소부터 end번째 요소까지의 값을 참조하는 새로운 배열을 만들어 리턴한다

const array = [1, 2, 3, 4, 5, 6];

array.slice(4);     // [5, 6]
console.log(array); // [1, 2, 3, 4, 5, 6]

array.slice(1, 4); // [2, 3, 4]

array.slice(3, 5); // [4, 5]

array.slice(); // [1, 2, 3, 4, 5, 6]