JavaScript - shift() method

revision:

Category : array

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

Syntax : 

          shift()

Parameters: none

Examples: 

            const array1 = [1, 2, 3];
            const firstElement = array1.shift();
            console.log(array1);
            // Expected output: Array [2, 3]
            console.log(firstElement);
            // Expected output: 1

Practical examples

example: removing an element from an array.

code: 
                    <div>
                        <p id="shift-1"></p>
                        <p id="shift-2"></p>
                        <p id="shift-3"></p>
                    </div>
                    <script>
                        const myFish = ["angel ", "clown ", "mandarin ", "surgeon "];
                        document.getElementById("shift-1").innerHTML = "array before: " + myFish;
                        console.log("myFish before:", myFish);
                        // myFish before: ['angel', 'clown', 'mandarin', 'surgeon']
                        const shifted = myFish.shift();
                        console.log("myFish after:", myFish);
                        // myFish after: ['clown', 'mandarin', 'surgeon']
                        document.getElementById("shift-2").innerHTML = "array after: " + myFish;
                        console.log("Removed this element:", shifted);
                        // Removed this element: angel
                        document.getElementById("shift-3").innerHTML = "removed this element: " + shifted;
                        
                    </script>

example: using shift() method in while loop.

code: 
                    <div>
                        <p id="shift-4"></p>
                        <p id="shift-5"></p>
                        <p id="shift-6"></p>
                    
                    </div>
                    <script>
                        const names = ["Andrew ", "Tyrone ", "Paul ", "Maria ", "Gayatri "];
                        while (typeof (i = names.shift()) !== "undefined") {
                            console.log(i);
                            document.getElementById("shift-4").innerHTML += i +", <br>";
                        }
                        // Andrew, Tyrone, Paul, Maria, Gayatri
                    </script>

example: shift (remove) the first element of an array.

code: 
                    <div>
                        <p id="shift-7"></p>
                        <p id="shift-8"></p>
                    </div>
                    <script>
                        const fruits = [" Banana", " Orange", " Apple", " Mango"];
                        document.getElementById("shift-7").innerHTML = "original array : " + fruits;
                        fruits.shift();
                        document.getElementById("shift-8").innerHTML = "array after shift() : "+ fruits;
                                    
                    </script>