The slice() method in JavaScript returns a shallow copy of a portion of an array as a new array. The original array remains unchanged.
slice() Example
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArray = numbers.slice(4,8);
console.log("The sliced arrays is:", newArray)
// Output: The sliced arrays is: [ 5, 6, 7, 8 ]slice() Syntax
The syntax of the slice() method is:
arr.slice(begin, end)
slice() Parameters
The slice() method accepts two arguments, and both are optional.
start (Optional): The starting index from where the array needs to be extracted. If you don’t pass this argument, the slice() method takes 0 as the default starting index.
end (Optional): The ending index point till the array needs to be extracted. If you don’t pass this argument, the slice() method takes the index of the last element.
slice() Return Value
The slice() method extracts the portion of an array and returns it as a new array. The function does a shallow copy of elements into a new array keeping the original array intact.
Note: For objects, the slice() method copies object references into the new array. Both the original and new arrays refer to the same object. If an object changes, the changes are visible to both the new and original arrays.
Example 1: Clone an array using the JavaScript slice() method
Since we are not passing any start and end parameters to the slice() method, it will clone the entire array into a new array.
var numbers = [1, 2, 3, 4, 5];
var clonedNumbers = numbers.slice();
console.log("Cloned Numbers are:", clonedNumbers)Output
Cloned Numbers are: [ 1, 2, 3, 4, 5 ]Example 2: JavaScript slice() method
The typical use of the slice() method is to copy a portion of an array without modifying the source array. Here is an example:
let programmingLangs = ["JavaScript", "Python", "C#", "Java", "PHP", "Node"];
// Slice array wihtout passing any params
let arr1 = programmingLangs.slice()
console.log("Clones a new array", arr1)
//Slice array with start param
let arr2 = programmingLangs.slice(2)
console.log("Array will be sliced from Index 2", arr2)
//Slice array with start and end param
let arr3 = programmingLangs.slice(2, 5)
console.log("Array will be sliced from Index 2 to 4", arr3) //Note the end index 5 is not extracted
// Slice array with start param and end param greater
// than array length
let arr4 = programmingLangs.slice(3, 10)
console.log("Array will be sliced from Index 3 till end", arr4)Output
Clones a new array [ 'JavaScript', 'Python', 'C#', 'Java', 'PHP', 'Node' ]
Array will be sliced from Index 2 [ 'C#', 'Java', 'PHP', 'Node' ]
Array will be sliced from Index 2 to 4 [ 'C#', 'Java', 'PHP' ]
Array will be sliced from Index 3 till end [ 'Java', 'PHP', 'Node' ]Example 3: JavaScript slice() With Negative index
In JavaScript, you can also use negative starting and ending indices. The index of the last element is -1, the index of the second last element is -2, and so on.
let programmingLangs = ["JavaScript", "Python", "C#", "Java", "PHP", "Node"];
// Slice the last 4 elements in an array
let arr1 = programmingLangs.slice(-4)
console.log("Last 4 elements will be sliced", arr1)
//Slice array from index start to second last
let arr2 = programmingLangs.slice(1, -1)
console.log("Array will be sliced from Index 1 to second last", arr2) //Note the end is -1 and that index will not be sliced
Output
Last 4 elements will be sliced [ 'C#', 'Java', 'PHP', 'Node' ]
Array will be sliced from Index 1 to second last [ 'Python', 'C#', 'Java', 'PHP' ]Example 4: JavaScript slice() with Objects as Array Elements
The slice() method shallow copies the elements of the array. It copies the object references to the new array. So if the reference object is modified, the changes are visible in the original array.
In the below example Slice() method creates a new array new_employee from current_employee. Both these includes a reference to original object employee. When the name of new_employee is changed to “Rachel” both the arrays reflects the change.
// Creating an Employee Object
let employee = {
name: "Chandler Bing",
ID: 222,
Age: 25
}
let current_employee = [employee, "Software Developer", "India"]
// Create new employee object from current employee
let new_employee = current_employee.slice()
// Making changes to new employee object
new_employee[0].ID = 225
new_employee[0].name = "Rachel"
//Original Employee Object
console.log("Original Employee Object", JSON.stringify(employee))
//Current Employee Object
console.log("current employee Object", JSON.stringify(current_employee))
//New Employee Object
console.log("New Employee Object ", JSON.stringify(new_employee))
Output
Original Employee Object {"name":"Rachel","ID":225,"Age":25}
current employee Object [{"name":"Rachel","ID":225,"Age":25},"Software Developer","India"]
New Employee Object [{"name":"Rachel","ID":225,"Age":25},"Software Developer","India"]
Srinivas
