JavaScript Tutorial 3: Functions & Scope

Lesson 2 Review

In our last lesson, we learned how to use Conditional Statements (if / else) and Strict Equality (===) to make logical decisions. But what if you need to run that same exact logic 50 times across your website? Copying and pasting the code 50 times is terrible engineering. Today, we solve that with Functions.

Step 1: Function Declarations (The Blueprint)

A function is a reusable block of code designed to perform a specific task. You write the code once, and then you can "call" it (execute it) as many times as you want.

There are two parts to using a function:

1. Declaring it: Creating the blueprint using the function keyword.
2. Calling it: Telling the browser to actually run the blueprint using parentheses ().

The JavaScript: Creating and Calling a Function

// 1. Declare the Function
function greetUser() {
  console.log("Hello! Welcome to our application.");
  console.log("Loading your dashboard...");
}

// 2. Call the Function (If you forget the parentheses, nothing happens!)
greetUser();
greetUser(); // Runs the code a second time!

Step 2: Parameters and Arguments (Dynamic Data)

A function that does the exact same thing every time isn't very useful. We want to pass dynamic data into the function so it can calculate different results. We do this using Parameters and Arguments.

• Parameters: The empty placeholders defined inside the parentheses when you create the function.
• Arguments: The actual real data you pass into the parentheses when you call the function.

The JavaScript: Making it Dynamic

// 'name' and 'age' are Parameters (empty variables waiting for data)
function registerUser(name, age) {
  console.log("User Registered: " + name);
  if (age >= 18) {
    console.log("Access level: Adult");
  } else {
    console.log("Access level: Minor");
  }
}

// "Alice" and 25 are Arguments (the actual data being passed in)
registerUser("Alice", 25);
registerUser("Bob", 16);

Console Output:

> User Registered: Alice
> Access level: Adult
> User Registered: Bob
> Access level: Minor

Step 3: The Return Statement (Giving Data Back)

So far, our functions just print messages to the console. But in real software engineering, you usually want a function to calculate a math equation and give the final answer back to the rest of your program so you can use it somewhere else (like displaying it on the screen in HTML).

To do this, we use the return keyword. Important: The moment a function hits a return statement, the function immediately stops running. Any code written beneath a return statement will never execute.

The HTML & JavaScript: Using Returned Data

<!-- HTML -->
<div id="cart-total"></div>

/* JavaScript */
function calculateTax(price) {
  let taxAmount = price * 0.08; // 8% Tax
  let finalPrice = price + taxAmount;
  // Send the final number BACK to whoever called the function!
  return finalPrice;
}

// We call the function and catch the returned value in a new variable
let checkoutTotal = calculateTax(100);

// Now we can inject that returned data into our HTML
document.getElementById("cart-total").innerHTML = "Total: $" + checkoutTotal;

HTML Output:

Total: $108

Step 4: Arrow Functions (Modern ES6 Syntax)

In 2015, JavaScript introduced a newer, shorter way to write functions called Arrow Functions. You will see this syntax everywhere in modern frameworks like React and Node.js.

Instead of using the function keyword, you store the function inside a const variable and use a "fat arrow" =>.

The JavaScript: Traditional vs Arrow Syntax

// Traditional Syntax
function multiply(a, b) {
  return a * b;
}

// Modern Arrow Function Syntax
const multiplyArrow = (a, b) => {
  return a * b;
};

// They are called the exact same way
console.log( multiplyArrow(5, 5) ); // Outputs 25

Step 5: Scope (Where Does Data Live?)

This is a critical concept. Scope determines where your variables are allowed to be seen and used.

• Global Scope: Variables created outside of any function. They can be seen and used by absolutely any code in your file.
• Local (Block) Scope: Variables created inside a function (or an if statement). They are locked inside those curly braces {}. The rest of the program cannot see them. When the function finishes running, those local variables are destroyed!

The JavaScript: Scope Traps

let playerName = "Hero123"; // GLOBAL: Everyone can see this

function startLevel() {
  let secretKey = "XYZ-99"; // LOCAL: Only startLevel() can see this
  console.log(playerName + " started the level."); // Works fine!
}

startLevel();

// This will cause a FATAL ERROR because secretKey is locked inside the function!
console.log(secretKey); // ReferenceError: secretKey is not defined

Final Quiz: Test Your JavaScript Logic

Click the buttons below to verify your knowledge.

1. What is the difference between a Parameter and an Argument?

A) They are the exact same thing, just different words.

Incorrect. They refer to two distinct parts of the function lifecycle.

B) A Parameter is the actual data (like "Alice"). An Argument is the empty variable placeholder.

Incorrect. You have them reversed.

C) A Parameter is the empty placeholder variable you define when CREATING the function. An Argument is the actual real data you pass in when CALLING the function.

Correct! The parameter is the blueprint requirement. The argument is the material you fulfill it with.

2. What happens if you write a `console.log("Finished!")` statement immediately *below* a `return` statement inside a function?

A) It prints "Finished!" to the console.

Incorrect. The code never reaches that line.

B) The function crashes with a syntax error.

Incorrect. It is not a syntax error; it is just "unreachable code."

C) Absolutely nothing happens. The `return` statement forces the function to stop executing immediately.

Correct! `return` acts as an immediate exit door. Any code written below it inside that function is completely ignored.

3. Why will `let x = 10;` cause an error if you try to `console.log(x)` outside of the function where `let x` was created?

A) Because variables created inside a function have Local Scope, meaning they are locked inside those curly braces and destroyed when the function finishes.

Correct! This is a massive feature of programming. It prevents variables in one function from accidentally overwriting variables in another function!

B) Because you need to use `const` instead of `let` to make variables accessible everywhere.

Incorrect. Both `let` and `const` obey the exact same strict scoping rules.

C) Because numbers cannot be logged to the console, only strings.

Incorrect. You can log numbers perfectly fine.