slice와 splice의 차이점

slice

배열의 begin부터 end까지에(end는 미포함) 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본의 배열은 바뀌지 않는다.

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

• begin : 시작점 인덱스
• end : 종료 지점 인덱스 (end 인덱스는 제외하고 추출)
• 리턴값 : 추출한 요소를 포함한 새로운 배열 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// ["camel", "duck"]

console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// ["duck", "elephant"]

console.log(animals.slice(2, -1));
// ["camel", "duck"]

console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]

console.log(animals);
// 원본 배열은 바뀌지 않음
// ['ant', 'bison', 'camel', 'duck', 'elephant']

기존 배열의 일부 반환

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// ['Orange','Lemon']

 

 

splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start : 배열의 변경을 시작할 인덱스
• deleteCount : 배열에서 제거할 요소의 수
• item1, item2,.. : 배열에 추가할 요소 (지정하지 않으면 제거만 한다)
• 리턴값 : 제거한 요소를 담은 배열 (아무 값도 제거하지 않았다면 빈 배열을 리턴)

 

추가 또는 교체하는 경우 예시

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// index 1에 추가
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// index 4에 1개를 교체
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]

배열을 자르는 경우

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(3, 2);

console.log(arr); // [1, 2, 3]
console.log(arr1); // [4, 5]

arr에는 원본 배열이 바뀌어 잘린 결과가 들어가고

arr1에는 제거된 값이 들어간다.

 

slice와 splice의 차이

• slice는 원본 배열이 바뀌지 않고 splice는 원본 배열을 바꾼다.
• 배열을 자를 수 있다는 점에서 비슷하지만 splice는 교체 또는 새로운 요소 추가도 가능하다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice