[JavaScript] 배열 요소 수정/삭제 함수, splice()

이 페이지는 자바스크립트의 배열에서 요소를 삭제 또는 교체, 추가할 때 사용하는 내장함수 splice()에 대해 설명하고 있다.

기본적으로 자바스크립트의 배열에는 요소를 제어하는 역할을 하는 splice() 메서드가 있다.

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

 

기본 구조를 보면, start로 배열을 변경할 시작 인덱스를 지정하여 작업하고 변경된 요소를 담은 Array 객체를 반환한다.

(제거한 요소를 담은 배열로 반환한다는것은, 하나의 요소만 제거한 경우 길이가 1인 배열을 반환하고, 아무 값도 제거하지 않았으면 빈 배열을 반환한다는 뜻이다.)

 

start는 배열의 변경을 시작할 인덱스로, 음수인 경우 배열의 끝에서부터 센다.

deleteCount는 제거할 요소의 갯수로, 생략하거나 array.length - start보다 크면 요소를 제거한다.

item은 배열에 추가할 요소로, 지정하지 않으면 제거만 한다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);
// result: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
console.log(months);
// result: Array ['Jan', 'Feb', 'March', 'April', 'May']

 

ex1)

하나도 제거하지 않고, 2번 인덱스에 'drum' 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');

// myFish is ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] 
// removed is [], no elements removed

 

ex2)

하나도 제거하지 않고, 2번 인덱스에 “drum'과 'guitar' 추가

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ['angel', 'clown', 'drum', 'guitar', 'mandarin', 'sturgeon'] 
// removed is [], no elements removed

 

ex3)

3번 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ['mandarin']
// myFish is ['angel', 'clown', 'drum', 'sturgeon'] 

 

ex4)

2번 인덱스에서 한 개 요소 제거하고 'trumpet' 추가

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');

// myFish is ['angel', 'clown', 'trumpet', 'sturgeon']
// removed is ['drum']

 

ex5)

0번 인덱스에서 두 개 요소 제거하고 'parrot', 'anemone', 'blue' 추가

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] 
// removed is ['angel', 'clown']

 

ex6)

2번 인덱스에서 두 개 요소 제거

var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ['parrot', 'anemone', 'sturgeon'] 
// removed is ['blue', 'trumpet']

 

ex7)

-2번(끝에서 두번째) 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ['angel', 'clown', 'sturgeon'] 
// removed is ['mandarin']

 

ex8)
2번(중간) 인덱스를 포함해서 이후의 모든 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ['angel', 'clown'] 
// removed is ['mandarin', 'sturgeon']