JavaScript - 배열의 특정 요소 삭제 방법

배열에서 특정 Index의 요소를 삭제하는 방법을 소개합니다.

1. splice()로 배열에서 특정 Index의 요소 삭제

splice(start, deleteCount)는 배열에서 start Index에서 deleteCount 개수만큼 요소를 삭제합니다.

예를 들어 splice(2, 1)은 배열의 Index 2에서 1개 요소를 삭제합니다. 그리고, splice() 함수로 요소를 삭제하면 삭제된 요소 개수만큼 배열의 길이 또한 줄어듭니다.

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

arr.splice(2, 1);
console.log(arr);

arr.splice(1, 1);
console.log(arr);

Output:

[ 1, 2, 4, 5 ]
[ 1, 4, 5 ]

2. delete로 배열에서 특정 Index의 요소 삭제

delete arr[index]arr[index]를 제거합니다. 하지만 splice()와 다른 점은, 요소는 제거되지만 배열의 길이는 줄어들지 않습니다. 배열을 확인해보면 요소가 삭제되고 empty(undefined)로 채워져 있습니다.

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

delete arr[2];
console.log(arr);
console.log("len: " + arr.length);

delete arr[1];
console.log(arr);
console.log("len: " + arr.length);

Output:

[ 1, 2, <1 empty item>, 4, 5 ]
len: 5
[ 1, <2 empty items>, 4, 5 ]
len: 5

만약 빈 값(undefined)을 제거하여 배열의 길이를 줄이고 싶다면, 아래와 같이 filter() 등으로 빈 값(undefined)을 정리하고 새로운 배열을 만들어야 합니다. 새로운 배열은 undefined를 포함하지 않으며, 제거된 요소 개수만큼 길이가 줄었습니다.

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

delete arr[2];
delete arr[1];
console.log(arr);
console.log("arr.length: " + arr.length);

let newArr = arr.filter((element) => element !== undefined);
console.log(newArr);
console.log("newArr.length: " + newArr.length);

Output:

[ 1, <2 empty items>, 4, 5 ]
arr.length: 5
[ 1, 4, 5 ]
newArr.length: 3

배열의 빈 값을 제거하는 자세한 내용은 JavaScript - 배열에서 빈 값, undefined, null 제거하기를 참고하세요.

3. pop()으로 마지막 요소 제거

pop()은 배열의 마지막 요소를 제거합니다. 요소가 제거될 때 배열의 길이도 줄어듭니다.

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

arr.pop();
console.log(arr);

arr.pop();
console.log(arr);

Output:

[ 1, 2, 3, 4 ]
[ 1, 2, 3 ]
Loading script...
codechachaCopyright ©2019 codechacha