<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>