[JS] 배열 APIs: splice와 slice의 비교

TL;DR

1. slice() 메서드는 복사+추출의 개념, splice() 메서드는 제거+추출의 개념이다.
2. 때문에 원본 배열이 유지되어야 할 때는 slice() 메서드를, 원본 배열을 변경해야 할 때는 splice() 메서드를 사용한다.
3. 특히 요소를 삭제하고 곧바로 그 위치에 새로운 요소를 삽입하고 싶다면 splice() 메서드를 사용한다.

문제

아래 array 배열의 값은 그대로 유지한 채, 맨 앞의 두 원소가 제거된 새로운 배열을 만들어 출력하려고 한다. 둘 중 어떤 메서드를 써야할까?

const array = [1, 2, 3, 4, 5];

1. splice()

Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.

splice()는 배열에서 원소들을 제거하고, 제거된 원소들을 배열로 반환하는 메서드이다. 필요에 따라 새로운 원소들을 삽입할 수도 있다.

◽ 원소 제거하기

splice(start: number, deleteCount?: number): T[];

• start: 제거를 시작할 위치(인덱스 0을 기준)
• deleteCount
  • 총 제거할 원소의 개수
  • 생략하면 배열의 마지막 인덱스 원소까지 전부 제거

맨 앞의 두 원소를 제거하기 위해 splice() 메서드를 사용했다.

const array = [1, 2, 3, 4, 5];
const newArray = array.splice(0, 2);

console.log(newArray); // [1, 2] 
console.log(array); // [3, 4, 5]

newArray 변수에 0번째 인덱스부터 제거된 2개의 요소가 배열로 반환되어 담겼다. 그런데 원본 배열 array 또한 2개의 요소가 제거되어 변경되어버렸다.

문제에서 array 의 값은 그대로 유지해야 한다고 했다. 따라서 원본 배열이 유지되어야 할 때엔 splice() 메서드를 사용하는 건 적합한 방법이 아니다. 그러면 splice() 메서드는 언제 사용하는 걸까?!

◽ 원소 삽입하기

splice() 메서드는 배열의 중간에 새로운 요소를 삽입해야할 때 유용하다.

splice(start: number, deleteCount: number, ...items: T[]): T[];

• start
  • 제거를 시작할 위치(인덱스 0을 기준)
• deleteCount
  • 총 제거할 원소의 개수(생략 불가)
• ...items
  • 배열에 새롭게 삽입될 원소들을 콤마로 구분하여 전달
  • 첫번째 인자를 기준 인덱스로 하여, 차례대로 배열에 삽입

const array = [1, 2, 3, 4, 5];
const newArray = array.splice(0, 2, 10);

console.log(newArray); // [1, 2] 
// 0번째 인덱스에서부터 2개의 원소가 삭제되고, 그 자리(0)에 10이 삽입된다
console.log(array); // [10, 3, 4, 5]


const newArray2 = array.splice(1, 0, 11, 12);
// 변경된 array를 기준으로 인덱스 1에서부터 0개의 원소를 삭제한다
// 따라서 newArray2에는 빈 배열이 반환되며,
// 원본 배열 array는 인덱스 1에서부터 11, 12가 차례대로 삽입되어 변경된다 
console.log(newArray); // [] 
console.log(array); // [10, 11, 12, 3, 4, 5]

삭제할 원소가 없어도 두번째 인자에 값을 전달해야 함을 유의하자. 삽입할 원소들은 메서드의 세번째 인자부터 넣어줘야 유효하다!

2. slice()

Returns a section of an array.

slice() 메서드는 특정 위치의 원소들을 배열로 반환한다.

여기서 splice() 메서드와 차이가 느껴진다. 어디에도 배열에서 원소를 삭제한다는 말은 보이지 않는다.

◽ 원소 추출하기

slice(start?: number, end?: number): T[];

• start: 추출할 시작 위치
• end
  • 추출의 종료 위치
  • 해당 인덱스의 원소는 추출의 범위에서 미포함
  • 생략하면 배열의 마지막 원소까지 전부 포함

이번에는 slice() 메서드를 사용해 원소를 제거했다.

const array = [1, 2, 3, 4, 5];
const newArray1 = array.slice(2, 5);
const newArray2 = array.slice(2);

console.log(newArray1); // [3, 4, 5]
console.log(newArray2); // [3, 4, 5]
console.log(array); // [1, 2, 3, 4, 5]

newArray1 에 2번째 인덱스에서부터 4번째 인덱스(인덱스 5는 미포함)에 해당하는 원소들이 추출되어 담겼다. newArray2 에는 두번째 인자가 생략되어, 인덱스 2에서부터 배열의 끝까지 추출된 값이 담겼다. 결국 newArray1 과 동일하다😁. 여기서 가장 중요한 점은 원본 array 는 변경되지 않았다는 것이다.

◽ 깊은 복사하기

그리고 slice() 메서드의 또다른 특징은 모든 인자를 생략할 수 있다는 것이다. 인자를 아무것도 전달하지 않을 경우에는 아래와 같이 모든 원소를 추출한 배열이 반환된다. 이 때도 역시 완전히 새로운 참조값을 갖는 배열을 만들어 반환하므로 배열의 깊은 복사의 효과를 냅니다.

const array = [1, 2, 3, 4, 5];
const newArray = array.slice();

console.log(newArray); // [1, 2, 3, 4, 5]
console.log(array); // [1, 2, 3, 4, 5]

단, 배열의 원소값이 기본형일 때만 깊은 복사가 된다. 값이 참조형인 원소는 얕은 복사만 이루어진다.