본문 바로가기
Programming/Javascript

JavaScript 배열 Array 삭제에 관한 총 정리

by SheenaKaze 2024. 7. 4.

1. 배열의 첫번째 값 삭제 

 

배열의 첫번째 값을 삭제해주는 함수로써 Array.shift()가 있습니다. 
array.shift();

function solution() {
    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    console.log('삭제 전:', array);

    //배열 삭제 진행
    array.shift();
    console.log('삭제 후', array);
}

실행 결과 : 
삭제 전: [ 1, 2, 3, 4, 5 ]
삭제 후 [ 2, 3, 4, 5 ]


2. 배열의 마지막 값 삭제


배열의 마지막 값을 삭제해주는 함수로써는 Array.pop()이 있습니다.

function solution() {
    const array = [1, 2, 3, 4, 5];
    console.log('삭제 전:', array);

    //배열 삭제 진행
    array.pop();
    console.log('삭제 후', array);
}

실행 결과 :

삭제 전: [ 1, 2, 3, 4, 5 ]
삭제 후 [ 1, 2, 3, 4 ]

 

3. 배열의 지정 값 삭제 

배열의 특정 위치를 지정하여, 요소들을 삭제하는 함수로는 Array.splice()가 있습니다.
앞서 shift, pop 함수들과는 다르게 인덱스와 인덱스 후로부터 몇가지 요소 n개를 삭제할지에 대한 인자값을 넣어주어야 합니다. 
arr.splice(몇번째 자리 부터 자를지 배열 위치값(인덱스), n개를 자를지);
아래 예시에서는 0 , 1, 2(배열의 3번째 자리) 배열은 0부터 첫번째 자리 요소니깐요.. 3번째 자리부터 2개를 자르겠다라고
함수를 사용했기 때문에, 삭제 후 결과를 보시면 3,4 가 날아갔습니다.

function solution() {
    const array = [1, 2, 3, 4, 5];
    console.log('삭제 전:', array);

    //배열 삭제 진행 배열의 인덱스는 0부터 시작 0,1,2,3,4 의 인덱스에 해당하는 배열 값에서
    //array.splic(n번째 인덱스,n개 삭제할지..)
    array.splice(2,2);
    console.log('삭제 후', array);
}

 

실행 결과 : 

삭제 전: [ 1, 2, 3, 4, 5 ]
삭제 후 [ 1, 2, 5 ]