JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter)

 

예전에 내장함수들 공부할때 기초는 기초일뿐 이라고 생각하였던 적이 있다.

 

하지만 실무에서 배열을 동적으로 삭제하는 경우에는 보통 인덱스를 많이 사용한다.

그래서 다시한번 가장 기초적인 배열 함수 splice 와 filter 을 한번 더 정리해보았다.

 

실제로 응용했던 코드가 궁금하시다면? (아래 포스팅 클릭 ↓↓↓)

React(72) map()으로 input 추가 삭제하기

 

splice vs slice 기억이 가물가물하시다면...? (아래 기초 정리한 포스팅 클릭 ↓↓↓)

javaScript - slice와 splice 비교하기

 

 

---

JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter)

여기서는 기본 지식이 있다는 가정하에 기능적인 설명만 정리해 놓았다.

기본 원리는 삭제를 원하는 인덱스를 이용해서 배열을 재정렬하는 것이다.

 

 

Splice

const array = [1, 2, 3, 4, 5]; // 3 을 제거 하고 싶다. 
const deletedIndex = 2	       // 3의 인덱스는 2 이다.
array.splice(deletedIndex, 1); // 삭제할 인덱스, 1 개만 삭제 (즉, 3만 삭제)

console.log(array); // [1, 2, 4, 5] // 3의 뒤에 줄서있던 녀석들은 한칸씩 앞땅겨왔다.

 

 

Filter

var arr = [1, 2, 3, 4, 5]; 	// 이번엔 2를 없애볼 거다.
var deletedIndex = 1;		// 2의 인덱스는 1이다.
arr = arr.filter(function(_, index) { // filter 안에 인자로 함수를 받고, index 만 필요하니 명시해주자
    return index !== deletedIndex     // 배열을 돌며 인덱스1 이 아닌 나머지만 다시 소집한다
});

console.log(arr) // [1, 3, 4, 5]      // 2가 빠진 나머지만 소집됬다.

 

 

**  Filter 란 (더 자세히 알아보기)

index 값을 어디다가 넣을 수 있는지가 궁금해서 찾아보았다.

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

 

 

 

ref : https://www.delftstack.com/ko/howto/javascript/javascript-remove-index-from-an-array/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter