[ javascript ] splice와 slice

splice

splice 메서드는 배열의 중간에 있는 요소를 제거하거나, 배열의 중간에 어떠한 요소를 추가할 때 사용할 수 있다. splice는 3개의 값을 받을 수 있다.

1개의 값만 입력 하면 배열의 해당 인덱스부터 배열의 끝까지 모든 요소를 제거하고 제거한 요소를 리턴한다.

let arr = [1,2,3,4,5]

//배열의 1번째 인덱스 부터 배열의 끝까지 삭제가 되었고, 삭제된 요소가 리턴된다.
arr.splice(1) // [2,3,4,5]

//배열을 찍어 보면 배열의 0번째 요소만 남아있는 것을 볼 수 있다.
console.log(arr) // [1]

2개의 값을 입력 하면 첫번째 값 부터 두번째 값까지의 요소를 제거하고 마찬가지로 제거한 요소를 리턴한다.

let arr2 = [1,2,3,4,5]

//배열의 1번째 인덱스부터 3번째 인덱스까지의 요소들이 제거가 되었고, 제거된 요소가 리턴된다.
arr2.splice(1,3)

//배열을 콘솔에 찍어 보면 배열의 0번째 4번째 요소만 남아 있는 것을 볼 수 있다.
console.log(arr2) // [1,5]

3개의 값을 입력하면 첫번째 입력한 값 부터 두번째 입력한 값 까지의 요소들이 제거가 되고, 세번째 입력한 값이 그 자리에 들어간다.

let arr3 = [1,2,3,4,5]

//배열의 1번째 인덱스 부터 3번째 인덱스까지의 요소들이 제거가 되었고, 제거된 자리에 a가 추가되었지만 제거한 요소만 리턴한다.
arr3.splice(1,3,'a')

//배열을 콘솔에 찍어 보면 배열의 1번째 인덱스 부터 3번째 인덱스가 제거가 되었고, 그 자리에 a가 들어간 것을 볼 수 있다.
console.log(arr3) // [1, 'a', 5]

만약 아무것도 제거 하지 않고 splice로 요소를 추가하고 싶다면 어떻게 해야 할까? 방법은 3개의 값을 입력을 하지만 두번째 값에 0을 입력하는 것이다. 그렇게 되면 아무것도 제거하지 않고 첫번째 입력한 값에 해당하는 인덱스 다음에 3번째 입력한 값이 추가된다.

let arr4 = [1,2,3,4,5]

//아무것도 제거가 되지 않고 3번째로 입력한 값이 첫번째로 입력한 값에 해당하는 인덱스 뒤로 들어간다.아무것도 제거가 되지 않았기 때문에 빈 배열이 리턴된다.
arr4.splice(1,0,'a')

//배열을 콘솔에 찍어 보면 아래와 같이 나오는 것을 볼 수 있다.
console.log(arr4) //  [1,'a',2,3,4,5]