es6 - Slice() vs Spilce()

es6 - slice() vs spilce()

| Slice()

slice는 배열의 일정부분을 추출해 낼때 사용한다. 그리고 아래와 같이 사용한다.

arr.slice( 추출시작index, (option)추출직전index )

예를 통해 더 자세히 알아보자.

var arr=[1,2,3,4,5];
​
arr.slice(1);
-> 결과값: [2,3,4,5];
​
arr.slice(0,2);
-> 결과값: [1,2];
​

• 위에서 볼수 있듯이 arr.slice(1)는 배열 index가 1인것부터 배열의 마지막index까지 추출해낸다. 
• 그리고 추출직전index는 option이므로 꼭 넣어주지 않아도 된다.
• 그리고 arr.slice(0,2)에서 볼수 있듯이, index가 0인것부터 index가 2 직전인 값 까지 그러니 index 0,1에 해당하는 결과 [1,2] 가 나오게 되는것입니다.
• 주의할점은 arr.slice(0,2)에서 index 0~ index 2까지 추출해 [1,2,3] 까지 추출한다 생각할수있는데, 뒤에 오는 index는 추출직전 index이므로 index까지 추출되어 [1,2]가 나왔던 것이다. 

arr.slice(index,index2) ->[(index)위치값, ... , (index2-1)위치값]

​
arr.slice(0,-2);
-> 결과값: [1,2,3];
​
arr.slice(-1);
-> 결과값: [5];
​

slice 함수안에 인자값으로 음수도 들어갈 수 있는데, 그때 들어가는 인자값은 배열길이+(음수값)이다. 즉 위의 slice(0,-2)는 

slice(0,3)과 똑같이 결과가 나와 index 0,1,2인 값들인 [1,2,3]의 결과로 나온것이고, arr.slice(-1)은 arr.slice(4)와 같은 [5]의 결과 값이 나온것이다.

| Splice()

splice는 배열을다루는 만능함수이다. 배열 요소의 삭제,변경,추가 모두 가능하다. 아래를 통해 살펴보자.

var arr = new Array("4", "11", "2", "10", "3", "1");
​
arr.splice(2,1);
return 값 => ["2"]
​
console.log(arr);
(5) ["4", "11", "10", "3", "1"]

위를 보면 arr.splice(삭제를시작할위치,삭제할갯수)와 같이 사용하는것을 알수있다. 그리고 splice함수의 리턴값은 삭제한 요소들이 담긴 배열이다.

arr.splice(2,2,"33","44");
return 값 => ["10", "3"]
console.log(arr)
(5) ["4", "11", "33", "44", "1"]

위를 보면 arr.splice(삭제를시작할위치,삭제할갯수,추가할요소1,추가할요소2…)와 같이 삭제한 후 삭제한 자리에 요소를 추가할 수 있는것을 확인할수있다. 그런데, 삭제한 갯수만큼 요소를 추가해야할까? 아래를 통해 살펴보자.

arr.splice(2,1,"33","44");
return 값 => ["33"]
console.log(arr)
(6) ["4", "11", "33", "44", "44", "1"]

위 를 통해 알수있듯 꼭 삭제한 갯수만큼 요소를 추가해야하는것은 아니다.

arr.splice(0,0,"99");
return 값 => []
console.log(arr);
(7) ["99", "4", "11", "33", "44", "44", "1"]

위에서와 같이, 요소를 삭제하지 않고(즉 splice 두번째요소인 삭제할 갯수에 0을 집어넣으면) 배열에 요소를 쉽게 추가할 수 있다.

| Slice()  vs  Splice()
위에서 살펴봤듯이, slice와 splice는 단어는 비슷하지만 서로 다른 기능들을 하고 있는것을 살펴보았다. 어떠한 배열에서 요소를 추출하고 싶을때는 slice 함수를, 배열 요소를 삭제하거나, 추가하거나, 변경하거나 할때는 splice함수를 쓰면 된다. 앞으로 splice함수를 많이 사용할 것 같다...ㅎ 말그대로 배열을 다루는 만능함수이기 때문이다.!