How to Rotate Array Elements using JavaScript?

In this article, you will learn how to rotate array elements to left or right using JavaScript. There are different approaches to rotate the array elements. Let’s discuss a few of them.

Rotate the Array Elements to the Left

To rotate the array elements to the left, you can use the shift() and push() methods. The shift() method, removes the first element from the array and returns the removed element.

On the other hand, the push() method, appends an element at the end of the array and returns the new length of the modified array.

So, to rotate the array elements to the left:

1. Remove the first element of the array using the shift() method.
2. Store the removed element in a temporary variable.
3. Append the removed element at the end of the array using the push() method.

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

// Remove first element
let firstElement = fruits.shift()

// Append first element at the last
fruits.push(firstElement);

console.log(fruits);
// Output: ["banana", "grapes", "mango", "orange", "apple"]

Rotate the Array Elements to the Left N times:

If you want to rotate the array elements to the left N times, you can simply put the above code inside a for or a while loop.

Let’s say we want to rotate the above array elements to the left 3 times:

// Rotate Array Elements to the left N times

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const N = 3;

for(let i = 0;i < N; i++){
    
    // Remove first element
    let firstElement = fruits.shift()
    
    // Append first element at the last
    fruits.push(firstElement);
    
}

console.log(fruits);
// Output: ["mango", "orange", "apple", "banana", "grapes"]

Rotate the Array Elements to the Right

To rotate the array elements to the right you can use the pop() and unshift() method.

The pop() method removes the last element of the array and returns the removed element. The unshift() method on the other hand adds an element at the beginning of the array and returns the new length of the modified array.

So, to rotate the array elements to the right:

1. Remove the last element of the array using the pop() method.
2. Store the removed element in a temporary variable.
3. Append the removed element at the beginning of the array using the unshift() method.

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

// Remove last element
let lastElement = fruits.pop();

// Append last element at the beginning
fruits.unshift(lastElement);

console.log(fruits);
// Output: ["orange", "apple", "banana", "grapes", "mango"]

Rotate the Array Elements to the Right N times:

If you want to rotate the array elements to the right N times, you can simply put the above code inside a for or a while loop.

Let’s say we want to rotate the above array elements to the right 3 times:

// Rotate Array Elements to the right N times

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const N = 3;

for(let i=0; i < N; i++){
    
    // Remove last element
    let lastElement = fruits.pop();
    
    // Append last element at the beginning
    fruits.unshift(lastElement);    
}

console.log(fruits);
// Output: ["grapes", "mango", "orange", "apple", "banana"]

Thanks for reading.