JavaScript에서 배열에 담긴 여러 항목 중 특정 값을 가진 항목만 골라서 제거해야 하는 경우가 자주 있습니다. 이럴 때는 크게 두 단계로 처리하면 됩니다. 먼저 indexOf() 메서드로 제거하고 싶은 값의 인덱스(위치)를 찾은 뒤, splice() 메서드를 사용해 해당 위치의 요소를 삭제하는 것입니다.
동작 원리
indexOf(값)— 배열에서 해당 값이 처음 등장하는 인덱스를 반환합니다. 값이 존재하지 않으면-1을 반환합니다.splice(index, 1)— 지정한 인덱스 위치부터 1개의 요소를 제거합니다. 이때 원본 배열이 직접 변경됩니다.
인덱스가 -1보다 클 때만 splice()를 호출하도록 조건문으로 처리하면, 제거하려는 값이 배열에 없는 경우에도 안전하게 동작합니다.
예제 코드
<html>
<body>
<script>
var array = [10, 30, 40, 80, 90];
// 값이 90인 항목의 인덱스 찾기
var index = array.indexOf(90);
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: 10,30,40,80,90 New array after deletion: 10,30,40,80
추가 팁: filter()로 새 배열 만들기
splice()는 원본 배열을 직접 수정합니다. 만약 원본 배열은 그대로 유지한 채 특정 값이 제거된 새 배열을 얻고 싶다면 ES6의 filter() 메서드를 사용하는 것이 좋습니다.
const array = [10, 30, 40, 80, 90]; const newArray = array.filter(item => item !== 90); console.log(newArray); // [10, 30, 40, 80] console.log(array); // [10, 30, 40, 80, 90] (원본 유지)
상황에 따라 원본 수정이 필요하면 indexOf() + splice() 조합을, 불변성(immutability)을 유지해야 하면 filter()를 선택하면 됩니다.