[JavaScript] 배열을 가공하여 배열을 변경하는 splice() 함수

자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서도
앞서서 slice() 함수에 대해서 소개했는데,
이번에는 그와 이름이 비슷한 splice 함수에 대해 알아보자.

 

1) splice()

: 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환하는 함수이다.
문법

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

• start: 시작 인덱스(index)
• deleteCount(Optional): 배열에서 제거할 요소의 수
• item1, item2, ...(Optional): 배열에 추가할 요소로, 생략할 경우 요소를 제거하기만 함

 

2) 예시1. 요소를 제거하지 않고 추가만 하는 경우

let arr = ['apple', 'banana', 'grape', 'watermelon'];
let resultArr = arr.splice(1, 0, 'strawberry', 'orange');
console.log(arr);
console.log(resultArr);

 

결과값

> (6) ['apple', 'strawberry', 'orange', 'banana', 'grape', 'watermelon']
> []

※ 반환값

: splice 함수의 반환값은 제거한 요소를 담은 배열이다.
따라서 배열의 요소를 제거하지 않으면 출력했을 때 반환되는 값은 빈 배열([])이다.

 

3) 예시2. 요소를 추가하지 않고 제거만 하는 경우

예시 1

let arr = ['apple', 'banana', 'grape', 'watermelon'];
let resultArr = arr.splice(3, 1);
console.log(arr);
console.log(resultArr);

 

결과값 1

> (3) ['apple', 'banana', 'grape']
> ['watermelon']

 

예시 2

let arr = ['watermelon', 'strawberry', 'mango', 'apple', 'banana', 'grape'];
let resultArr = arr.splice(1);
console.log(arr);
console.log(resultArr);

 

결과값 2

> ['watermelon']
> (5) ['strawberry', 'mango', 'apple', 'banana', 'grape']

 

4) 예시3. 요소를 제거하고 추가도 하는 경우

let arr = ['watermelon', 'strawberry', 'mango', 'apple', 'banana', 'grape'];
let resultArr = arr.splice(2, 2, 'orange');
console.log(arr);
console.log(resultArr);

 

결과값

> (5) ['watermelon', 'strawberry', 'orange', 'banana', 'grape']
> (2) ['mango', 'apple']

 

 

[reference]
https://tocomo.tistory.com/31
https://www.daleseo.com/js-array-slice-splice/