How to perform unshift operation without using unshift() method in JavaScript ?

0 0 1 minute read

The task is to perform unshift operation without using the unshift() method with the help of jQuery. There are two approaches that are discussed below:

Approach 1: We can use the Array concat() method which is used to join two or more arrays. Just pass the newElement as the arrays of size 1 and the rest of the array.

Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to perform the unshift() operation  
        without using it in JavaScript 
    </title> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;">  
            zambiatek  
    </h1> 
    <p id="GFG_UP"> 
    </p> 
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
    <p id="GFG_DOWN"> 
    </p> 
    <script> 
        var array = ['Geeks', 'GFG', 'Geek', 'zambiatek']; 
        var up = document.getElementById("GFG_UP"); 
        up.innerHTML = "Array = [" + array + "]"; 
        var down = document.getElementById("GFG_DOWN"); 
  
        function myGFG() { 
            var newElement = 'gfg'; 
            newArray = [newElement].concat(array); 
            down.innerHTML = "Elements of array = [" 
                              + newArray + "]"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Approach 2: We can use the ES6 spread operator to perform the operation.

Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to perform the unshift() operation without  
        using it in JavaScript 
    </title> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;">  
            zambiatek  
    </h1> 
    <p id="GFG_UP"> 
    </p> 
    <button onclick="myGFG()"> 
        Click Here 
    </button> 
    <p id="GFG_DOWN"> 
    </p> 
    <script> 
        var array = ['Geeks', 'GFG', 'Geek', 'zambiatek']; 
        var up = document.getElementById("GFG_UP"); 
        up.innerHTML = "Array = [" + array + "]"; 
        var down = document.getElementById("GFG_DOWN"); 
  
        function myGFG() { 
            var newElement = 'gfg'; 
            newArray = [newElement, ...array]; 
            down.innerHTML = "elements of array = [" 
                            + newArray + "]"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!