splice()

splice() 메서드는 배열로 많은 것이 가능하도록 하는 메서드입니다.

 

splice()는 실제 배열에서만 사용할 수 있고 이터러블이나 배열과 유사한 객체에서는 사용이 불가능합니다.

 

때문에 유사 배열 객체에 사용하기 위해서는 Array.from()으로 배열로 변환 후 사용 가능합니다.

 

splice()는 최소 2개의 인수를 취하지만 더 많은 인수를 취할 수 도 있습니다. 

 

splice()에서는 시작 인덱스를 지정하고 해당 인덱스는 0부터 시작하며 인덱스에서 삭제하려는 항목의 수만큼 삭제를 합니다.

 

이를 위해 splice()는 시작 인덱스와 삭제하려는 항목의 수를 인자로 받습니다. 

 

자세한 사용 예시와 기능은 아래 예시 코드와 함께 하나씩 정리해보도록 하겠습니다.

 

 

 

 

Array.prototype.splice() - JavaScript | MDN

 

 

---

 

요소 추가

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(0, 0, "Good food"); // 0번 인덱스에서 시작, 0개의 항목을 제거, 'Good food' 삽입

console.log(hobbies); // ['Good food', 'Sports', 'Cooking', 'Reading'] 출력

splice()의 첫 번째 인자와 두 번째 인자에 각각 0을 주었습니다. 

 

첫 번째 인자는 0번 인덱스에서 시작을 의미하고, 두 번째 인자는 0개의 항목을 삭제하는 것을 의미합니다.

 

세 번째 인자는 삭제된 값의 위치에 삽입될 요소를 의미합니다.

 

즉 0번 인덱스에서 아무것도 삭제하지 않고 세 번째 인자로 받은 'Good food'를 삽입을 의미합니다.

 

 

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(1, 0, "Good food"); // 1번 인덱스에서 시작, 0개의 항목을 제거, 'Good food' 삽입

console.log(hobbies); // ['Sports', 'Good food', 'Cooking', 'Reading'] 출력

첫 번째 인자의 값을 1로 주면 1번 인덱스에서 0개의 항목을 삭제하고 삭제한 자리에 'Good food'를 삽입하는 것을 의미하니

 

['Sports', 'Good food', 'Cooking', 'Reading']가 출력되게 됩니다.

 

즉 'Good food'가 1번 인덱스에 삽입이 되는 것입니다.

 

 

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(1, 0, "Good food", "Coding");

console.log(hobbies); // ['Sports', 'Good food', 'Coding', 'Cooking', 'Reading'] 출력

삽입은 1개 이상을 인자로 받아 삽입할 수 있습니다.

 

 

 

 

요소 제거

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(0, 1); // 0번 인덱스에서부터 1개의 항목을 제거

console.log(hobbies); // ['Cooking', 'Reading'] 출력

위의 정리에서 말씀드렸듯이 두 번째 인자는 제거할 항목의 수를 의미합니다.

 

즉 위의 예시 코드는 0번째 인덱스에서부터 1개의 항목을 제거하는 것을 의미하며 0번째 인덱스에 있는 'Sports'가 제거됩니다.

 

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(0, 2); // 0번째 인덱스에서 2개의 항목을 제거

console.log(hobbies); // ['Reading'] 출력

해당 예시 코드는 0번째 인덱스부터 2개의 항목을 제거하는 것을 의미하며 0번째 인덱스에 있는 'Sports'부터 'Cooking'까지 2개의 항목이 제거됩니다.

 

 

만약 배열 안 모든 요소를 제거하고 싶다면 아래 예시 코드처럼 1개의 인자만 주고 인자의 값을 0으로 주면 됩니다.

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(0); // 배열 안 모든 요소 제거

console.log(hobbies); // [] 출력

해당 인덱스부터 모든 요소를 제거하고 싶다면 0 대신 해당 인덱스를 인자로 주면 됩니다.

 

 

 

 

값 반환

splice()로 제거된 값은 상수나 변수에 담을 수도 있습니다.

let hobbies = ["Sports", "Cooking", "Reading"];

const removeElement = hobbies.splice(0, 1);

console.log(removeElement);// ['Sports'] 출력

위의 예시 코드처럼 상수에 담으면 제거된 값을 이용할 수 도 있습니다.

 

 

 

 

 

 

그 외에도 첫 번째 인자로 음수 값을 받을 수 도 있습니다.

let hobbies = ["Sports", "Cooking", "Reading"];

hobbies.splice(-1, 1);

console.log(hobbies); // ['Sports', 'Cooking'] 출력

음수 값을 인자로 주게 되면 오른쪽부터 시작하게 됩니다.

 

즉 -1이면 오른쪽의 첫 번째 요소부터 1개의 항목을 제거하게 되는 것입니다.