In JavaScript, Array.prototype.slice() copies a selected range of elements into a new array without changing the original array. Array.prototype.splice() changes the original array by deleting, inserting or replacing elements, and returns the removed items. The similar names conceal an important mutation boundary.<\/p>\n
For user-interface state and functional transformations, use nonmutating approaches unless in-place change is intentional. Modern JavaScript also offers toSpliced(), which returns a changed copy without modifying the source. Check runtime compatibility when targeting older browsers or Node.js releases.<\/p>\n
The start index is included and the end index excluded. If end is omitted, copying continues to the array’s end. slice() does not modify the original array, but copied objects remain shared references.<\/p>\n
const source = [10, 20, 30, 40];\nconst copy = source.slice(1, 3);\nconsole.log(copy); \/\/ [20, 30]\nconsole.log(source); \/\/ unchanged<\/code><\/pre>\nNegative indexes in slice<\/h2>\n
A negative index counts backward from the array’s end. This is useful for getting the last few elements, but very large negative indexes are effectively clamped. A zero-length range returns an empty array.<\/p>\n
const values = [\"a\", \"b\", \"c\", \"d\"];\nconsole.log(values.slice(-2)); \/\/ [\"c\", \"d\"]\nconsole.log(values.slice(2, 2)); \/\/ []<\/code><\/pre>\nsplice(start, deleteCount, …items) mutates<\/h2>\n
splice removes up to deleteCount items starting at the specified position and optionally inserts new elements there. It returns an array of removed elements. A splice operation changes indexes of later elements in the source array.<\/p>\n
const values = [\"a\", \"b\", \"c\"];\nconst removed = values.splice(1, 1, \"x\");\nconsole.log(removed); \/\/ [\"b\"]\nconsole.log(values); \/\/ [\"a\", \"x\", \"c\"]<\/code><\/pre>\nInserting or deleting with splice<\/h2>\n
Setting deleteCount to zero inserts elements. Omitting extra items removes elements. Explicitly pass the desired count rather than assume the second argument is an end index like slice().<\/p>\n
const q = [1, 3];\nq.splice(1, 0, 2); \/\/ [1, 2, 3]\nq.splice(0, 1); \/\/ [2, 3]<\/code><\/pre>\ntoSpliced() avoids in-place mutation<\/h2>\n
ES2023 introduced toSpliced(), which behaves like splice’s change operation but returns a new array. The original array is unchanged. It is useful for immutable state updates, provided the deployment runtime supports the method.<\/p>\n
const old = [1, 2, 3];\nconst next = old.toSpliced(1, 1, 9);\nconsole.log(next); \/\/ [1, 9, 3]\nconsole.log(old); \/\/ [1, 2, 3]<\/code><\/pre>\nShallow copying does not clone nested objects<\/h2>\n
slice() and toSpliced() return new arrays, but nested objects are generally shared references. Mutating an object from a copied array can still affect the original. Copy nested records as needed when state isolation is important.<\/p>\n
const a = [{count: 1}];\nconst b = a.slice();\nb[0].count = 2;\nconsole.log(a[0].count); \/\/ 2<\/code><\/pre>\nChoose the method by intent<\/h2>\n
Use slice for extraction, splice when changing an owned array in place, and toSpliced or a spread-based expression when a new array is needed. In React or similar state models, avoid direct mutation when updates rely on immutable identity.<\/p>\n
const old = [\"a\", \"b\", \"c\"];\nconst next = [...old.slice(0, 1), ...old.slice(2)];\nconsole.log(next); \/\/ [\"a\", \"c\"]<\/code><\/pre>\nHandle ranges, performance and compatibility<\/h2>\n
Indexes outside array boundaries are normalized; negative start positions have their documented meaning. Copying a large array costs memory, while splice may shift elements. Benchmark actual workloads rather than claim one method is universally faster.<\/p>\n
const data = [5, 10, 15];\nconsole.log(data.slice(99)); \/\/ []\nconst version = typeof [].toSpliced;\nconsole.log(version); \/\/ \"function\" on supported runtimes<\/code><\/pre>\nConclusion<\/h2>\n
slice copies a range and leaves the source array alone; splice edits the original and returns removed items. toSpliced supports nonmutating edits on compatible runtimes. Before changing code, decide whether mutation is part of the intended contract.<\/p>\n","protected":false},"excerpt":{"rendered":"
In JavaScript, Array.prototype.slice() copies a selected range of elements into a new array without changing the original array. Array.prototype.splice() changes the original array by deleting, inserting or replacing elements, and returns the removed items. The similar names conceal an important mutation boundary. For user-interface state and functional transformations, use nonmutating approaches unless in-place change is intentional. Modern JavaScript also offers toSpliced(), which returns a changed copy without modifying the source. Check runtime compatibility when targeting older browsers or Node.js releases. slice(start, end) creates a shallow copy The start index is…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[711],"tags":[],"class_list":["post-9634","post","type-post","status-publish","format-standard","hentry","category-programming"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t