[JavaScript] JavaScript 배열의 요소를 삭제

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

 

---

참고 자료 : https://developer-talk.tistory.com/153