[JavaScript] Array 특정 값 삭제하기

Jenna·2023년 3월 14일
0
post-thumbnail

JS에서는 python처럼 array(list)에서 특정값을 삭제할때

list_name.remove(value)

와 같은 편리한 함수가 존재하지 않는다.

그럼 어캐 삭제하란 말임? 에 대한 대답을 정리해봄.

1. shift()

배열의 첫번째 값을 삭제해주는 함수

let array = [1, 2, 3];
array.shift();

console.log(array); // [2,3]

다음과 같이 array 의 처음 항목을 삭제해줌

참고로 삭제된 값은

let value = array.shift();
console.log(value); // 1

를 통해 저장할 수도 있음

2. pop()

배열의 마지막 값을 삭제해주는 함수

let array = [1, 2, 3];
array.pop();

console.log(array); // [1,2]

shift() 와 같이 값 저장 가능

let value = array.pop();
console.log(value); // 3

3. array.length

오잉 이거는 array 길이 구하는거 아니냐?!
물론 맞지만 길이를 조절함으로써 뒤의 값들 탈락시킬 수 있음

let array = [1, 2, 3];
array.length = 2;

console.log(array); // [1,2]

4. array.splice()

왜 계속 앞뒤로만 자름,, 난 중간에 자르고 싶삼,,,
이라고 한다면 이 함수를 사용하시면 됩니다.

let array = [1, 2, 3, 4];
array.splice(1,2);

console.log(array); // [1,4]
splice(자르기 시작 index, 몇개 삭제할건지)

이런 구조로 사용합니다.

그렇다면 arrray.splice(1,0) 이런식으로 사용한다면?
정답은 아무것도 삭제되지 않는다~


그렇다면 splice(0) 을 하면 어떻게 될까요?

let array = [1, 2, 3, 4];
array.splice(0);

console.log(array); // []

array안의 모든 요소가 삭제됨!


삭제와 별개로 splice() 를 사용하면 많은걸 할 수 있는데 대표적으로 insert와 replace가 있음

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

이런식으로 원하는 위치를 요소의 index로 지정해서 배열을 바꿀 수 있음


5. 특정 값 삭제

나는 이런걸 원한게 아니라 value를 기준으로 삭제하고 싶어.. ㅜㅜ
하는 사람들을 위한 특정 값 삭제
사실 나도 이걸 위해서 적은 것..

(1) splice 사용

let value = 2;
let array = [1, 2, 3, 4];

// array for문으로 같은 value가 있는지 찾음
for(let i = 0; i < array.length; i++) {
    if (array[i] === value) {
        array.splice(i, 1);
    }
}
console.log(array); // [1,3,4]

삭제해야 하는 value와 array 내의 value가 일치할 때 해당 index를 반환해서 splice하는 방법

하지만 이런 방법은 array 내에서 같은 값이 여러번 있다면 문제가 생긴다.

let value = 2;
let array = [1, 2, 2, 3, 4];

// array for문으로 같은 value가 있는지 찾음
for(let i = 0; i < array.length; i++) {
    if (array[i] === value) {
        array.splice(i, 1);
    }
}
console.log(array); // [1,2,3,4]

array는 splice가 되며 한칸씩 당겨지지만 i는 그대로 ++ 가 되기 때문에 바로 다음에 중복된 값이 있으면 건너뛰게 되는 것

해결하기 위해서는 반복문 안의 코드를 다음과 같이 바꿔주면 됨

if (array[i] === value) {
  	array.splice(i, 1);
  	i--
}

i를 한번 빼줘서 건너뛰지 않게 만들어 주면 된다.

하지만 뭔가 좀 그런데... 한다면 다음 방법을 사용

(2) filter()

let value = 2;
let array = [1, 2, 3, 4];

array = array.filter((e) => e !== value);

console.log(array); // [1,3,4]

filter() 를 사용해 array에서 삭제해야하는 value와 안겹친 경우만 array로 다시 반환한 것
저는 주로 이 방법을 씁니다.

번외. delete 연산자

아니 모야! remove() 같은거 없다매요! 근데 delete 는 모임!!

let array = [1, 2, 3, 4];
delete array[1] // index로 해야함

console.log(array); // [1, empty, 3, 4]

delete를 사용하면 이렇게 삭제가 되는게 아니고 빈 값으로 replace 되는 것.. 그래서 취지에 맞지 않습니당



참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

profile
FE/Game Dev.

0개의 댓글