Functions: An Introducion - JavaScript Code Snippets

Some sample JavaScript code snippets for:

Creating a function declaration.
Creating a function expression.
Showing that function declarations are hoisted but function expressions are not.
Showing that function expressions may be unnamed or anonymous.
Using arrow functions that contain one or multiple statements.

<!DOCTYPE html><html lang="en">
        <head>
            <meta charset="UTF-8">
            <style>@media (min-width:1200px){header{padding:2% calc((100% - 800px)/ 2) 3% calc((100% - 800px)/ 2);margin:0 auto}}@media (min-width:1025px) and (max-width:1199px){header{padding:3% 14% 4% 14%}}@media (min-width:768px) and (max-width:1024px){header{padding:3% 8% 4% 8%}}@media (max-width:767px){header{padding:6% 13% 9% 13%}}h1 .font-mono{color:#888}body{font-family:sans-serif}li,p{font-size:18px;line-height:1.5}li{margin-bottom:12px}</style>
        </head>
        <body>
        <header>
            <h1>Introdution to Functions: <span class="font-mono">JS Code Snippets</span></h1>
            <p>See the online Lesson: <a href='https://www.munnelly.com/javascript/functions/'>Introdution to Functions</a></p>
            <p>View the JavaScript output in your web browser by pressing the following keys and selecting the <b>Console</b> tab:</p>
            <ul>
                <li><b>Ctrl</b> + <b>Shift</b> + <b>i</b> (Windows)</li>
                <li><b>⌘ Command</b> + <b>Shift</b> + <b>i</b> (Mac).</li>
            </ul>
        </header>
        <main>

<script>

console.log("%c=== FUNCTION DECLARATIONS ===", "color: white; background-color: green; padding: 2px");
    
            function displayGreeting() {
                console.log("Hello, world!");
                // displays Hello, World! when called
            }
    
            displayGreeting(); // calls the function and displays the message string
    
            function displayColor1() {
                const colorName = "red";
                console.log(colorName); // displays variable colorName (red)
            }
    
            displayColor1(); // calls the function
    
            function displayColor2() {
                const colorName = "blue";
                console.log("colorName is: "+colorName); // displays variable colorName (blue)
                console.log(`colorName is: ${colorName}`); // also displays variable colorName (blue)
            }
    
            displayColor2() // calls the function
    
            console.log("\n%c=== FUNCTION DECLARATIONS ARE HOISTED ===", "color: white; background-color: green; padding: 2px");
    
            // Declare function and then call it
            function showMessage1() {
                console.log("Function declared and then called"); 
                // This code works, as expected
            }
    
            // Function called AFTER it has been declared
            showMessage1();
    
            // Function called BEFORE it has been declared
            showMessage2();
    
            // Declare function after calling it
            function showMessage2() {
                console.log("Function declared after it is called (hoisted)"); 
                // This code works - because function declarations are HOISTED
            }
    
            console.log("\n%c=== NAMED FUNCTION EXPRESSIONS ===", "color: white; background-color: green; padding: 2px");
    
            // Function expression - named
            const sayHello1 = (function sayHelloFunction() {
                console.log("Named function expression says 'Hello'."); 
            });
            // Note the closing brace, parenthesis }) and ; on final line
            // The } closes the code block
            // The ) closes the function expression
            // The ; terminates the expression
    
            // Function expression called by variable name
            // Is function name really necessary?
            sayHello1();
    
    
            console.log("\n%c=== ANONYMOUS FUNCTION EXPRESSIONS ===", "color: white; background-color: green; padding: 2px");
    
            // Function expression - unnamed (anonymous)
            const sayHello2 = function () {
                console.log("Anonymous function expression says 'Hello'."); 
            };
            // Closing parenthesis ) no longer necessary
    
            // Function expression name not needed to call the function
            sayHello2();
    
            // Function expressions not hoisted
            // sayHello3();
    
            // sayHello3 = function () {
            //     console.log("Function expression fails to say 'Hello'."); 
            // };
    
            // Error: Cannot call a function expression before declaring it
    
            console.log("\n%c=== ARROW FUNCTIONS ===", "color: white; background-color: green; padding: 2px");
    
            // Replace the keyword 'function' with 'fat arrow'
            sayHelloArrow1 = () => {
                console.log("Hello from arrow function one.");
            }
            
            sayHelloArrow1();
    
            // Code block {} not necessary for one-line statement;
            sayHelloArrow2 = () => console.log("Hello from arrow function two."); 
            
            sayHelloArrow2();
    
    
        </script>
           
    
    </main>
    </body>
    </html>

Instructions for use

the web page containing the JavaScript code.
Open the page in Brave or other, lesser web browsers.
View the JavaScript output by pressing the following keys and selecting the Console tab:
- Ctrl + Shift + i (Windows)
- ⌘ Command + Shift + i (Mac).
Open the web page in VS Code, VS Code Online or Sublime Text. All are good choices.
Play around with the JavaScript code. Change things and see what happens.

✅ That’s it.