[JavaScript] array 배열 자르기 - slice와 splice

내가 하고싶은 것 : a라는 변수에 배열 [1, 2, 3, 4, 5, 6] 이 있다. 여기서 인덱스 3번에 있는 요소를 배열에서 제거한 후 b라는 변수에 담고싶다.

 

🤔 Array.prototype.slice()

slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환합니다. 즉, 원본 배열은 수정되지 않습니다.

 

첫번째 인자로 시작 인덱스, 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다.

slice(start[, end])

start : 추출 시작점에 대한 인덱스

• undefined 인 경우 : 0번째부터 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타냅니다. slice(-2)를 하면 마지막 2개의 요소를 추출합니다.
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 빈 배열을 반환합니다. 

end : 추출을 종료할 기준의 인덱스 (end를 제외하고 그 직전의 요소까지만 추출합니다.)

• 지정하지 않을 경우 : 배열의 끝까지 slice
• 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타냅니다. slice(1, -2)를 하면 2번째 요소부터 끝에서 세번째 요소까지 추출합니다.
• 배열의 길이와 같거나 큰 수를 지정한 경우 : 배열의 끝까지 추출합니다.

반환값 : 추출한 요소를 포함한 새로운 배열을 반환합니다. 

 

예시를 보겠습니다. 

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const arr1 = arr.slice(3, 5);  // [4, 5]
const arr2 = arr.slice(undefined, 5);  // [1, 2, 3, 4, 5]
const arr3 = arr.slice(-3);  // [8, 9, 10]
const arr4 = arr.slice(-3, 9);  // [8, 9]
const arr5 = arr.slice(10);  // []
const arr6 = arr.slice(4);  // [5, 6, 7, 8, 9, 10]
const arr7 = arr.slice(undefined);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const arr8 = arr.slice(5, -4);  // [6]
const arr9 = arr.slice(2, 15);  // [3, 4, 5, 6, 7, 8, 9, 10]

 

 

🤔 Array.prototype.splice()

splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 이 메소드는 원본 배열 자체를 수정합니다. 

 

첫번째 인자로 시작 인덱스, 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환합니다.

 

splice(start[, deleteCount[, item1[, item2[, ...]]]])

start : 배열의 변경을 시작할 인덱스

• 음수를 지정한 경우 : 배열의 끝에서부터 요소를 셉니다.
• 배열의 길이보다 큰 수를 지정한 경우 : 실제 시작 인덱스는 배열의 길이로 설정
• 절대값이 배열의 길이보다 큰 경우 : 0으로 세팅

deleteCount : 배열에서 제거할 요소의 수 

• 생략 / 값이 array.length - start 보다 큰 경우 : start부터의 모든 요소를 제거
• 0 이하의 수를 지정 : 어떤 요소도 제거되지 않습니다.

item1, item2, ... : 배열에 추가할 요소

• 지정하지 않은 경우 : splice()는 요소 제거만 수행합니다.

반환값 : 제거한 요소를 담은 배열

• 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

 

예시를 보겠습니다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const arr1 = arr.splice(10, 2, 'a', 'b', 'c');  // [11, 12]

console.log(arr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 'a', 'b', 'c']
console.log(arr1);  // [11, 12]

10번째 인덱스부터 2개의 요소를 삭제하고 'a', 'b', 'c'를 추가하는 코드입니다.

11과 12가 삭제되고 이 삭제된 요소들의 배열은 arr1변수에 담기게 됩니다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const arr2 = arr.splice(-6, 4);

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

-6 (음수)를 지정하였기 때문에 뒤에서부터 6번째인 7부터 시작하여 4개의 요소를 삭제합니다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const arr3 = arr.splice(-13, 1);

console.log(arr);  // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
console.log(arr3);  // [1]

-13의 절대값이 배열의 길이보다 크기 때문에 0으로 세팅합니다.

그러므로 0번째 요소부터 1개의 요소, 즉 1을 삭제하게 됩니다.

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const arr4 = arr.splice(3);

console.log(arr);  // [1, 2, 3]
console.log(arr4);  // [4, 5, 6, 7, 8, 9, 10, 11, 12]

const arr5 = arr4.splice(6, 4);

console.log(arr4);  // [4, 5, 6, 7, 8, 9]
console.log(arr5);  // [10, 11, 12]

deleteCount가 생략되거나 array.length-start의 값보다 큰 경우, 지정한 start 요소부터 끝까지 모두 제거합니다. 

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const arr6 = arr.splice(5, 0, 'add');

console.log(arr);  // [1, 2, 3, 4, 5, 'add', 6, 7, 8, 9, 10, 11, 12]
console.log(arr6);  // []

deleteCount가 0이거나 0보다 작은 수이면 어떤 요소도 삭제되지 않습니다. 그렇기때문에 arr6은 빈 배열을 반환합니다.