Arrays slice vs splice js how to#

With these methods, you can extract specific elements from an array, modify the contents of an array, or even create entirely new arrays.

Arrays slice vs splice js how to#

Understanding how to use slice() and splice() is crucial for working with arrays in JavaScript. It can add or remove elements to and from an array, modifying the original array. You can use a knife to cut out the unwanted toppings and add new ones, that's same way we use the splice() method in JavaScript. Now, imagine that you want to add or remove toppings to the pizza. It creates a new array that contains a portion of the original array, without modifying the original array. You can use a pizza cutter to slice the pizza into smaller pieces, that's just how the slice() method works in JavaScript. Imagine you have a large pizza that you want to share with your friends. These methods allow you to add, remove, or replace array items at your discretion.Īrray manipulation in JavaScript has proven to be extremely beneficial in real-world scenarios, especially in cases where you need to loop over amounts of data for output or any other desired effect.In JavaScript, slicing and splicing are not about pizza, but they are equally important when it comes to manipulating arrays. In this article, you learned how to manipulate JavaScript arrays with many different methods, including push(), pop(), shift(), unshift(), and splice(). Here's an example where Orange replaces the existing array item Grape: var items = items.splice(2, 1, 'Orange') console.log(items) // Īnd here's one more example, showing how the array item Banana is removed from the array completely: var items = items.splice(2, 1) console.log(items) // Conclusion Here's an example where Orange is added to array position 2: var items = items.splice(2, 0, 'Orange') console.log(items) // The last method we'll discuss is JavaScript's splice() method, which adds, replaces, or removes items to/from an array. JavaScript splice() Method: Add or Replace Items in an Array Position You can read more about JavaScript array lengths here. Instead of returning the value of the inserted array element, the length of the array is returned: var items = var result = items.unshift(0) console.log(result) // 5 The return value for JavaScript's unshift() method works differently than the other methods. JavaScript's unshift() method works similarly to push(), however instead of adding an item to the end of an array, a new item is prepended to the beginning of the array: var items = items.unshift(0) console.log(items) // Similarly, you can also assign a return value to shift() method which will return the value of the first array element that was removed instead of the remaining array elements: var items = var result = items.shift() console.log(result) // JavaScript unshift() Method: Prepend New Item to Array JavaScript's shift() method works similarly to pop(), however instead of removing an item from the end of an array, the first item from the beginning of the array is removed: var items = items.shift() console.log(items) // If you were to assign the return value of the pop() method, the output would be slightly different, displaying the item that was removed instead of the remaining items in the array: var items = var result = items.pop() console.log(result) // 4 JavaScript shift() Method: Remove First Item from Array In this example, you'll notice that 4, the last element in the array, is removed from the array, and only the first three items are left: var items = items.pop() console.log(items) // 1, 2, 3 JavaScript's pop() method removes the last item in an array. If you were to assign the return value of the push() method, the output would be slightly different, displaying the item that was appended to the end of the array instead of all the elements: var items = var result = items.push(4) console.log(result ) // 4 JavaScript pop() Method: Remove Last Item from Array Here, the number 4 is appended to the end of the array, changing the number of array elements from three to four: var items = items.push(4) console.log(items) // JavaScript's push() method appends an item to the end of an array. JavaScript push() Method: Append New Item to Array

In this article, you'll learn how to manipulate arrays with a set of pre-built JavaScript functions: push(), pop(), shift(), unshift(), and splice(). Within these arrays, many different data types can exist, including strings, integers, objects, other arrays, and more.

JavaScript arrays are extremely useful for assigning sequential collections of data.