[JavaScript] Array slice()와 splice()

slice()와 splice() 언제 사용하면 좋을까?

slice()는 얕은 복사본을 만들어 새로운 배열 객체로 반환
➡ 원본 배열이 변하지 않는다.

splice()는 배열의 기존 요소를 삭제/교체하거나, 새 요소 추가 가능.
➡ 원본 배열이 변한다.

Array.prototype.slice()

배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 만들어 새로운 배열 객체로 반환. 원본 배열이 변하지 않는다.

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

begin

추출 시작점에 대한 인덱스

• undefined: 0번 인덱스부터 시작.
• 음수: 배열 끝에서부터의 길이를 의미.
• 배열의 길이보다 큰 경우: 빈 배열 반환.

end

추출을 종료 할 기준 인덱스, end는 미포함하고 추출.

• 지정하지 않을 경우: 배열의 끝까지 추출.
• 음수: 배열의 끝에서부터의 길이를 의미.
• 배열의 길이보다 큰 경우: 배열 끝까지 추출.

예시

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

console.log(animals.slice(-2));
// 배열의 끝에서부터 2부터 끝까지 추출.
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// 인덱스 2 부터 끝에서 첫번 째까지(포함 X).
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Array.prototype.splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경. 원본 배열이 변한다.

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

start

변경을 시작할 인덱스

• 배열의 길이보다 큰 경우: 배열의 길이로 설정.
• 음수: 배열의 끝에서부터 요소를 세어나감.
• 음수일 때, 음수의 절대값이 배열의 길이보다 큰 경우: 0으로 설정.

deleteCount

제거할 요소의 수

• 생략하거나 array.length-start보다 크면: 모든 요소 제거
• 0 이하: 아무 요소도 제거하지 않는다.

item1, item2, ...

배열의 추가할 요소

• 아무 요소도 지정하지 않으면: splice()는 요소 제거만 한다.

예시

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 변경을 시작할 인덱스가 1.
// 제거할 요소는 없고, 'Feb'만 1 인덱스에 추가
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// "June"이 사라지고 'May' 추가됨.
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(-2, 1);
// "끝에서 두번 째인 April 제거"
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "May"]

months.splice(2);
// index 2부터 끝까지 제거
console.log(months);
// expected output: Array ["Jan", "Feb"]