slice() vs splice()

slice와 splice함수는 비슷하지만서도 다른 차이점이 있다.
오늘은 이 두 배열함수의 차이에 대해 공부한 것을 적어보려고 한다.

우선 공통적으로 쓸 빈 배열을 만들어보겠다.

    num = Array(10).fill().map((_,i) => i);
    // 길이가 10인 정수를 배열로 담음

Array.slice()

slice 함수에 첫 번째 인자에는 어느 인덱스에서 출발할지에 대한 start index와 어디에서 끊을지에 대한 end index 2개의 인자를 받는다.

    console.log(num.slice(5,9)) // [5,6,7,8]
    console.log(num.slice(5)) // [5,6,7,8,9]
    console.log(num.slice()) // [0,1,2,3,4,5,6,7,8,9]

slice함수는 첫 번째 인자만 전달 할 수도 있고 파라미터를 전달하지 않을 수도 있다. 하지만 위의 예시에서 2개의 인자를 줬을 때랑 1개의 인자를 줬을 때의 차이점이 존재하는 것을 볼 수 있다.
2개의 인자를 준곳에서는 end index가 9로 되어있는데, 즉 5번째 인덱스에서 시작하여 9번째 인덱스에서 멈춘다는 것이다. 하지만 2개의 인자를 준 부분에서 end index는 종료를 한 지점의 "전" 인덱스까지만 반환한다는 것이다. 반대로 첫 번째 인덱스인 start index(5) 를 주게 된다면 5번째에 위치한 인덱스부터 시작하여 나머지 인덱스들이 반환되기 때문에 마지막 인덱스인 9 까지 반환이 되는 것이다.
그리고 slice함수의 특징이 하나 있는데 그것은 바로 원본 배열을 유지한다는 것이다. 저렇게 값을 부분적으로 출력하고 원본 배열을 가지고 있던 변수의 값을 다시 출력해본다면 본래 가지고 있던 원본배열의 값을 그대로 가지고 있는 것을 볼 수있다.

Array.splice()

splice 함수는 slice와는 반대로 원본배열의 값을 변경할 수 있다는 점에 차이가 있다.

    console.log(num.splice(5,3)) // [5,6,7]
    console.log(num) // [0,1,2,3,4,8,9]

위의 예제처럼 처음에는 num이 가지고 있는 배열에 5 번째 인덱스부터 시작하여 3개의 인덱스까지 삭제하는데,
그 후 원본 배열인 num을 출력하게 되면 3개의 인덱스를 자른 값이 반영된 배열을 반환하는 것을 볼 수 있다.
splice 또한 첫 번째 인덱스만 줄 수 있는데

    console.log(num.splice(5)) // [5,6,7,8,9]
    console.log(num) // [0,1,2,3,4]

5번째의 인덱스부터 시작하여 나머지를 자른다. 그 이후 원본 배열의 num을 출력하게 된다면 위와 같이 해당하는 부분이 삭제된 값들이 출력되는 것을 볼 수 있다. splice는 slice와는 다르게 배열에 값을 추가도 할 수 있다.

    console.log(num.splice(5,3,-5,-6,-7)) // [5,6,7]
    console.log(num)    // [0,1,2,3,4,-5,-6,-7,8,9]

이렇게 5,6,7을 자른 뒤에 2번째 인자뒤에 추가할 값들을 적으면 원본배열에 삭제된 부분이 추가된 값으로 출력되는 것을 볼 수 있다.

slice 와 splice 차이점 느끼기

    console.log(num.slice(2,4)) // [2,3] -> 2번째 index부터 4번째 index의 전 값까지
    console.log(num.slice(2,4))
     console.log(num.slice(2,4))
    console.log(num) // 원본배열 유지
----------------------------------------------
    console.log(num.splice(2,2)) // [2,3] -> 2번째 index부터 시작해서 2개의 index까지 삭제
    console.log(num.splice(2,2))
    console.log(num.splice(2,2))
    console.log(num) // [0,1,8,9] // 원본배열 유지 X

splice는 위에서 말한것과 같이 원본 배열을 유지 않는다. 위의 예제를 통해 차이점을 본다면 처음 배열이 가지고 있는 수는
[0,1,2,3,4,5,6,7,8,9] 인데 splice를 한 번하면 2번째 인덱스의 값에서 2개의 값까지 추출을 하니깐 원본배열은
[0,1,4,5,6,7,8,9] 가 된다. 그리고 한 번더 똑같이 splice로 삭제한다면 현재 원본배열 값의 인덱스 위치인 2번째에서 2개의 값을 삭제하는 거니
4,5가 삭제되어 [0,1,6,7,8,9] 이 된다. 똑같이 한 번더 하게 된다면 마지막으로는 [0,1,8,9] 가 남는 것을 볼 수있다.
흐름은 해당하는 인덱스의 위치값들을 삭제하여 원본배열의 값을 변경하고, 그 변경된 값에서 다시 삭제를 하는거니 slice와는 반대로 값이 다르게 반환되는 것을 볼 수있는거다.