자바스크립트 배열의 요소 삭제 방법

1. delete

• 자바스크립트 배열은 객체이기 때문에 특정 요소를 삭제하기 위해서 delete 연산자 사용 가능
• 하지만 delete 연산자는 객체의 프로퍼티를 삭제하기 때문에 희소 배열이 됨
  • 희소 배열에 관련된 설명은 '자바스크립트 배열 생성 방법 - 배열 리터럴' 내용 참고
• 이때 length 프로퍼티에는 영향을 주지 않음
• 희소 배열을 만드는 delete 연산자는 권장하지 않음

const arr = [1, 2, 3];

delete arr[1];
console.log(arr);    // [1, empty, 3]

console.log(arr.length);    // 3

2. Array.prototype.splice()

• 희소 배열을 만들지 않으면서 배열의 특정 요소 완전히 삭제 가능
• 삭제 후 legth 프로퍼티 자동 갱신

Array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소 수)

const arr = [1, 2, 3];

arr.splice(1, 1);    // arr[1] 부터 요소 1개 삭제
console.log(arr);    // [1, 3]

console.log(arr.length);    // 2

2.1. Array.prototype.splice() 추가 설명

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

• 요소를 하나도 제거하지 않고, 1번 인덱스에 새로운 요소 추가

  const fruit = ['apple', 'banana', 'orange'];
  
  fruit.splice(1, 0, 'mango');
  console.log(fruit);    // ['apple', 'mango', 'banana', 'orange']

• 2번 인덱스에서 요소 두 개 삭제

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  fruit.splice(2, 2);
  console.log(fruit);    // ['apple', 'mango']

• 1번 인덱스에서 요소 한 개 제거하고, 새로운 요소 추가

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  fruit.splice(1, 1, 'lemon');
  console.log(fruit);    // ['apple', 'lemon', 'banana', 'orange']

• -2번 인덱스에서 요소 한 개 제거

  • -1번 인덱스는 배열 요소의 맨 마지막을 의미

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  fruit.splice(-2, 1);
  console.log(fruit);    // ['apple', 'mango', 'orange']

• 2번 인덱스를 포함해서 이후의 모든 요소 제거

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  fruit.splice(2);
  console.log(fruit);    //  ['apple', 'mango']

2.2. slice() vs. splice()

• (slice와 splice 메서드를 자주 혼동해서 내용 추가)
• slice() 메서드는 어떤 배열의 begin 부터 end까지 (end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환. 원본 배열은 바뀌지 않음. (MDN 참고)

• 1번 인덱스부터 2번 인덱스까지 (2번 인덱스 미포함) 새로운 배열 생성

  • 원본 배열은 바뀌지 않음

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  console.log(fruit.slice(1, 2));    // ['mango']
  console.log(fruit);    // ['apple', 'mango', 'banana', 'orange']

• 2번 인덱스를 포함해서 이후의 모든 요소를 포함한 새로운 배열 생성

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  console.log(fruit.slice(2));    // ['banana', 'orange']
  console.log(fruit);    // ['apple', 'mango', 'banana', 'orange']

• -2번 인덱스를 포함해서 이후의 모든 요소를 포함한 새로운 배열 생성

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  console.log(fruit.slice(-2));    // ['banana', 'orange']
  console.log(fruit);    // ['apple', 'mango', 'banana', 'orange']

• 1번 인덱스부터 -1번 인덱스까지 (-1번 인덱스 미포함) 새로운 배열 생성

  const fruit = ['apple', 'mango', 'banana', 'orange'];
  
  console.log(fruit.slice(1, -1));    // ['mango', 'banana']
  console.log(fruit);    // ['apple', 'mango', 'banana', 'orange']

• slice 메서드와 splice 메서드 차이점

구분	slice	splice
개념	어떤 배열의 처음 인덱스부터 마지막 인덱스까지 (마지막 인덱스 미포함)에 대한 새로운 배열을 반환	배열의 기존 요소를 삭제, 교체하거나 새 요소를 추가하여 기존 배열 변경
원본 배열	변하지 않음	변함
용도	새로운 배열을 반환할 때 사용	기존 배열의 내용을 변경할 때 사용
두 번째 인수의 의미	마지막 인덱스	삭제할 요소 개수

출처 : 모던 자바스크립트 Deep Dive, MDN