array.slice()와 splice() 차이점에 대해 알아보자

slice(start[,end])  -> 새로운 객체를 배열로 반환한다. 원본 배열 수정 x 

 

start : 추출 시작점에 대한 인덱스

- undifined 일때 : 0부터 slice

- 음수 일때 : 배열 끝에서부터 시작 ex) -3이면 배열의 마지막 3개의 요소 추출

- 배열의 길이와 같거나 큰 수 : 빈 배열 반환

 

end : 추출을 종료할 기준의 인덱스, end를 제외하고 그 전까지 요소만 추출

- 지정하지 않을경우 : 배열 끝까지 slice

- 음수지정 : 배열끝부터 길이를 나타냄 ex) slice(2, -1)이면 세번째 부터 끝에서 두번째 요소까지 추출

- 배열의 길이와 같거나 큰수 : 배열 끝까지 추출 

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

array.slice(3,5) // index번호 3부터 4번까지 추출 [4,5]
array.slice(-3) // [8, 9, 10]
array.slice(-3, 9) // [8, 9]
array.slice(5, -4) // [6]
array.slice(2, 15); // [3,4,5,6,7,8,9,10]

 

 

 

 

splice(start[, deleteCount[, item[, item2], ...]]]) -> 배열의 기존 요소를 삭제, 교체 해서 원본 배열 자체를 수정한다.

 

 

start : 배열의 변경을 시작할 인덱스

- 음수 : 배열의 끝부터 요소 카운트

- 배열길이보다 큰 수 : 실제 시작 인덱스는 배열의 길이로 설정

 

deleteCount : 배열에서 제거할 요소의 수

- start부터 모든 요소를 제거

- 0이하의 수 : 제거 x

 

[, item[, item2], ...]]] : 배열에 추가할 요소

- 지정하지 않으면  splice는 요소 제거만 수행

var arr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

var arr1 = arr.splice(10, 2, 'a', 'b', 'c'); 

console.log(arr); // [1,2,3,4,5,6,7,8,9,10,'a','b','c'];
console.log(arr1); // [11,12]

//splice함수를 사용하면 원본 배열인 arr가 변경된다.
//10번째부터 2개의 요소를 삭제하고 abc추가,
//11,12가 삭제되고 삭제된 요소는 arr1에 담긴다.


----
var arr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

var arr1 = arr.splice(5, 0 ,'add'); 
console.log(arr); //[1,2,3,4,5,'add',6,7,8,9,10,11,12]
console.log(arr1); //[]
//deleteCount가 0보다 작은 수 이면 어떤 요소도 삭제 되지 않음
//arr1은 빈 배열 반환