[JavaScript] 자바스크립트 배열의 slice()와 splice()

자바스크립트에서 배열을 다루다보면 자주 사용하게 되는 메서드 중에 이름이 상당히 비슷한 slice()와 splice()가 있습니다.
두 메서드는 언뜻 보기에 비슷한 기능을 하고 이름도 비슷해서 헷갈리는 경우가 많은데,
두 메서드에는 큰 차이점이 있습니다.

1. slice()

slice() 메서드는 어떤 배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
여기서 중요한 점은 slice()는 원본 배열은 바뀌지 않는 새로운 배열을 반환한다는 점입니다.

구문

arr.slice([begin [, end]])

begin

• 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.
• 만약 undefined인 경우에는 0번 인덱스부터 slice 합니다.
• 음수는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.
• begin이 배열의 길이보다 큰 경우에는 빈 배열을 반환합니다.

end

• 추출을 종료 할 0 기준 인덱스입니다.
• slice 는 end 인덱스를 제외하고 추출합니다.
• 음수는 배열의 끝에서부터의 길이를 나타냅니다. slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다.
• end가 생략되거나, 배열의 길이보다 크면, slice()는 배열의 끝까지(arr.length) 추출합니다.

예시

const animals = ["ant", "bison", "camel", "duck", "elephant"];

// 2번 인덱스부터 끝까지 추출
console.log(animals.slice(2));
// output> Array ["camel", "duck", "elephant"]

// 2번 인덱스부터 4번 인덱스까지 추출
console.log(animals.slice(2, 4));
// output> Array ["camel", "duck"]

// 1번 인덱스 부터 5번 인덱스까지 추출
console.log(animals.slice(1, 5));
// output> Array ["bison", "camel", "duck", "elephant"]

// -2번 인덱스부터 추출
console.log(animals.slice(-2));
// output> Array ["duck", "elephant"]

// 2번 인덱스부터 배열에서 끝에서 두번째 요소까지 추출
console.log(animals.slice(2, -1));
// output> Array ["camel", "duck"]

// 시작점과 끝을 생략하면 전체 추출
console.log(animals.slice());
// output> Array ["ant", "bison", "camel", "duck", "elephant"]

2. splice()

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

구문

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

start

• 배열의 변경을 시작할 인덱스입니다.
• 배열의 길이보다 큰 값이면 실제 시작 인덱스는 배열의 길이로 설정됩니다.
• 음수인 경우는 배열의 끝에서부터 요소를 세어나갑니다
• 값의 절대값이 배열의 길이 보다 큰 경우는 0으로 설정됩니다.

deleteCount

• 배열에서 제거할 요소의 수입니다.
• 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다.
• 0 이하라면 어떤 요소도 제거하지 않습니다.

item1, item2, ...

• 배열에 추가할 요소입니다.
• 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

예시

const months = ["Jan", "March", "April", "June"];

// 하나도 제거하지 않고, 1번 인덱스에 'Feb' 추가
months.splice(1, 0, "Feb");
console.log(months);
// output> Array ["Jan", "Feb", "March", "April", "June"]

// 하나도 제거하지 않고, 2번 인덱스에 "May"과 "July" 추가
months.splice(2, 0, "May", "July");
console.log(months);
// output> Array ["Jan", "Feb", "March", "May", "July", "April", "June"]

// 3번 인덱스에서 한 개 요소 제거
months.splice(3, 1);
console.log(months);
// output> Array ["Jan", "Feb", "March", "May", "April", "June"]

// 2번 인덱스에서 한 개 요소 제거하고 "October" 추가
months.splice(2, 1, "October");
console.log(months);
// output> Array ['Jan', 'Feb', 'October', 'March', 'April', 'June']

// 0번 인덱스에서 두 개 요소 제거하고 "Mon", "Tue", "Wed" 추가
months.splice(0, 2, "Mon", "Tue", "Wed");
console.log(months);
// output> Array ['Mon', 'Tue', 'Wed', 'October', 'March', 'April', 'June']

// 2번 인덱스에서 두 개 요소 제거
months.splice(2, 2);
console.log(months);
// output> Array ['Mon', 'Tue', 'March', 'April', 'June']

// -2번 인덱스에서 한 개 요소 제거
months.splice(-2, 1);
console.log(months);
// output> Array ['Mon', 'Tue', 'March', 'June']

// 2번 인덱스를 포함해서 이후의 모든 요소 제거
months.splice(2);
console.log(months);
// output> Array ['Mon', 'Tue']

참고

Array.prototype.slice() - JavaScript - MDN Web Docs
Array.prototype.splice() - JavaScript - MDN Web Docs - Mozilla
[JS/Array] slice()와 splice()의 차이점