slice()와 splice()의 차이점을 알아볼려고한다

두개다 배열을 다룰 때 자주 사용하는 함수이지만, 차이점은 엄청 크다.

1. Array.prototype.slice()

slice(start[,end])

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

• default로 0
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
• 배열의 길이와 같거나 큰 수를 지정한 경우 빈 배열을 반환한다

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

• 지정하지 않을 경우: 배열의 끝까지 slice
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2,-1)를 하면 세번째부터 끝에서 두번째 요소까지 추출
• 배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출.

반환값: 추출한 요소를 포함한 새로운 배열

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
var arr1 = arr.slice(3, 5);			// [4, 5]
var arr2 = arr.slice(undefined, 5);		// [1, 2, 3, 4, 5]
var arr3 = arr.slice(-3);			// [8, 9, 10]
var arr4 = arr.slice(-3, 9);			// [8, 9]
var arr5 = arr.slice(10);			// []
var arr6 = arr.slice(4);			// [5, 6, 7, 8, 9, 10]
var arr7 = arr.slice(undefined);		// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr8 = arr.slice(5, -4);			// [6]
var arr9 = arr.slice(2, 15);			// [3, 4, 5, 6, 7, 8, 9, 10]
 
console.log(arr);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1);	// [4, 5]
console.log(arr2);	// [1, 2, 3, 4, 5]
console.log(arr3);	// [8, 9, 10]
console.log(arr4);	// [8, 9]
console.log(arr5);	// []
console.log(arr6);	// [5, 6, 7, 8, 9, 10]
console.log(arr7);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr8);	// [6]
console.log(arr9);	// [3, 4, 5, 6, 7, 8, 9, 10]

2. Array.prototype.splice()

spice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 이 메소드는 원본 배열 자체를 수정한다.

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

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

• 음수를 지정한 경우: 배열의 끝에서부터 요소를 센다
• 배열의 길이보다 큰 수를 지정한 경우: 실제 시작 인덱스는 배열의 길이로 설정
• 절대값이 배열의 길이보다 큰 경우: 0 으로 세팅

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

• 생략/ 값이 array.length - start보다 큰 경우: start부터의 모든 요소를 제거.
• 0 이하의 수를 지정: 어떤 요소도 제거되지 않는다.

item1, 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개의 요소를 삭제하고 'a', 'b', 'c'를 추가했고, 11과 12가 삭제되고 이 삭제된 요소들의 배열은 arr1변수 추가된다.