[JavaScript]배열의 요소를 삭제하는 방법

JavaScript에서 배열의 요소를 삭제하는 remove 함수가 존재하지 않습니다.

 

remove 함수는 존재하지 않지만, 배열의 요소를 삭제할 수 있는 다양한 방법이 존재합니다.

 

이번 포스팅에서는 JavaScript에서 배열의 요소를 삭제하는 방법을 정리합니다.

 

목차

1. pop 함수를 사용하여 배열의 마지막 요소를 삭제
2. shift 함수를 사용하여 배열의 첫 번째 요소를 삭제
3. splice 함수를 사용하여 배열 요소를 삭제
4. filter 함수를 사용하여 조건에 일치하는 새 배열을 생성
5. delete 연산자를 사용하여 배열 요소를 삭제

---

pop 함수를 사용하여 배열의 마지막 요소를 삭제

pop() 함수는 배열의 마지막 요소를 삭제합니다.

반환 값은 삭제된 요소의 값입니다.

var arr = ['A', 'B', 'C', 'D'];

console.log('*****pop 함수 호출 전 배열의 길이*****');
console.log(arr.length); 
// 4

var popResult = arr.pop();

console.log('*****pop 함수 호출 후 배열의 길이*****');
console.log(arr.length); 
// 3

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "B", "C"]

console.log('*****popResult의 값*****');
console.log(popResult);
// D

 

배열의 요소가 없는 빈 배열을 삭제하는 경우 반환 값은 undefined입니다.

var arr = [];

var popResult = arr.pop();

console.log('*****popResult의 값*****');
console.log(popResult);
// undefined

---

shift 함수를 사용하여 배열의 첫 번째 요소를 삭제

shift() 함수는 배열의 첫 번째 요소를 삭제합니다.

반환 값은 pop() 함수와 동일합니다.

var arr = ['A', 'B', 'C', 'D'];

var shifhtResult = arr.shift();

console.log('*****arr의 값*****');
console.log(arr);
// ["B", "C", "D"]

console.log('*****shifhtResult의 값*****');
console.log(shifhtResult);
// A

반응형

---

splice() 함수를 사용하여 배열 요소를 삭제

splice() 함수를 사용하여 배열의 요소를 삭제할 수 있습니다.

 

첫 번째 인수는 제거할 배열 요소의 위치(인덱스)를 설정합니다.

두 번째 인수는 제거할 배열 요소의 개수를 설정합니다.

 

즉, 설정한 배열 요소의 위치부터 특정 개수만큼 배열의 요소를 삭제합니다.

 

반환 값은 삭제한 배열의 요소를 담은 배열입니다.

var arr = ['A', 'B', 'C', 'D'];

var splicetResult = arr.splice(1, 2);

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "D"]

console.log('*****splicetResult의 값*****');
console.log(splicetResult);
// ["B", "C"]

 

splice() 함수에서 첫 번째 인자를 0으로 지정하고 두 번째 인자를 생략하면 모든 배열의 요소가 삭제됩니다.

var arr = ['A', 'B', 'C', 'D'];

var splicetResult = arr.splice(0);

console.log('*****arr의 값*****');
console.log(arr);
// []

console.log('*****splicetResult의 값*****');
console.log(splicetResult);
// ["A", "B", "C", "D"]

 

 

▶ 특정 값인 배열의 요소를 삭제

for문으로 배열의 요소를 순회하여 특정 값인 배열의 요소를 splice() 함수를 사용하여 삭제합니다.

 

i--; 코드를 작성한 이유는 splice() 함수가 실행 후 배열의 요소가 즉시 삭제되고 배열의 길이가 변경되기 때문입니다.

var arr = [1, 2, 3, 4, 5, 5, 6, 7, 8, 5, 9, 0];

for(var i = 0; i < arr.length; i++){ 
  if (arr[i] === 5) { 
    arr.splice(i, 1); 
    i--; 
  }
}

console.log(arr);
// [1, 2, 3, 4, 6, 7, 8, 9, 0];

---

filter() 함수를 사용하여 조건에 일치하는 새 배열을 생성

filter() 함수는 pop(), shift(), splice() 함수와는 다르게 기존 배열을 변경하지 않고 새로운 배열을 반환합니다.

 

아래 코드는 배열의 요소를 순회하면서 배열 요소의 값이 3 미만인 요소를 담은 배열을 반환합니다.

var arr = [1, 2, 3, 4, 5];

var filterArr = arr.filter(function(data) {
  return data < 3;
});

console.log(filterArr);
// [1, 2]

---

delete 연산자를 사용하여 배열 요소를 삭제

delete 연산자를 사용하여 특정 배열 요소를 삭제할 수 있습니다.

 

하지만, 배열의 길이는 그대로입니다.

 

delete 연산자는 배열 요소의 삭제가 아닌 값을 빈 값으로 변경하기 때문에 삭제보다는 변경에 가까운 개념입니다.

var arr = [1, 2, 3, 4, 5];

delete arr[0];

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

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

console.log(arr[0]);
// undefined