[Javascript] 배열(Array) 요소 추가, 삭제 (feat. splice)

 

Javascript를 사용하면서 자주 사용하게 되는 배열(Array).

쓰임새가 다양해서 배열을 자주 사용하는데, 배열의 요소를 추가, 삭제하는 방법에 대해 정리해 보려 한다.

 

다른 방법도 있겠지만, 나는 Splice 함수를 이용해 보려 한다.

 

Splice 함수란?

배열의 기존 요소를 추가/삭제하여 배열의 요소를 변경해주는 함수이다.

 

그렇다면 사용 방법 및 매개변수는 어떤 것이 존재하는가?

Array.splice(startIndex, deleteCount, insertItems);

• Array에는 배열의 변수를 설정.
• startIndex : 배열의 요소를 삭제하거나 추가할 시작 위치. (필수 값이다.)
• deleteCount : startIndex를 기준으로, deleteCount만큼 배열의 요소를 삭제. (옵션 값이다.)
• insertItems : startIndex를 기준으로, 배열에 요소를 추가. (옵션 값이다. 요소를 추가하기 위해서는, deleteCount 값이 꼭 들어가야 하니 참고하자.)

배열 요소 삭제

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(1, 1);    // arr = ["a", "c", "d", "e"]
arr.splice(2, 1);    // arr = ["a", "c", "e"]
arr.splice(0, 2);    // arr = ["e"]

간단한 예제를 만들어 봤다.

arr 배열이 startIndex, deleteCount의 값에 의해서 삭제되는 모습을 알 수 있다.

 

여기서 하나 더, 알아야 할 내용이 있다.

위 그림에서 알 수 있듯이, arr.splice를 하면 삭제된 요소가 반환된다는 점이다.

해당 배열에서 삭제되는 동시에, 그 값을 반환한다는 점이다.

 

배열 요소 추가

splice함수의 매개변수를 설명하면서, 요소를 추가하기 위해서는 deleteCount값을 꼭 넣어주어야 한다고 설명했다.

삭제할 요소가 없다면, 0으로 설정해주면 된다.

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(2, 0, 'z', 'k', 'f');    // arr = ["a", "b", "z", "k", "f", "c", "d", "e"]
arr.splice(0, 0, 'u', 'f', 'c');    // arr = ["u", "f", "c", "a", "b", "z", "k", "f", "c", "d", "e"]

요소에 잘 추가된다.

하지만 요소가 삭제될 때와는 다르게, 반환되는 값이 빈 배열이라는 것을 명심하자.

 

그렇다면, 요소를 삭제, 추가를 동시에 한다면 어떤 값이 반환될까?

요소를 삭제할 때와 동일하게, 삭제된 요소가 반환된다.