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

 

지난 번에는

unshift(), shift(), push(), pop() 함수를 사용하여,

배열의 맨 앞과 뒤의 원소를 추가, 삭제하는 방법을 알아보았습니다.

[Javascript] 배열에 값 추가, 삭제하기 (앞, 뒤) (1)

 

이번에는 splice() 함수를 사용하여,

배열의 중간에 원소를 추가 삭제하는 방법을 알아보도록 하겠습니다.

물론, 이 방법으로 배열의 맨 앞과 끝에 원소를 추가, 삭제 할 수도 있습니다.

 

---

 

배열의 중간에 값 추가, 삭제하기

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

 

 splice() 

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

 

 

 description 

splice() 함수는 start, deleteCount, items원소 목록을 파라미터로 입력 받습니다.

splice() 함수는 start index부터 deleteCount만큼의 원소를 삭제하고,

뒤 이어 오는 items를 start index 위치에 추가합니다.

 

 파라미터 

start

변경을 시작할 배열의 시작 index

 

deleteCount

start index부터 deleteCount 갯수만큼 원소를 삭제합니다.

deleteCount가 입력되지 않으면, start index 이후의 모든 값이 삭제됩니다.

 

items

배열의 start index에 item들을 추가합니다.

 

 리턴값 

삭제된 원소(element)의 배열을 리턴합니다.

 

 

 

---

  예제  

 배열의 앞, 중간, 뒤에 값 추가하기 

 

See the Pen 배열 by anna (@hianna) on CodePen.

 

배열의 값을 삭제하지 않고 추가만 할 경우에는

splice() 함수의

첫번째 파라미터로 추가할 값이 들어갈 index를 지정하고,

두번째 파라미터는 0으로 지정하고 (삭제할 원소가 0개),

다음으로 추가할 값들을 넘겨줍니다.

 

 

 

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

See the Pen 배열 by anna (@hianna) on CodePen.

 

배열에 값을 추가하지 않고 삭제만 할 경우에는

splice() 함수의

첫번째 파라미터로 삭제할 값의 시작 index를 지정하고,

두번째 파라미터는 삭제할 원소의 갯수를 지정합니다.

추가할 값이 없으므로, 다음 파라미터는 지정하지 않습니다.

즉, splice 함수에는 2개의 파라미터(삭제 시작 index, 삭제할 원소 갯수)만 전달합니다.

 

 

 

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

See the Pen 배열 by anna (@hianna) on CodePen.

 

arr1.splice(0);

배열 전체의 원소를 삭제하고 싶으면

첫번째 파라미터(start index)를 0으로 지정하고, 나머지 파라미터는 입력하지 않습니다.

 

arr2.splice(1);

특정 index 이후의 원소를 삭제하고 싶으면

첫번째 파라미터(start index)를 삭제할 특정 index를 지정하고, 나머지 파라미터는 입력하지 않습니다.

이 예제는 index 1 이후의 모든 원소를 삭제합니다.

 

 

 

 삭제와 추가 동시에 하기 

See the Pen 배열 by anna (@hianna) on CodePen.

 

splice() 함수를 이용하여, 한 위치의 삭제와 추가를 동시에 할 수 있습니다.

 

arr.splice(1, 1, 'b', 'c')

위 예제는 index 1에서부터 1개의 원소를 삭제하고,

index 1에 'b', 'c' 원소 2개를 추가하였습니다.

 

 

 

 값 변경하기 

위 방법으로 splice() 함수를 사용하면, 배열의 값을 변경하는데도 사용할 수 있겠죠?

See the Pen 배열 by anna (@hianna) on CodePen.

 

arr.splice(1, 1, 'b')

하나의 값을 삭제하고, 그 위치에 새로운 값을 추가하여

마치 값을 변경한 것과 같은 효과를 만들었습니다.

 

 

---

 

splice() 함수를 이용하여 배열의 값을 추가, 삭제하는 방법을 알아보았습니다.

다음 번에는 배열을 합치는 방법을 알아보도록 하겠습니다.