splice 메서드 유의점

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

splice()와 slice()의 차이점은 기존 배열의 변경 유무에 있다.
splice()는 기존 배열을 변경하지만 slice()는 기존 배열을 복사한 새로운 배열을 반환한다.

splice() 메서드는 첫번째 매개변수는 배열의 변경을 시작할 인덱스이다. 여기에는 음수가 들어갈 수 있는데 음수인 경우 배열의 끝에서부터 요소를 세어나가게된다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);

// result: ["Jan", "Feb", "March", "April", "June"]

const months = ['Jan', 'March', 'April', 'June'];
months.splice(-1, 1);
console.log(months);

// result: ["Jan", "Feb", "March", "April", "June"]

두번째 매개변수에는 삭제할 요소의 갯수가 들어간다.
헷갈렸던 부분은 첫번째 매개변수에 음수가 오고 두번째 매개변수에 삭제할 요소가 들어왔을 때 어떻게 동작하는지였다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(-1,2);
console.log(months);

// expected: ["Jan", "Feb", "March"]
// result: ["Jan", "Feb", "March", "April"]

예상과 결과가 달랐다.

이유는 첫번째 요소에 음수가 오게되면 배열의 끝에서부터 시작해서 요소를 삭제하는 것이다. 즉, 기준점에서 요소를 삭제하는 방향(오른쪽 방향)은 변하지 않는다. 앞에서부터 기준점을 잡을 것인지 뒤에서부터 기준점을 잡을 것인지에 차이가 있을 뿐이다.