JavaScript Glossary - Lesson #17

JavaScript Array .splice() Method

The splice array method changes an existing array by removing, adding and/or replacing specified elements from it. The method mutates the array and returns an array of all elements removed from the array. An empty array is returned if no elements are removed.

js
[1, 2, 3, 4, 5].splice(1, 3)
// [2, 3, 4]
js
// New array
const items = [1, 2, 3, 4, 5]

// Delete 4 elements counting from the 0 index
let deletedItems = items.splice(0, 4)

// Output deleted elements
console.log(deletedItems) // [1,2,3,4]
js
array.splice(startIndex, deleteCount[, item1, item2, ...])

startIndex This is the index at which the method begins making changes to the array. If the value provided is less than 0 or negative, it will start at that index from the end of the array rather than the beginning. If the value is greater than the length of the array, the value will be set to the length of the array.

deleteCount This is the number of items to remove from the array. If the value specified is greater than the difference of array length and the startIndex, every element from the startIndex to the end of the array will be deleted. If the value is 0 or less, no elements are removed from the array.

item1, item2,... This is the value to be added to the array starting from the startIndex. splice() will remove elements from the array if no items are provided.

This method will return an array of all elements removed from the array. If no elements are removed from the array, an empty array is returned.

js
const numbers = [1, 2, 4, 5];
numbers.splice(2, 0, 3);
// numbers: Array [1, 2, 3, 4, 5]

const oddNumbers = [1, 3, 5, 7, 11];
oddNumbers.splice(4, 1, 9);
// numbers: Array [1, 3, 5, 7, 9]

oddNumbers.splice(3, 1);
// numbers: Array [1, 3, 5, 9]

Splice mutates the original array and leaves only the remaining array items after the deletions or replacements.

The .splice() method is commonly used to remove a particular element in an array.

js
// New array of todos
const todos = [{name: 'finish food', id: 1}, {name: 'Clean room', id: 2}, {name: 'Water plants', id: 3}];

// Delete one todo in the 1 index
todos.splice(1, 1);

// Output result
console.log(todos); // [{"name":"finish food","id":1},{"name":"Water plants","id":3}]

The splice() method is also used to add new elements in a given position in an array.

js
// List of languages
const languages = ['python', 'java', 'c++'];

// Add new languages from index 2 and remove no element
languages.splice(2, 0, 'javascript', 'ruby');

// Output result
console.log(languages); // ["python","java","javascript","ruby","c++"]

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)