By aPOST in 자바스크립트 — 2023년 12월 23일

[javascript] 배열 요소의 추가, 변경, 삭제하기

배열 요소의 추가 삭제가 제한적인 다른 언어와 달리 javascript에는 배열 요소를 수정 삭제할 수 있는 강력한 메서드를 제공합니다.

splice() 메서드를 사용하면 1개 이상의 연달아 나오는 배열 요소(들)을 삭제할 수 있으며, 동시에 배열 요소를 추가하는 것 또한 가능합니다.

배열 요소를 추가하는 다양한 메서드들이 제공되지만, 훨씬 강력한 배열 요소 삽입 기능을 제공합니다.

메서드 기본 사용 방법

Array.splice(시작인덱스, 삭제할 요소 길이, 추가할 배열 요소1, 추가할 배열요소2, ...)

인자	용도
시작인덱스	배열의 시작 인덱스(0에서 시작). 배열의 삭제, 또는 배열 요소를 추가하는 시작 위치. 삭제시에는 시작 인덱스를 포함하며, 추가시에는 시작 인덱스 뒤에 추가됨.
삭제할 요소 길이	0이면 배열 요소 삭제 없음. 0보다 크면 시작인덱스 포함 갯수만큼 오른쪽 방향으로 배열 요소를 삭제
추가할 배열 요소	추가하는 배열 요소를 인자로 넘김. 생략 가능하며, 여러개의 배열 요소를 인자로 순서대로 넘겨 추가할 수 있음. 배열 요소 삭제가 있을 경우 삭제된 위치에 배열 요소(들)이 추가됨.

배열 시작 인덱스부터(포함) 갯수만큼 배열 요소를 삭제합니다.

시작 인덱스 + 갯수가 배열 길이 보다 큰 경우 시작 인뎃스부터 끝까지 배열 요소를 삭제합니다.

const str1 = ['펭수', '라이언', '어피치', '콘', '브라운', '무지'];
str1.splice(4,1);
str1.splice(0,2);
console.log(str1);

추가하는 요소들은 인엑스 앞에 추가됩니다.

splice() 메서드로는 배열 맨끝 뒤에는 요소를 추가할 수 없습니다. 배열 끝에 추가하는 것은 push() 메서드를 사용합니다.

splice() 메서드로 배열 끝에 새 배열 요소를 추가하려면, 먼저 시작 인덱스부터 배열 끝까지 삭제를 해야 합니다.

const str2 = ['펭수', '라이언', '어피치', '콘', '브라운', '무지'];str2.splice(4, 0, '프로도');
str2.splice(0 ,0, '네오', '튜브');
console.log(str2);

splice() 메서드는 인자를 이용해 삭제와 추가를 동시에 할 수 있기 때문에, 특정 위치의 배열 요소를 변경하는 것과 동일한 효과를 만들 수 있습니다.

변경과 다른 점은 splice() 메서드는 실제 동작인 삭제 후 추가를 한다는 것입니다.

const str3 = ['펭수', '라이언', '어피치', '콘', '브라운', '무지'];str3.splice(4, 1, '프로도');
str2.splice(0 ,3, '네오', '튜브');
console.log(str3);