자바스크립트 splice() 함수 – 배열의 요소 제거·교체·추가

정의 및 사용 방법

splice() 함수는 배열의 원하는 위치(인덱스)에서
요소를 제거하거나, 다른 요소로 교체하거나, 새 요소를 추가할 수 있습니다.

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

특징

원본 배열을 직접 수정합니다.
매개변수를 사용해서 요소를 제거, 교체, 추가할 수 있습니다.
제거한 요소를 담은 배열을 반환합니다. 제거한 요소가 없을 경우 빈 배열을 반환합니다.

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

기본 예제

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

배열의 요소 제거

JavaScript

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

// 바지를 장바구니에서 제거
let purchased = cart.splice(1, 1);

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

// 반환 값
console.log(purchased); // ["바지"]

배열의 요소 교체

JavaScript

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

// 태블릿을 최신 모델로 교체
let replacedProduct = products.splice(1, 1, "신형 태블릿");

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

// 반환 값
console.log(replacedProduct); // ["태블릿"]

배열의 요소 추가

JavaScript

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

// 모자 뒤에 신발을 추가
let addedItem = cart.splice(3, 0, "신발");

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

// 반환 값
console.log(addedItem);  // []

구문

JavaScript

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

매개변수

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

반환 값

삭제된 요소를 담은 배열을 반환합니다.

하나의 요소를 삭제하면, 길이가 1인 배열을 반환합니다.
삭제된 요소가 없으면, 빈 배열 ([])을 반환합니다.

매개변수와 반환 값 예시

JavaScript

let arr = ["A", "B", "C", "D"];

// 1. 요소 제거
let removed1 = arr.splice(1, 2); // ["B", "C"]
console.log(removed1);

// 2. 요소 추가만 (deleteCount 0)
let removed2 = arr.splice(1, 0, "X"); // []
console.log(removed2);

// 3. 음수 인덱스
let removed3 = arr.splice(-2, 1); // ["D"]
console.log(removed3);

활용 예제

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

배열 중간에 요소 추가

JavaScript

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

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

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

특정 요소 교체

JavaScript

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

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

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

마지막 요소 제거 및 새 요소 추가

JavaScript

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

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

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