[JS] splice()란? - 배열 요소 추가/삭제/교체

JS의 splice() 메서드에 대해서 정리해보려 한다.

Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가해서 배열의 내용을 변경한다.

 

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

 

start: 배열의 변경을 시작할 인덱스.

- 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다. 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정된다.

 

deleteCount (Optional): 배열에서 제거할 요소의 수.

- deleteCount를 생략하거나 값이 array.length - start 보다 크면 start부터의 모든 요소를 제거한다. deleteCount가 0이하일 경우에는 어떤 요소도 제거하지 않음. 따라서 이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

 

item1, item2, ... (Optional): 배열의 추가할 요소.

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

배열 요소 추가하기

var num = [0,1,2,3];

// 배열 2번째 위치한곳에 숫자 5를 추가
num.splice(2,0,5); // [0, 1, 5, 2, 3] 

// 배열 2번째 위치한곳에 숫자 5,7을 추가
num.splice(2,0,5,7); //[0, 1, 5, 7, 2, 3]

배열 요소 제거하기

var num = [0,1,2,3]; 

// 배열 1번째 부터 1개를 제거
num.splice(1,1); // [0, 2, 3] 

// 배열 1번째 부터 2개를 제거
num.splice(1,2); //[0, 3]

배열 요소 교체하기

var num = [0,1,2,3]; 

// 배열 1번째부터 1개를 제거하고 숫자 5로 추가
num.splice(1,1,5); // [0, 5, 2, 3] 

// 배열 1번째부터 2개를 제거하고 숫자 5로 추가
num.splice(1,2,5); //[0, 5, 3]

배열 요소 추출하기

var num = [0,1,2,3]; 

// 배열 1번째 부터 1개를 제거한다. 
var remove = num.splice(1,1); // [1] 

// 배열 1번째 부터 2개를 제거한다. 
var remove = num.splice(1,2); //[1, 2]

+ 특정 인덱스를 포함해서 이후의 모든 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2); //2번 인덱스를 포함해서 이후의 모든 요소 제거

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