[함수] splice()

배열의 중간에 원소를 추가, 삭제하기 위해서는 splice() 함수를 사용합니다.

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

매개변수

start

배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.

deleteCount Optional

배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

item1, item2, ... Optional

배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

반환 값

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

예시

배열에 값 추가하기

// 앞에 추가
const arr1 = [1, 2, 3];
arr1.splice(0, 0, 'a', 'b')
//  [ 'a', 'b', 1, 2, 3]
//index 0부터 0개를 삭제하고 a,b를 추가한다

// 뒤에 추가
const arr2 = [1, 2, 3];
arr2.splice(arr2.length, 0, '4', '5');
//  [1, 2, 3, 4, 5]
// arr2의 길이부터 0개를 삭제하고 4,5를 추가한다

// 중간에 추가
const arr3 = [1, 2, 3];
arr3.splice(1, 0, 'a', 'b');
//  [1, 'a', 'b', 2, 3]
// 1 인덱스에서 0개를 삭제하고 a, b를 추가한다

배열의 앞, 중간, 뒤의 값 삭제하기

// 앞에서 2개 원소 삭제
const arr1 = [ 'a', 'b', 1, 2, 3 ];
arr1.splice(0, 2);
// 1,2,3

// 중간(idnex 1) 2개 원소 삭제
const arr2 = [1, 'a', 'b', 2, 3];
arr2.splice(1, 2);
// 1,2,3

// 마지막 원소 삭제
const arr3 = [1, 2, 3, 'a'];
arr3.splice(arr3.length - 1, 1)
// 1,2,3

전체 또는 특정 인덱스 이후의 모든 원소 삭제

// 전체 원소 삭제
const arr1 = [ 1, 2, 3 ];
arr1.splice(0);
// 배열 전체의 원소를 삭제하고 싶으면
// 첫번째 파라미터(start index)를 0으로 지정하고, 나머지 파라미터는 입력하지 않습니다.

// index 1 이후의 모든 원소 삭제
const arr2 = [ 1, 2, 3 ];
arr2.splice(1); 
// [1]
// 특정 index 이후의 원소를 삭제하고 싶으면
//첫번째 파라미터(start index)를 삭제할 특정 index를 지정하고, 나머지 파라미터는 입력하지 않습니다.

삭제와 추가 동시에 하기

// 삭제와 추가 동시에 하기
const arr = [ 'a', 1, 'd', 'e'];
arr.splice(1, 1, 'b', 'c');
//a,b,c,d,e
// index 1에서부터 1개의 원소를 삭제하고, index 1에 'b', 'c' 원소 2개를 추가하였습니다.

값 변경하기

// 값 변경 하기
const arr = [ 'a', 1, 'c', 'd'];
arr.splice(1, 1, 'b')
// a, b, c, d
// 1을 제거하고 b를 넣음

참고자료

mdn
[Javascript] 배열 중간에 값 추가, 삭제하기 (2) - splice() 함수