[javascript] 자바스크립트 배열 요소 삭제 (slice, splice, delete, filter 비교 정리)

 

 

 

안녕하세요.

오늘은 자바스크립트에서 배열의 특정 요소를 삭제하는 방법들을 포스팅하려고 합니다.

배열의 요소를 삭제하는 방법은 크게 4가지로 정리를 하였습니다. 하나씩 예제 소스 코드와 함께 알아보도록 하겠습니다.

 

---

1. slice

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    // data list
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    /**
     * slice
     */
    // 2번 요소에서부터 1개 삭제
    var slice = dataList.slice(2, 4);
    // 삭제 대상 요소만 배열로 반환
    console.log( slice );
    // 원본 배열은 그대로 유지
    console.log( dataList );
    
});
</script>

먼저 slice 기능에 대한 예제 소스 코드입니다. 배열 데이터를 간단하게 만들었고, 해당 배열의 요소를 삭제하였습니다. 

 

예시 : arr.slice(2, 4)

특징 : 삭제 대상 요소들을 반환, 원본 배열 데이터는 변하지 않음

start : 삭제 대상 시작 인덱스

end : 삭제 대상 마지막 인덱스 (end 인덱스는 해당되지 않음)

// 2번 요소에서부터 1개 삭제
var slice = dataList.slice(2, 4);

위의 내용과 같이 배열의 2번째부터 4번째까지 삭제를 하였습니다.

slice는 원본 배열을 변경하지 않고 삭제되는 2번, 3번 값만 반환하게 됩니다.

 

* 실행 결과

첫 번째 로그 : 'c' (2번 인덱스), 'd' (3번 인덱스) 값을 반환

두 번째 로그 : 변경되지 않은 원본 배열

 

 

---

2. splice

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    // data list
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    /**
     * splice
     */
    // 2번 요소로부터 1개 삭제
    var splice = dataList.splice(2, 2);
    // 삭제 대상 요소만 배열로 반환
    console.log( splice );
    // 원본 배열 변경됨
    console.log( dataList );
});
</script>

splice는 slice와 유사하지만 기능과 결과가 조금 다르게 나옵니다.

 

예시 : are.splice(2,1)

특징 : 삭제 대상 요소들을 반환, 원본 배열 데이터가 변함

start : 삭제 대상 시작 인덱스

end : 삭제 대상 요소의 인덱스로부터 삭제할 수 (start만 입력시 해당 인덱스로부터 뒤로 모두 삭제)

// 2번 요소로부터 1개 삭제
var splice = dataList.splice(2, 2);

위의 소스 코드를 보게 되면 slice는 end 인덱스 값이 삭제 대상의 마지막 인덱스인데 splice는 start 인덱스 값에서 삭제할 건 수를 넣는다는 차이가 있습니다. 추가로 splice는 원본 배열 값도 같이 변경을 하게 됩니다.

 

* 실행 결과

첫 번째 로그 : 'c' (2번 인덱스), 'd' (3번 인덱스) 값을 반환

두 번째 로그 : 변경된 원본 배열

 

---

3. delete

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    // data list
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    /**
     * delete
     */
    // 1번 요소 삭제
    delete dataList[1]
    // 1번 요소는 삭제되고 undefined로 변경됨
    console.log( dataList );
});
</script>

예시 : delete arr [1]

특징 : 삭제 대상 요소를 삭제하고 삭제된 요소는 undefined로 변경됨, 인덱스 위치에는 undefined로 값이 유지됨

 

delete는 slice, splice와 조금 다르게 사용을 합니다.

// 1번 요소 삭제
delete dataList[1]

위의 예제와 같이 삭제를 하게 되면 배열에서 해당 인덱스의 값만 비워주게 됩니다.

 

* 실행 결과

로그 : 첫 번째 인덱스의 값은 비워진 상태

 

 

---

4. filter

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    // data list
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    /**
     * 
     */
    // 특정 값 a를 대상으로 삭제하기
    dataList = dataList.filter(d => (d.indexOf('a') === -1))

    console.log(dataList);
});
</script>

filter도 마찬가지로 사용하는 방식이 조금 다릅니다. filter를 이용하여 배열값을 하나씩 검사해서 삭제할 'a' 값을 제외하고 나머지 값들을 반환하도록 합니다.

 

// 특정 값 a를 대상으로 삭제하기
dataList = dataList.filter(d => (d.indexOf('a') === -1))

filter를 이용한 배열의 특정 요소 삭제하는 예시입니다.

 

* 실행 결과

특정 요소 값인 'a'를 제외하고 나머지를 반환한 결과입니다.

 

 

반응형

---

마무리

오늘은 이렇게 배열의 요소를 삭제하는 방법들을 알아봤습니다. 저는 개인적으로 마지막 filter를 이용한 방법이 제일 깔끔한 것 같고 실제 업무에서도 많이 사용하는 방법입니다. 물론 상황에 따라 다른 방법들을 사용하기도 합니다.

이 밖의 다른 방법이 있다면 추가로 포스팅하도록 하겠습니다.

 

 

오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.