JavaScript Array.copyWithin() Method

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:

plaintext
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.

javascript
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.

javascript
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.

javascript
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.

javascript
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.

javascript
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.

JavaScript

6769

669

Related Articles