splice 메서드

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
splice() 메서드는 mutable 메서드로 원본 배열이 수정된다는 점에 주의한다.

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.splice(1, 1);

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

• arr.splice(1, 1)
  • 첫 번째 인자로 전달한 값의 인덱스부터 두 번째 인자로 전달한 갯수만큼 배열 요소를 제거한다.
  • 배열 arr의 1번 인덱스부터 1개를 제거해서 배열로 반환한다.
  • 제거한 요소를 배열로 반환한다.

const arr = [2, 3, 4, 5];
const arr2 = arr.splice(0, 0, 'a');

console.log(arr);  // ['a', 2, 3, 4, 5];
console.log(arr2);  // []

• arr.splice(0, 0, 'a')
  • 첫 번째 인자로 전달한 값의 인덱스부터 두 번째 인자로 전달한 갯수만큼 배열 요소를 제거한다. 그리고 세 번째 인자로 전달한 값을 추가한다.
  • 제거한 요소를 배열로 반환한다.
  • 두 번째 인자가 0이므로 아무 배열 요소도 제거되지 않고, 세 번째 인자 ‘a’ 값을 0번 인덱스에 추가한다.

const arr = ['a', 2, 3, 4, 5];
const arr2 = arr.splice(0, 1, 'b');

console.log(arr);  // ['b', 2, 3, 4, 5];
console.log(arr2);  // ['a']

• arr.splice(0, 1, 'b')
  • 첫 번째 인자로 전달한 값의 인덱스부터 두 번째 인자로 전달한 갯수만큼 배열 요소를 제거한다. 그리고 세 번째 인자로 전달한 값을 추가한다.
  • 제거한 요소를 배열로 반환한다.
  • 두 번째 인자가 1이므로 0번 인덱스부터 1개가 제거되고, 세 번째 인자 ‘b’ 값을 0번 인덱스에 추가한다.

참고

• Array.prototype.splice