The JavaScript Array.copyWithin() method is used to shallow copy part of an array to another location within the same array, without modifying its size. It allows you to overwrite elements within the array based on the positions you specify.
Unlike other array methods, copyWithin() modifies the original array and does not create a new array. This method can be useful when you want to rearrange or copy parts of an array to different positions within the array.
Syntax
The syntax for the Array.copyWithin() method is given below:
array.copyWithin(target, start, end)
Parameters
The Array.copyWithin() method accepts three parameters:
- target (Required): The index at which the copied sequence is to be placed. If negative, the target will be counted from the end of the array.
- start (Optional): The index at which to start copying elements from the array. If omitted, it defaults to 0. If negative, it will be counted from the end of the array.
- end (Optional): The index at which to stop copying elements (not inclusive). If omitted, it defaults to the length of the array. If negative, it will be counted from the end of the array.
Return Value
The modified array with the copied sequence of elements placed at the target index.
Examples of JavaScript Array.copyWithin() Method
Example 1: Copying a Portion of the Array
You can use copyWithin() to copy elements from one part of the array to another.
const arr = [10, 20, 30, 40, 50];
arr.copyWithin(0, 3);
console.log(arr); // Output: [40, 50, 30, 40, 50]
Explanation: The method copies elements from index 3 to the start of the array, replacing the original values of 10 and 20 with 40 and 50.
Example 2: Copying Elements to a Different Target Position
You can copy elements from one part of the array and place them in a different position.
const arr = [1, 2, 3, 4, 5, 6];
arr.copyWithin(2, 0, 3);
console.log(arr); // Output: [1, 2, 1, 2, 3, 6]
Explanation: The elements from index 0 to 3 ([1, 2, 3]) are copied to start at index 2, overwriting the elements at positions 2, 3, and 4.
Example 3: Using Negative Indices
You can use negative indices in both the target and start positions.
const arr = [10, 20, 30, 40, 50];
arr.copyWithin(-2, 0, 2);
console.log(arr); // Output: [10, 20, 30, 10, 20]
Explanation: The method copies elements from index 0 to 2 ([10, 20]) and places them at the last two positions in the array.
Example 4: No Parameters (Default Behavior)
If you call copyWithin() without specifying the start and end parameters, it defaults to copying the entire array starting from index 0.
const arr = [5, 10, 15, 20, 25];
arr.copyWithin(1);
console.log(arr); // Output: [5, 5, 10, 15, 20]
Explanation: Since no start or end is provided, the method copies elements from index 0 onward and places them starting at index 1.
Example 5: Copying Overlapping Ranges
When you copy elements that overlap with the target range, the method handles it by first copying from the source, then replacing the target.
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 2);
console.log(arr); // Output: [1, 3, 4, 5, 5]
Explanation: The elements starting from index 2 ([3, 4, 5]) are copied to the position starting at index 1, overwriting the original elements.