[JS] splice함수와 slice함수에 대해 알아보자. ( 배열 값 자르기 )

 

배열에서 지원하는 API중 배열안의 값을 자를 때 사용하는 함수에 splice와 slice가 있는데,

비슷하지만 다른 점이 있어 이렇게 같이 정리한다.

 

핵심 : splice는 기존 배열을 변경, slice는 원본 배열은 변경되지 않고, 새로운 배열 객체를 반환

 

Array.prototype.splice()

==========================================================================

 

splice 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

 

기본문법

[배열명].splice(시작, 엔드);

 

예제

<script>
    let array = ['monitor','mouse','desktop','keyboard','speaker'];
    let newArray = array.splice(0,3);
    console.log(newArray);
    console.log(array);
</script>

 

결과

 

결과를 보면 array는 0~3번째 속성이 잘려서 4~5번째 속성만 가지는 배열로 변경이 되었고,

newArray는 0~3번째 속성을 가지게 되었다.

 

 

Array.prototype.slice()

==========================================================================

slice 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

원본 배열은 바뀌지 않는다.

 

 

기본문법

[배열명].slice(시작, 엔드);

 

예제

<script>
    let array = ['monitor','mouse','desktop','keyboard','speaker'];
    let newArray = array.slice(0,3);
    console.log(newArray);
    console.log(array);
</script>

 

결과

 

newArray에는 0~3번째 속성을 잘라 넣었지만, array는 변경되지 않았다.

즉 원본 배열은 보존하되, 새로운 배열을 반환하였다.

 

새로운 배열을 선언하지 않아도 원본 배열은 변경 되지 않는다.

 

 

splice메서드와 slice메서드 비교

<script>
    let array = ['monitor','mouse','desktop','keyboard','speaker'];
    array.slice(0,3);
    console.log(array);
    /*  
        slice메서드는 원본배열이 변경되지 않음
        결과 : ['monitor', 'mouse', 'desktop', 'keyboard', 'speaker']
    */
    array.splice(0,3);
    console.log(array);
    /*  
        splice메서드는 원본배열이 변경됨
        결과 : ['keyboard', 'speaker']
    */
</script>