[Js] 배열의 slice()와 splice() 함수

알고리즘 문제 풀다가 문자열의 특정 범위를 거꾸로 변환해야 했습니다.

저는 문자열을 배열로 변환 후 slice 함수를 이용해 변경했는데요.

다른 사람들 코드를 보니 splice 함수로 간단히 처리하더군요.

배열의 특정 범위를 손쉽게 변경 가능한 splice 함수와 slice 함수의 차이법에 대해 알아보겠습니다.

 

1. slice() 함수

slice() 함수는 배열의 특정 범위를 복사하여 새로운 배열객체를 반환합니다. 

시작 인덱스(start)와 종료 인덱스(end)를 인자로 사용하여 범위를 지정할 수 있습니다.

실제 범위는 시작 인덱스부터 종료 인덱스 전까지 해당됩니다.

slice(start)
slice(start, end)

 

slice() 함수는 end값을 지정하지 않으면 start를 시작으로 배열의 끝까지 추출합니다.

start와 end값을 어떻게 지정하냐에 따라서 다양하게 사용할 수 있습니다.

 

- 음수

    ㄴ 마지막 요소를 -1로 취급하고 앞으로 갈수록 -2, -3... 의 형태로 계산합니다.

         위의 array배열의 음수 인덱스는 [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1]과 같습니다.

- start > end 

    ㄴ 빈 배열을 반환

- 마지막 인덱스보다 큰 값

    ㄴ start : 빈 배열을 반환

    ㄴ end : 배열의 끝까지 취급하여 반환

 

간단한 실습을 통해 slice()함수가 어떻게 동작하는지 보겠습니다.

var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

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

//음수를 지정하는 경우, 배열의 끝에서부터의 길이로 지정.
console.log(array.slice(-2));    //[8, 9]
console.log(array.slice(0, -2)); //[0, 1, 2, 3, 4, 5, 6, 7]

//start보다 end값이 큰 경우
console.log(array.slice(3, 2));  //[] : 빈 배열

//마지막 인덱스보다 큰 값을 사용하는 경우
console.log(array.slice(10));    //[] : 빈 배열
console.log(array.slice(8, 10)); //[8, 9] : 배열의 끝까지 추출.

 

2. splice() 함수

splice() 함수는 배열의 특정 범위를 지우거나, 새로운 요소로 대체할 수 있으며 slice()함수 처럼 새로운 객체를 반환하는 것이 아닌 기존 배열을 직접 변경하고, 삭제 요소를 배열로 반환합니다.

시작 인덱스(start)와 삭제할 개수(deleteCount) 그리고 대체할 값(item)을 인자로 사용합니다.

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, . . . , itemN)

 

간단한 실습을 통해 splice()함수가 어떻게 동작하는지 보겠습니다.

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var arr1 = arr.splice(8);

console.log(arr1); //[8, 9]
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6, 7]

 

deleteCount를 지정하지 않으면 지정한 start부터 끝까지 모두 제거합니다.

이때 반환값은 삭제된 요소는 arr1 변수에 담깁니다.

그리고 splice() 대상 배열 arr은 직접적으로 변경된 것을 확인 할 수 있습니다.

 

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var arr1 = arr.splice(0, 5, 'del');

console.log(arr1); //[0, 1, 2, 3, 4]
console.log(arr);  //['del', 5, 6, 7, 8, 9]

 

 

deleteCount를 지정한 경우 start부터 start+deleteCount에 해당하는 인덱스 요소까지 제거하고

'del' 요소를 추가했습니다.

 

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//음수
var arr1 = arr.splice(-1);
var arr2 = arr.splice(3, -1);

console.log(arr1); //[9]
console.log(arr2); //[]
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6, 7, 8]

 

start값을 음수로 지정한 경우 마지막 요소를 -1로 취급하고 앞으로 갈수록 -2, -3... 의 형태로 계산합니다. 

위에서 start값을 -1로 지정하여 마지막 요소인 9가 삭제됩니다.

end값을 0이하의 수로 지정한 경우 어떠한 요소도 제거되지 않고 빈 배열을 반환합니다.

 

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//큰수
var arr1 = arr.splice(11, 2, 'add');
var arr2 = arr.splice(10, 3);

console.log(arr1);  //[]
console.log(arr2);  //['add']
console.log(arr);   //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

 

start값을 배열의 길이보다 큰수로 지정한 경우 시작 인덱스를 배열의 길이로 설정합니다.

길이가 10인 arr배열에 start값을 11로 지정한 경우 10 인덱스에 'add' 요소를 추가하고 빈 배열을 반환합니다.

end값을 배열의 길이 - start보다 큰 경우 start부터의 모든 요소를 제거합니다.

10 인덱스부터 모든 요소를 제거하여 새로운 'add' 요소가 제거된 것을 확인할 수 있습니다.

 

3. slice()와 splice() 함수 차이점

slice()는 원본 배열을 변경하지 않고 일부 요소를 추출하여 새로운 배열을 반환합니다. 

반면에, splice()는 원본 배열을 직접 수정하는 것이 큰 차이라고 볼 수 있습니다.

 

위의 반환 차이점 외에도 slice()와 splice() 함수의 용도는 다르게 사용됩니다.

slice()는 배열의 일부 요소를 추출하는데 사용된다면, 

splice()는 배열의 일부 요소 제거, 새로운 요소 추가, 새로운 요소 대체 등으로 더 다양합니다.

특히 배열의 중간에 새로운 요소를 추가하고 싶을 때 splice()로 간단히 처리할 수 있습니다.

var arr = ['Mon', 'Tue', 'Thu', 'Fri', 'Sat', 'Sun'];

arr.splice(2, 0, 'Wen');

console.log(arr); //['Mon', 'Tue', 'Wen' 'Thu', 'Fri', 'Sat', 'Sun'];

 

요일 배열에서 'Wen' 요소가 빠져 있습니다.

요소를 추가할 인덱스를 'Thu' 앞으로 지정하고 deleteCount를 0으로 지정합니다.

그러면 요소의 제거 없이 배열의 중간에 'Wen' 요소가 추가됩니다.