Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Methods Demo</title>
</head>
<body>
    <h1>Array Methods in JavaScript</h1>

    <script>


        console.log("push() method:");
        const fruits = ["Apple", "Banana"];
        fruits.push("Orange");

        console.log("\npop() method:");
        const lastFruit = fruits.pop();
        console.log(lastFruit); 
        console.log(fruits);    

        console.log("\nshift() method:");
        const firstFruit = fruits.shift();
        console.log(firstFruit); 
        console.log(fruits);    

        console.log("\nunshift() method:");
        fruits.unshift("Apple");
        console.log(fruits);

        console.log("\nsplice() method:");
        const newFruits = ["Apple", "Banana", "Orange", "Mango"];
        const removedFruits = newFruits.splice(1, 2, "Grapes");
        console.log("Removed Fruits:", removedFruits); 
        console.log("Updated Fruits:", newFruits);     

        console.log("\nslice() method:");
        const citrus = newFruits.slice(0, 2);
        console.log("Sliced Fruits:", citrus);
        console.log("Original Fruits:", newFruits); 

        console.log("\nmap() method:");
        const numbers = [1, 2, 3, 4];
        const doubled = numbers.map(num => num * 2);
        console.log("Doubled Numbers:", doubled);

        console.log("\nfilter() method:");
        const evenNumbers = numbers.filter(num => num % 2 === 0);
        console.log("Even Numbers:", evenNumbers); 
    </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter