JavaScript에서 배열의 특정 요소를 삭제하려면 indexOf() 메서드로 해당 요소의 인덱스(위치)를 먼저 찾은 뒤, splice() 메서드를 사용해 그 위치의 요소를 제거하는 방식이 가장 기본적입니다.
1단계: indexOf()로 요소의 인덱스 찾기
indexOf() 메서드는 배열에서 찾고자 하는 값이 처음 등장하는 인덱스를 반환합니다. 만약 해당 값이 배열에 존재하지 않으면 -1을 반환하므로, 삭제 전에 반드시 이 값을 확인해야 안전하게 처리할 수 있습니다.
2단계: splice()로 요소 삭제하기
splice(index, deleteCount) 메서드는 첫 번째 인수로 시작 위치, 두 번째 인수로 삭제할 요소의 개수를 받습니다. 따라서 특정 요소 하나만 삭제하고 싶다면 splice(index, 1)처럼 호출하면 됩니다.
예제 코드
<html>
<body>
<script>
var array = [40, 20, 70, 50];
var index = array.indexOf(70);
document.write("Original array: " + array);
if (index > -1) {
array.splice(index, 1);
}
document.write("<br>New array after deletion: " + array);
</script>
</body>
</html>실행 결과
Original array: 40,20,70,50 New array after deletion: 40,20,50
추가 팁: 중복된 요소가 여러 개일 경우
배열에 동일한 값이 여러 개 있고 모두 삭제하고 싶다면, 원본 배열을 변경하지 않는 filter() 메서드를 활용하는 것이 좋습니다.
var numbers = [10, 20, 30, 20, 40];
var result = numbers.filter(function(item) {
return item !== 20;
});
console.log(result); // [10, 30, 40]정리
- indexOf() + splice(): 원본 배열을 직접 수정하며 단일 요소를 삭제하는 가장 일반적인 방법
- filter(): 원본 배열을 유지하면서 조건에 맞는 요소만 걸러 새로운 배열을 생성하는 방법
두 방식의 차이를 이해하고 상황에 맞게 선택하면 더 안전하고 깔끔한 코드를 작성할 수 있습니다.