자바스크립트 toSpliced() 함수 – 새로운 배열로 요소를 제거·교체·추가하기

정의 및 사용 방법

toSpliced() 함수는 주어진 배열의 원하는 위치(인덱스)에서
요소를 제거하거나, 다른 요소로 교체하거나, 새 요소를 추가하여 새로운 배열로 반환합니다.

배열에서 인덱스는 0부터 시작합니다.
첫 번째 요소의 인덱스는 0이고, 두 번째 요소의 인덱스는 1입니다.

특징

매개변수를 사용해서 요소를 제거, 교체, 추가할 수 있습니다.
이 함수는 원본 배열을 직접 수정하지 않고, 결과가 적용된 새로운 배열로 반환합니다.

이 함수는 배열의 일정 위치부터 범위를 정해 요소를 한 번에 제거하거나 교체, 추가할 수 있다는 특징이 있습니다.

참고하세요!
splice() 함수는 새로운 배열이 아니라 원본 배열 요소를 직접 제거·교체·추가합니다.

기본 예제

toSpliced() 함수의 기본 동작을 이해하기 위해,
배열에서 요소를 제거, 교체, 추가하는 예제를 각각 살펴보겠습니다.

배열의 요소 제거

JavaScript

// 장바구니에서 구매 완료된 아이템 제거
let cart = ["티셔츠", "바지", "모자", "신발"];

/* 
 * <"바지"를 장바구니에서 제거>
 * toSpliced(start, deleteCount)
 * start: 배열을 변경하기 시작할 0 기반의 인덱스
 * deleteCount(옵션): 제거할 요소의 수
*/
let purchased = cart.toSpliced(1, 1);

// 반환 값(새로운 배열)
console.log(purchased); // ["티셔츠", "모자", "신발"]

// 원본 배열
console.log(cart); // ["티셔츠", "바지", "모자", "신발"] (원본 유지)

배열의 요소 교체

JavaScript

// 제품 목록에서 단종된 상품 교체
let products = ["노트북", "태블릿", "스마트폰", "모니터"];

/* 
 * <"태블릿"을 최신 모델로 교체>
 * toSpliced(start, deleteCount, item1)
 * start: 배열을 변경하기 시작할 0 기반의 인덱스
 * deleteCount(옵션): 제거할 요소의 수
 * item1(옵션): 배열에 새로 추가할 요소
 *  => deleteCount와 함께 사용하면 교체가 가능
*/
let replacedProduct = products.toSpliced(1, 1, "신형 태블릿");

// 반환 값(새로운 배열)
console.log(replacedProduct); // ["노트북", "신형 태블릿", "스마트폰", "모니터"]

// 원본 배열
console.log(products); // ["노트북", "태블릿", "스마트폰", "모니터"] (원본 유지)

배열의 요소 추가

JavaScript

// 장바구니에 새 아이템 추가
let cart = ["티셔츠", "바지", "모자"];

/* 
 * <"모자" 뒤에 "신발"을 추가>
 * toSpliced(start, deleteCount, item1)
 * start: 배열을 변경하기 시작할 0 기반의 인덱스
 * deleteCount(옵션): 제거할 요소의 수
 * item1(옵션): 배열에 새로 추가할 요소
 *  => deleteCount이 0 값이면 삭제 없이 요소 추가
*/
let addedItem = cart.toSpliced(3, 0, "신발");

// 반환 값(새로운 배열)
console.log(addedItem); // ["티셔츠", "바지", "모자", "신발"]

// 원본 배열
console.log(cart);  // ["티셔츠", "바지", "모자"] (원본 유지)

구문

JavaScript

arr.toSpliced(start)
arr.toSpliced(start, skipCount)
arr.toSpliced(start, skipCount, item1)
arr.toSpliced(start, skipCount, item1, item2)
arr.toSpliced(start, skipCount, item1, item2, /* …, */ itemN)

arr은 toSpliced() 함수를 적용할 원본 배열입니다.

매개변수

toSpliced() 함수의 매개변수 설명
`start`	배열의 변경을 시작할 `0` 기반의 인덱스입니다. 음수 인덱스: 배열의 끝에서부터 거꾸로 계산합니다. (예: `-1`은 마지막 요소) 절대값이 배열 길이보다 큰 음수: `0`으로 처리됩니다. 값이 배열 길이 이상: 요소 제거 없이, 제공된 `itemN`이 추가된 새로운 배열이 반환됩니다. 생략 시: 원본과 동일한 내용의 새로운 배열이 반환됩니다.
`skipCount`	옵션. 새로운 배열에서 제외할 요소의 수를 지정합니다. 생략 시: `start`부터 배열 끝까지 모든 요소가 제거된 결과가 반환됩니다. 값이 `array.length - start`보다 크면: `start`부터 배열 끝까지 제거됩니다. 값이 `0` 이하라면: 아무 요소도 제거되지 않습니다. `itemN`과 함께 배열 끝까지 제거하려면: `Infinity`를 사용할 수 있습니다.
`item1, item2, ..., itemN`	옵션. 새로운 배열에 추가할 요소들입니다. `skipCount`와 함께 사용하면 요소의 교체가 가능하며, 지정하지 않으면 `toSpliced()`는 요소를 제거한 결과만 반환합니다.

반환 값

결과가 적용된(start 이전의 모든 요소, 추가된 item1, item2, ..., itemN, 그리고 start + skipCount 이후의 모든 요소로 구성된) 새로운 배열을 반환합니다.

활용 예제

toSpliced() 함수는 배열의 원하는 위치에서 요소를 제거, 교체, 추가할 수 있습니다. 활용 예제에서는 실제 상황에서 자주 사용하는 세 가지 예제를 통해 toSpliced() 함수의 매개변수와 반환 값의 관계를 쉽게 확인해 보겠습니다.

배열 중간에 요소 추가

JavaScript

let fruits = ["사과", "배", "바나나"];

// "오렌지"를 "배" 뒤에 추가
let added = fruits.toSpliced(2, 0, "오렌지");

console.log(added); // ["사과", "배", "오렌지", "바나나"]

특정 요소 교체

JavaScript

let fruits = ["사과", "배", "오렌지", "바나나"];

// "배"를 "키위"로 교체
let replaced = fruits.toSpliced(1, 1, "키위");

console.log(replaced); // ["사과", "키위", "오렌지", "바나나"]

마지막 요소 제거 후 추가

JavaScript

let fruits = ["사과", "키위", "오렌지", "바나나"];

// 마지막 요소를 제거하고 "망고" 추가
let removed = fruits.toSpliced(fruits.length - 1, 1, "망고");

console.log(removed); // ["사과", "키위", "오렌지", "망고"]

고려할 점

toSpliced() 함수는 원본 배열을 변경하지 않고, 결과가 적용된 새로운 배열을 반환합니다.
따라서, 처리해야 할 배열의 크기가 매우 큰 경우에는 메모리 사용량이 증가할 수 있습니다. 특히 대량의 데이터를 다루는 루프 안에서 반복적으로 호출하면 성능에 영향을 줄 수 있습니다.

대용량 배열의 요소를 다루려면 다음을 고려할 수 있습니다.