Cyclically Rotate an Array by One in JavaScript



To cyclically rotate an array by one means shifting the value present at each index to their left or right by one.

In this article, we are having an array and our task is to write a JavaScript program to cyclically rotate an array by one. Users must be familiar with JavaScript loops and array operations.

Cyclic rotation of array

Example

Input:
arr= [ 1, 2, 3, 4, 5, 6 ]

Output:
Left rotation: [ 2, 3, 4, 5, 6, 1 ]
Right rotation: [ 6, 1, 2, 3, 4, 5 ] 

Approaches to Cyclically Rotate an Array by One

Here is a list of approaches to cyclically rotate an array by one which we will be discussing in this article with stepwise explanation and complete example codes.

Using Brute Force Approach

To cyclically rotate an array by one, we have used brute force approach where we traverse over the elements of array and swap the elements using a temp variable.

  • We have declared an array arr initially and defined two functions leftRotate() and rightRotatethat accepts the array arr as its argument.
  • We have used length property to store the length of the array in the variable n and also declared a temporary variable temp to store the first element of the array.
  • Then we have used for loop to traverse over the array and assigned the value of the next element to the current element. This will cause a left shift of the element or left rotation.
  • We have assigned the value of temp that is first element at the end of the array.
  • Similarly, we traverse over the loop and assign the current element with the previous element to create a right rotation. The rotated array is then displayed in web console using console.log() method.
  • At the end both the functions leftRotate() and rightRotate() are called with the array arr passed as argument of the function.

Example

Here is a complete example code implementing above mentioned steps to cyclically rotate an array by one using brute force approach where we have used a temp variable.

function leftRotate(arr) {
    let n = arr.length
    let temp = arr[0]
    for (let i = 0; i  0; i--) {
        arr[i] = arr[i - 1];
    }
    arr[0] = temp;
    console.log("Array after right rotation is: ")
    console.log(arr)
}

let arr = [1, 2, 3, 4, 5, 6];
console.log("Given array is: ")
console.log(arr)
leftRotate(arr)


arr = [1, 2, 3, 4, 5, 6]
rightRotate(arr)

Using Two Pointers Approach

In this example to cyclically rotate an array by one, we have used two pointers approach, where we maintain two pointers and swap the elements for left and right rotation.

  • We have declared an array arr initially and defined two functions leftRotate() and rightRotatethat accepts the array arr as its argument.
  • Inside both the functions, we have set two pointers, one at the beginning of the array and one at the end of the array.
  • For left rotation, we have fixed the pointer set at the beginning of the array and used the pointer at the end to swap the elements using temp variable.
  • We have used while loop to loop over the array elements until value of both i and j are same.
  • Similarly, for right rotation, we fix the last pointer and use pointer at the beginning to traverse over the array.

Solution

Here is the solution of above mentioned approach.

Input:
arr= [ 1, 2, 3, 4, 5, 6 ]

For left rotation:
i=0, j=5:
temp=1, arr[0]=6, arr[5]=1
i=0, j=4:
temp=6, arr[0]=5, arr[4]=6
i=0, j=3:
temp=5, arr[0]=4, arr[3]=5
i=0, j=2:
temp=4, arr[0]=3, arr[2]=4
i=0, j=1:
temp=3, arr[0]=2, arr[1]=3

Output:
Array after left rotation is: [ 2, 3, 4, 5, 6, 1 ]

Example

Here is a complete example code implementing above mentioned steps to cyclically rotate an array by one using two pointers method.

function leftRotate(arr) {
    let n = arr.length
    let i = 0, j = n - 1;
    let temp
    while (i != j) {
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
        j--;
    }
    console.log("Array after left rotation is: ")
    console.log(arr);
}
function rightRotate(arr) {
    let n = arr.length
    let i = 0, j = n - 1;
    let temp
    while (i != j) {
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
        i++;
    }
    console.log("Array after right rotation is: ")
    console.log(arr)
}

let arr = [1, 2, 3, 4, 5, 6];
console.log("Given array is: ")
console.log(arr)
leftRotate(arr)

arr = [1, 2, 3, 4, 5, 6]
rightRotate(arr)

Using Array Methods

In this example we have used array methods such as pop() and unshift() to cyclically rotate an array by one.

  • We have declared an array arr initially and defined a function rotate() that accepts the array as its argument.
  • Then we have used pop() method to pop the last element of the array and stored it in a variable named lastElement.
  • Then, we have used the unshift() method to append the variable lastElement at the beginning of the array.
  • Appending the element at the beginning, makes the element of the array to cyclically rotate in right direction by one.
  • The cyclically rotated array is then displayed in web console using console.log() method.

Example

Here is a complete example code implementing above mentioned steps to cyclically rotate an array by one using array methods pop() and unshift().

let arr = [1, 2, 3, 4, 5, 6];
console.log("Given array is: ");
console.log(arr);

function rotate(arr) {
    let lastElement = arr.pop(); 
    arr.unshift(lastElement); 
    return arr;
}

console.log("Array after rotation: ");
console.log(rotate(arr));

Complexity Comparison

Here is a comparison of time and space complexity of all the above approaches.

Approach Time Complexity Space Complexity
Brute Force Approach O(n) O(1)
Two Pointer Approach O(n) O(1)
Using Array Methods O(n) O(1)

Conclusion

In this article, to cyclically rotate an array by one, we have implemented three approaches which are: by using brute force approach using a temp variable, using two variable approach and using array methods pop() and unshift(). All the three approaches work on the O(n) time complexity.

Practice and learn from a wide range of JavaScript examples, including event handling, form validation, and advanced techniques. Interactive code snippets for hands-on learning.
Updated on: 2025-01-10T10:35:20+05:30

348 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements