[JavaScript] 배열 중간에 요소 추가, 삭제하기 - splice()

 

 

[JavaScript] 배열 앞, 뒤에 요소 추가, 삭제하기 - unshift(), push(), shift(), pop()

[JavaScript] 배열의 첫 번째 값, 마지막 값 가져오기

 

 

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

 

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

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

 

splice()

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

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나

새 요소를 추가하여 배열의 내용을 변경합니다.

 

start

배열의 변경을 시작할 index

 

deleteCount

배열에서 제거할 요소의 수

start index부터 deleteCount 개수만큼의 해당하는 요소를 제거합니다.

deleteCount가 0 이하라면 어떤 요소도 삭제되지 않습니다.

 

item1, item2

배열에 추가할 요소입니다.

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

 

반환값

제거한 요소를 담은 배열을 반환합니다.

 

 

예제 1) 하나도 제거하지 않고 2번째 index에 "e" 추가하기

const arr = ["a", "b", "c", "d"];
arr.splice(2, 0, "e");

console.log(arr); //['a', 'b', 'e', 'c', 'd']

첫 번째 인자로 추가할 값이 들어갈 index 2를 지정하고,

두 번째 인자로 0을 지정합니다. (삭제할 요소가 0개이기 때문에 두 번째 인자는 0으로 지정) 

그다음 추가할 값인 "e"를 넣어줍니다.

 

 

예제 2) 하나도 제거하지 않고 3번째 인덱스에 "e", " f " 추가하기

const arr = ["a", "b", "c", "d"];
arr.splice(3, 0, "e",'f');

console.log(arr) //['a', 'b', 'c', 'e', 'f', 'd']

첫 번째 인자로 추가할 값이 들어갈 index 2를 지정하고,

두 번째 인자로 0을 지정합니다. (삭제할 요소가 0개이기 때문에 두 번째 인자는 0으로 지정) 

그다음 추가할 값들 "e", "f"를 넣어줍니다.

 

 

예제 3) 3번 인덱스에서 한 개 요소 제거하기

const arr = ["a", "b", "c", "d"];
let removed = arr.splice(3, 1);

console.log(arr) // ['a', 'b', 'c']

 

배열에 값을 삭제만 할 경우

arr(삭제할 값의 시작 index, 삭제할 요소의 개수)만 전달합니다.

splice() 메서드의 첫 번째 인자로 삭제할 값의 시작 index인 3을 지정하고,

두 번째 인자는 삭제할 요소의 개수를 지정합니다. (한 개 요소만 제거하기 위해 1을 넣어줍니다.)

배열에 값을 추가할 것이 아니므로 다음 인자는 지정하지 않습니다.

 

 

예제 4) 0번 인덱스에서 두 개 요소 제거하고 "e", " f ", "g" 추가하기 

const arr = ["a", "b", "c", "d"];
let removed = arr.splice(0, 2, "e", "f", "g");

console.log(arr) // ['e', 'f', 'g', 'c', 'd']

첫 번째 인자로 삭제할 값의 시작인 index 0을 지정하고,

두 번째 인자는 삭제할 요소의 개수인 2를 지정합니다.

그리고 배열에 값을 추가할 것이므로 다음 인자로 "e", "f", "g"를 전달합니다.

 

 

예제 5) 인덱스에서 마지막 요소 제거하기

const arr = ["a", "b", "c", "d"];
let removed = arr.splice(arr.length -1, 1);

console.log(arr) // ['a', 'b', 'c']

배열의 마지막 값을 가져오는 방법에 대해서는 아래 포스팅을 참조하세요.

참고 [JavaScript] 배열의 첫 번째 값, 마지막 값 가져오기

 

첫 번째 인자로 arr배열의 길이 -1(배열의 마지막 값)을 지정하고

두 번재 인자 삭제할 요소의 개수 1을 지정합니다.

배열에 값을 추가할 것이 아니므로 다음 인자는 지정하지 않습니다.

 

 

예제 6) 전체 요소 제거하기

const arr = ["a","b","c","d",];
arr.splice(0);

console.log(arr); // []

arr.splice(0);

배열의 전체 요소를 삭제하려면

첫 번째 인자(start index)를 0으로 지정하고,

나머지 인자는 입력하지 않습니다.

 

 

예제 7) 2번 인덱스를 포함해서 이후의 모든 요소 제거하기

const arr = ["a","b","c","d","e"];
let removed = arr.splice(2);

console.log(arr); // ['a', 'b']

특정 index 이후의 요소를 삭제하려면

첫 번째 인자(start index)를 삭제할 특정 index로 지정하고, 

나머지 인자는 입력하지 않습니다.

위 예제에서는 2번 index를 포함한 모든 요소를 삭제합니다.