<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style></style>
</head>
<body>
    <h1>For Each</h1>

    <p id="p1"></p>

    <script>
        // forEach() = method used to iterate over the elements
        //             of an array and apply a specified function (callback)
        //             to each element

        //             array.forEach(callback)

        const txt = document.getElementById("p1");

        let fruits = ["apple", "orange", "banana", "coconut"];

        fruits.forEach(capitalize);
        fruits.forEach(display);

        function uppercase(element, index, array){
            array[index] = element.toUpperCase();
        }
        function lowercase(element, index, array){
            array[index] = element.toLowerCase();
        }
        function capitalize(element, index, array){
            array[index] = element.charAt(0).toUpperCase()+ element.slice(1);
        }
        function display(element){
            console.log(element);
        }


/*
        let numbers = [1, 2, 3, 4, 5]
        //numbers.forEach(display);
        //numbers.forEach(double);
        //numbers.forEach(triple);
        //numbers.forEach(square);
        numbers.forEach(cube);
        function double(element, index, array){
            array[index] = element * 2;
        }
        function triple(element, index, array){
            array[index] = element * 3;
        }
        function square(element, index, array){
            array[index] = Math.pow(element, 2);
        }
        function cube(element, index, array){
            array[index] = Math.pow(element, 3);
        }
        function display(element){
            console.log(element);
        }
*/
    </script>
</body>
</html>