[JS - 개념]  splice()

 

 

splice()

 

Array.prototype.splice()

 

push, pop, unshift, shift 메서드는 모두 원본 배열을 직접 변경하는 메서드이며 원본 배열의 처음이나 마지막에 요소를 추가하거나 제거한다. 

splice도 역시 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 원본 배열의 내용을 변경시킨다. 

 

반환값은 제거한 요소를 담은 배열이다. 아무 값도 제거하지 않으면 빈 배열을 반환한다. 

 

 

array.splice( start, deleteCount, items)

 

splice 메서드는 3개의 매개변수가 있다. 

 

start : 원본 배열의 요소를 제거하기 시작할 인덱스이다. 

           start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. 

           start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다.

           만약 start가 -1이면 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다. 

 

deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수다. 

                         deleteCount가 0인 경우 아무런 요소도 제거되지 않는다. (옵션)

 

items: 제거한 위치에 삽입할 요소들의 목록이다. 

           생략할 경우 원본 배열에서 요소들을 제거하기만 한다 (옵션)

 

const arr = [1, 2, 3, 4];

//원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새운 요소 20, 30을 삽입한다. 
const result = arr.splice(1, 2, 20, 30)


console.log(result); // [2,3]

console.log(arr) // [1, 20, 30, 4]

 

---

그런데 만약 arr.splice(1, 2, 20) 이렇게하면 하면 어떻게될까 ? 

const arr = [1, 2, 3, 4];

const result = arr.splice(1, 2, 20)


console.log(result); // [2,3]

console.log(arr) // [1, 20, 4]

 

이렇게 정상적으로 2개를 제거하고 그 자리에 20만 추가한다. 

 

---

그렇다면 길이가 2인 배열을 넣으면 넣어질까 ?

 

const arr = [1, 2, 3, 4];

const newArr = [20,30]

const result = arr.splice(1, 2, ...newArr)


console.log(result); // [2,3]

console.log(arr) // [1, 20, 30, 4]

잘된다.

 

 

---

그렇다면 변수로 숫자를 할당받아 n개를 지우고 n개의 무언가를 추가하고자 할때는 어떻게 할까?

 

예를들어 n개를 지우고 그 자리에 "*" 이 문자를 넣어야한다면?

 

const arr = [1, 2, 3, 4, 5, 6];

const num = 3

const result = arr.splice(1, num, ..."*".repeat(num))


console.log(result); // [ 2, 3, 4 ]

console.log(arr) // [ 1, '*', '*', '*', 5, 6 ]

이런식으로 활용 할 수도 있다.