자바스크립트(Javascript) 배열 요소 추가 제거 splice() 함수사용

“splice()” 함수는 JavaScript 배열에서 사용되며, 배열에서 요소를 추가, 제거 또는 교체하는 데 사용됩니다.”splice()” 함수는 배열을 수정하고 필요에 따라 제거된 요소를 반환합니다. 이 함수의 구문과 인수 정의는 다음과 같습니다.

 

 

 

 

◎ 1. 구문

 

“array.splice(start, deleteCount, item1, item2, ...)”

l  “start”: 배열에서 작업을 시작할 인덱스를 나타내며 필수입니다.

l  “deleteCount”: 제거할 요소의 수를 나타내며 선택 사항입니다. 0 이상의 정수여야 합니다.

l  “item1, item2, ...”: 배열에 추가할 요소들을 나타내며 선택 사항입니다.

 

 

◎ 2. 기본 배열 데이터 제거

 

코드에서는 “fruits” 배열에서 인덱스 2부터 시작하여 하나의 요소("cherry")를 제거합니다.

 

const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 1);
 
console.log(fruits)
 
[출력]
["apple", "banana", "date"]

 

 

◎ 3. 요소 교체

 

코드에서는 “fruits” 배열에서 인덱스 1부터 시작하여 두 개의 요소("banana" 및 "cherry")를 제거하고, 그 위치에 "grape"와 "fig" 두 요소를 추가합니다.

 

const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "grape", "fig");
 
console.log(fruits)
 
[출력]
["apple", "grape", "fig", "date"]

 

 

◎ 4. 요소 추가

 

코드에서는 “fruits” 배열에서 인덱스 2에 아무 요소도 제거하지 않고 "grape"와 "fig" 두 요소를 추가합니다.

 

const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 0, "grape", "fig");
 
console.log(fruits)
 
[출력]
["apple", "banana", "grape", "fig", "cherry", "date"]

 

 

◎ 5. 삭제한 개수 이상 추가하는 경우

 

배열에서 두 번째 인덱스부터 2개의 데이터 “banana”, “cherry” 를 삭제하고 빈자리에 “grape”, “fig”, “age” 3개 데이터를 추가합니다.

 

const fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(1, 2, "grape", "fig", "age");
 
console.log(fruits)
 
[출력]
[ 'apple', 'grape', 'fig', 'age', 'date' ]