[Javascript] slice() , splice() 차이점 difference

1. 개요

자바스크립트에는 배열을 자르기 위한 함수가 있습니다. 

그 중에서 항상 쓸데마다 용도가 좀 거슬리는, 헷갈리는 함수가 2개 있는데
slice, splice 입니다 이름도 비슷해서 사용 용도가 가끔 헷갈리더라구요.

 

 var Arr = [1,2,3,4,5,6,7,8,9,10];

위 그림과 같이 배열을 선언하였습니다. 

 

 

2. slice(startIdx, (endIdx))

slice() - 배열의 일부분을 잘라 내어 새로운 배열로 리턴하기 위해서 사용하는 함수

console.log(Arr.slice(1,3)); // [2,3]  

console.log(Arr.slice(-3,-1)); // [8,9]

console.log(Arr.slice(5)); // [6,7,8,9,10]

 

Arr.slice(1,3) : 배열의 index 1부터 3사이의 요소들을 새로운 배열로 만들어서 리턴

Arr.slice(-3,-1) : -3의 인덱스는 배열 처음 시작 인덱스로부터 역순에 해당하는 배열 Arr[7]과 같음 -1의 인덱스 역시 Arr[9]

따라서 Arr[7]부터 Arr[9] 까지 잘라서 리턴

Arr.slice(5) : 값을 begin index 하나만 주고, end값을 주지 않을 경우 
시작 인덱스부터 배열의 끝까지를 복사한 배열을 return ,따라서 결과는 6,7,8,9,10이 됩니다. 

 

slice() 함수는 사용했다 하더라도, Arr가 원래 가지고 있던 1,2,3,4,5,6,7,8,9,10의 요소들을 없애지는 않습니다.
해당 요소들을 건드려서 새로운 배열로 만들어서 주겠다 입니다.

3. splice(startIdx , deleteCount)

splice() - startIdx부터 시작하여 deleteCount만큼 배열에서 삭제 후 , 삭제한 요소를 반환 

splice 함수를 호출하게 되면, 해당 배열을 실제로 삭제하게 됩니다.

    console.log(Arr.splice(1,3)); // [2,3,4]

    console.log(Arr); // [1,5,6,7,8,9,10]

    console.log(Arr.splice(2,5)); // [6,7,8,9,10]

    console.log(Arr); // [1,5]

    console.log(Arr.splice(0)); // [1,5]

    console.log(Arr); // [] Nothing

 

Arr.splice(1,3) : 배열의 index 1부터 3개의 배열을 자르게됩니다. 하여 자른 배열 2,3,4를 리턴하게됩니다. 

그럼 현재 Arr은 [1, 5,  6, 7, 8, 9, 10]

Arr.splice(2,5) : 배열의 인덱스 2부터 5개의 배열을 자르게 됩니다. 하여 자른 배열 6,7,8,9,10(5가지 요소)를 리턴하게 됩니다.

하여 현재 Arr은 [ 1, 5 ] 만 남게됩니다. 

Arr.splice(0) : 배열 안 모든 요소 삭제 - 남아있는 [1,5] 배열 마저도 삭제

주의할 점은 splice의 경우 배열 호출 시 실제 배열을 건드리게 되기 때문에 , slice와는 차별하여 사용하여야 합니다.