Module 3: JavaScript Functions

Function Parameters

Functions can accept inputs called parameters that allow them to work with different data each time they're called.

Writing a Function Statement

The basic structure of a function in JavaScript:

function sayHello() {
    console.log("Hello");
}
                

To invoke (call) this function, you simply write:

sayHello(); // This will cause the console to print "Hello"

Function execution flow:

console.log("This is logged before the function is invoked");
sayHello(); // This will invoke the function and cause the console to print "Hello"
console.log("This is logged right after the function is finished");
                

Remember: Unless you invoke a function, it will not run. This is good news because it means you can define multiple functions upfront and only call them when needed.

Return Values

Functions can send data back to where they were called using the return statement.

Using the Return Statement

The return statement allows a function to output a value that can be used elsewhere in your code:

function addNumbers(a, b) {
    return a + b; // Returns the sum of a and b
}

const sum = addNumbers(5, 3); // The returned value (8) is stored in the 'sum' variable
console.log(sum); // Outputs: 8
                

Tip: A function stops executing as soon as it encounters a return statement. This means any code after the return statement will not be executed.

Functions Without Return

If a function doesn't have a return statement, it automatically returns undefined:

function greet(name) {
    console.log("Hello, " + name + "!");
    // No return statement
}

const result = greet("Alice"); // Logs "Hello, Alice!" to the console
console.log(result); // Outputs: undefined
                

Function Scope

Scope determines where variables are accessible in your code. Function scope limits variables to the function where they're defined.

Understanding Variable Scope

Variables defined inside a function are only accessible within that function:

function calculateArea() {
    const width = 10;
    const height = 5;
    const area = width * height;
    console.log("The area is: " + area);
}

calculateArea(); // Outputs: "The area is: 50"
// console.log(width); // Error: width is not defined outside the function
                

Global vs. Local Variables

Local Variables

Global Variables

Combining Both

Local variables are declared inside a function and can only be used within that function:

function showLocalVariable() {
    const localVar = "I'm local";
    console.log(localVar); // Works fine
}

showLocalVariable();
// console.log(localVar); // Error: localVar is not defined
                        

Global variables are declared outside of any function and can be accessed anywhere in your code:

const globalVar = "I'm global";

function showGlobalVariable() {
    console.log(globalVar); // Works fine - can access the global variable
}

showGlobalVariable(); // Outputs: "I'm global"
console.log(globalVar); // Also works: "I'm global"
                        

When local and global variables have the same name, the local variable takes precedence inside the function:

const value = "Global value";

function showValue() {
    const value = "Local value";
    console.log(value); // Outputs: "Local value" (local variable)
}

showValue();
console.log(value); // Outputs: "Global value" (global variable)
                        

Arrow Functions

Arrow functions provide a concise syntax for writing function expressions in JavaScript.

Traditional vs. Arrow Functions

Let's compare traditional and arrow function syntax:

Traditional Function

Arrow Function

// Traditional function expression
const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(5, 3)); // Outputs: 15
                        

// Arrow function
const multiply = (a, b) => {
    return a * b;
};

console.log(multiply(5, 3)); // Outputs: 15

// Even more concise with implicit return
const multiplyShort = (a, b) => a * b;

console.log(multiplyShort(5, 3)); // Also outputs: 15
                        

Note: Arrow functions have some differences in how they handle this keyword compared to regular functions. For beginners, focus on the syntax benefits, and you'll learn more about the behavior differences later.

Additional Resources

Try It Yourself

Practice creating and using functions by completing these exercises:

Write a function that takes a person's name as a parameter and returns a greeting message.
Create a function that calculates the area of a rectangle using width and height parameters.
Write a function that converts Celsius to Fahrenheit.
Rewrite any of the above functions using arrow function syntax.

Remember to test your functions by calling them with different arguments!