How to rotate array elements by using JavaScript ? - GeeksforGeeks

27 Apr, 2020
Given an array containing some array elements and the task is to perform the rotation of the array with the help of JavaScript. There are two approaches that are discussed below:
Approach 1: We can use the Array unshift() method and Array pop() method to first pop the last element of the array and then insert it at the beginning of the array.
Example: This example rotates the array elements.<!DOCTYPE HTML><html>  <head>    <title>        Rotate the elements in an array        by using JavaScript Methods    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <button onclick="myGFG()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var array = ['GFG_1', 'GFG_2', 'GFG_3', 'GFG_4'];        var up = document.getElementById("GFG_UP");          up.innerHTML = "Click on the button to perform"                     + " the operation<br>Array - ["                    + array + "]";          var down = document.getElementById("GFG_DOWN");          function arrayRotate(arr) {            arr.unshift(arr.pop());            return arr;        }                  function myGFG() {            array = arrayRotate(array);            down.innerHTML = "elements of array = ["                            + array + "]";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        Rotate the elements in an array        by using JavaScript Methods    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>      <p id="GFG_UP"></p>      <button onclick="myGFG()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var array = ['GFG_1', 'GFG_2', 'GFG_3', 'GFG_4'];        var up = document.getElementById("GFG_UP");          up.innerHTML = "Click on the button to perform"                     + " the operation<br>Array - ["                    + array + "]";          var down = document.getElementById("GFG_DOWN");          function arrayRotate(arr) {            arr.unshift(arr.pop());            return arr;        }                  function myGFG() {            array = arrayRotate(array);            down.innerHTML = "elements of array = ["                            + array + "]";        }    </script></body>  </html>
Output:
Approach 2: We can use the Array push() method and Array shift() method to shift the first element and then insert it at the end.
Example: This example rotates the array elements.<!DOCTYPE HTML><html>  <head>    <title>        Rotate the elements in an array        by using JavaScript Methods    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onclick="myGFG()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var array = ['GFG_1', 'GFG_2', 'GFG_3', 'GFG_4'];        var up = document.getElementById("GFG_UP");        up.innerHTML = "Click on the button to perform"                     + " the operation<br>Array - ["                    + array + "]";          var down = document.getElementById("GFG_DOWN");          function arrayRotate(arr) {            arr.push(arr.shift());            return arr;        }                  function myGFG() {            array = arrayRotate(array);            down.innerHTML = "elements of array = ["                           + array + "]";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        Rotate the elements in an array        by using JavaScript Methods    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">        GeeksForGeeks    </h1>          <p id="GFG_UP"></p>      <button onclick="myGFG()">        Click Here    </button>          <p id="GFG_DOWN"></p>      <script>        var array = ['GFG_1', 'GFG_2', 'GFG_3', 'GFG_4'];        var up = document.getElementById("GFG_UP");        up.innerHTML = "Click on the button to perform"                     + " the operation<br>Array - ["                    + array + "]";          var down = document.getElementById("GFG_DOWN");          function arrayRotate(arr) {            arr.push(arr.shift());            return arr;        }                  function myGFG() {            array = arrayRotate(array);            down.innerHTML = "elements of array = ["                           + array + "]";        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Form validation using HTML and JavaScript
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?