Functions & Events

1. Learning Objective

By the end of this lesson you will:

• Understand what a function is and why we need them
• Create functions using function declarations, function expressions, and arrow functions
• Pass data into functions with parameters and get data back with return values
• Understand scope — where variables live and die
• Wire up functions to user actions using addEventListener
• Use the event object to know what the user did
• Handle multiple event types: click, input, keydown, submit

2. Prerequisites — Quick Revision

Before we start, let's make sure the Lesson 9 foundations are solid:

If any of these feel fuzzy, review the JavaScript Foundations reference before continuing.

3. What Is a Function? — The Mental Model

3.1 The Real-Life Analogy

Think of a function like a recipe card in a kitchen:

• The recipe card has a name — "Make Chai"
• It lists ingredients you need (inputs) — water, tea leaves, milk, sugar
• It has step-by-step instructions (the body) — boil water, add leaves, etc.
• It produces a result (the return value) — a cup of chai

You write the recipe once. But you can use it as many times as you want — every morning, for every guest. That's exactly what a function does: you write the code once, and call it whenever you need it.

4. Creating Functions — Three Ways

4.1 Function Declaration (The Classic Way)

This is the most common and beginner-friendly way to create a function:

function greet(name) {
  const message = `Hello, ${name}! Welcome.`;
  return message;
}

// Calling the function
const result = greet("Altamash");
console.log(result); // "Hello, Altamash! Welcome."

4.2 Function Expression (Storing a Function in a Variable)

A function can also be stored in a variable, just like a number or a string:

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Altamash")); // "Hello, Altamash!"

Notice: the function has no name after the function keyword. It's "anonymous" — it gets its name from the variable. The semicolon at the end is required because this is a variable assignment, not a declaration.

4.3 Arrow Function (The Modern Way) ⭐

Arrow functions were introduced in ES6 (2015) and are the preferred way to write short functions in modern JavaScript, React, and Next.js:

// Full syntax
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Shorthand: if the body is a single expression, skip { } and return
const greetShort = (name) => `Hello, ${name}!`;

// If only one parameter, skip the parentheses too
const greetShorter = name => `Hello, ${name}!`;

console.log(greetShorter("Altamash")); // "Hello, Altamash!"

4.4 Comparison: Three Ways to Write Functions

5. Parameters, Default Values, and Return

5.1 Multiple Parameters

const calculateTotal = (price, quantity, taxRate) => {
  const subtotal = price * quantity;
  const tax = subtotal * taxRate;
  return subtotal + tax;
};

const total = calculateTotal(499, 2, 0.18);
console.log(total); // 1177.64

5.2 Default Parameters

What if someone calls your function but forgets to pass a value? You can provide a fallback:

const greet = (name = "stranger") => `Hello, ${name}!`;

console.log(greet("Altamash")); // "Hello, Altamash!"
console.log(greet());             // "Hello, stranger!"

The = "stranger" after the parameter means: "If no argument is passed, use "stranger" as the default." The default is only used when the argument is undefined (which is what happens when you don't pass anything).

5.3 Return — The Function's Output

Three critical rules about return:

1. return immediately stops the function — any code after it is unreachable
2. A function without return gives back undefined
3. Never put a newline between return and the value (JavaScript auto-inserts a semicolon!)

function getPrice() {
  return          // ← JavaScript inserts a semicolon HERE!
    499;           // ← This line is never reached
}
console.log(getPrice()); // undefined (not 499!)

function getPrice() {
  return 499;
}

6. Scope — Where Variables Live and Die

Scope means: "Where in the code can I access this variable?" Think of it like rooms in a house:

• Global scope = the living room. Everyone in the house can access things here.
• Function scope = a bedroom. Only the person inside that room can access what's in it. People in the living room can't see inside the bedroom.

const appName = "My Portfolio"; // GLOBAL — visible everywhere

function showWelcome() {
  const greeting = "Welcome!"; // LOCAL — only visible inside this function
  console.log(appName);  // ✅ Can access global from inside function
  console.log(greeting); // ✅ Can access own local variable
}

showWelcome();

console.log(appName);  // ✅ Global — accessible here
console.log(greeting); // ❌ ReferenceError! greeting is LOCAL to showWelcome

7. Visual Execution — The Call Stack

When JavaScript runs your code, it uses a call stack — a stack of "frames" that track which function is currently running. Think of it like a stack of plates:

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

function calculateArea(width, height) {
  const area = multiply(width, height);
  return area;
}

const result = calculateArea(5, 10);
console.log(result); // 50

Here's how the call stack evolves, step by step:

7.1 Try It Yourself

8. Events — Making Pages React to Users

8.1 What Is an Event?

An event is anything that happens in the browser that you can respond to:

• The user clicks a button → "click" event
• The user types in an input field → "input" event
• The user presses a key → "keydown" event
• The user submits a form → "submit" event
• The user hovers over an element → "mouseenter" event
• The page finishes loading → "DOMContentLoaded" event

The real-life analogy: events are like a doorbell. The doorbell itself does nothing until someone rings it. You set up a function (the "handler") that should run when the doorbell rings. The browser is the house — it watches for rings and calls your handler when one happens.

8.2 addEventListener — The Right Way

<button id="greet-btn">Click me!</button>
<p id="output"></p>

// Step 1: Find the elements
const button = document.getElementById("greet-btn");
const output = document.getElementById("output");

// Step 2: Define what should happen when clicked
const handleClick = () => {
  output.textContent = "Hello! You clicked the button! 🎉";
};

// Step 3: Wire the function to the event
button.addEventListener("click", handleClick);

button.addEventListener("click", handleClick()); // ← () calls it NOW, not on click!

button.addEventListener("click", handleClick); // ← No () — we're PASSING the function

8.3 Inline Arrow Functions in addEventListener

You don't always need a separate named function. For short handlers, write the arrow function directly:

button.addEventListener("click", () => {
  output.textContent = "Clicked! 🎉";
});

8.4 The Event Object — Know What Happened

Every time an event fires, the browser automatically passes an event object to your handler function. This object contains details about the event:

button.addEventListener("click", (event) => {
  console.log(event.type);    // "click"
  console.log(event.target);  // the button element that was clicked
  console.log(event.clientX); // X coordinate of the mouse pointer
});

The parameter name event is a convention — you can call it e or evt too. Most professionals use e for brevity.

8.5 Common Event Types — A Practical Reference

9. Real-World Example — Interactive Form

Let's combine functions and events to build something real: a form that reacts as the user types and prevents the default page reload on submit.

<form id="contact-form">
  <label for="name-input">Name:</label>
  <input type="text" id="name-input" placeholder="Your name">
  <p id="live-preview"></p>
  <button type="submit">Submit</button>
</form>
<p id="form-result"></p>

// 1. Find the elements
const form = document.getElementById("contact-form");
const nameInput = document.getElementById("name-input");
const preview = document.getElementById("live-preview");
const result = document.getElementById("form-result");

// 2. Live preview as user types
nameInput.addEventListener("input", (e) => {
  const value = e.target.value;
  preview.textContent = value
    ? `Hello, ${value}! 👋`
    : "";
});

// 3. Handle form submission
form.addEventListener("submit", (e) => {
  e.preventDefault(); // ← CRUCIAL: stops page from reloading!

  const name = nameInput.value.trim();

  if (name === "") {
    result.textContent = "Please enter your name!";
    return; // exit early
  }

  result.textContent = `✅ Form submitted! Welcome, ${name}!`;
  nameInput.value = ""; // clear the input
  preview.textContent = "";
});

10. Common Mistakes — The Pitfall Gallery

const double = (n) => { n * 2; };      // ❌ Returns undefined!
const double = (n) => { return n * 2; }; // ✅ Explicit return
const double = (n) => n * 2;             // ✅ Implicit return (no braces)

let count = 0;
function increment() {
  let count = 0;  // ❌ Creates a NEW local variable — doesn't change the outer one!
  count++;
}
increment();
console.log(count); // Still 0!

<head>
  <script src="script.js"></script>  <!-- ❌ Runs before the HTML body loads -->
</head>

11. Interview Perspective

12. Best Practices — How Professionals Write Functions

1. Use arrow functions for callbacks and event handlers
2. Use function declarations for top-level utility functions
3. Name functions descriptively — handleClick, calculateTotal, formatDate, not fn, doStuff, x
4. Keep functions small — a function should do ONE thing. If it's doing 5 things, split it into 5 functions
5. Always use addEventListener — never use onclick attributes in HTML
6. Always use e.preventDefault() on form submit handlers
7. Prefer const for function expressions — prevents accidental reassignment
8. Use default parameters instead of checking for undefined manually

13. Real-World Use Cases

14. Knowledge Check — Quiz

15. Retrieval Practice — Fill in the Blanks

Write from memory. Effortful recall is how knowledge moves into long-term memory.

16. Practice Questions (Easy → Hard)

Do NOT look at answers. Write the code yourself, run it, and verify.

1. Write a function square that takes a number and returns its square. Easy
2. Write an arrow function isEven that returns true if a number is even, false otherwise. Easy
3. Write a function greetUser with a default parameter so that greetUser() returns "Hello, Guest!". Easy
4. Create a button in HTML. When clicked, it changes its own text to "Clicked!". Easy
5. Create an input field and a paragraph. As the user types, the paragraph shows a live character count. Medium
6. Write a function max that takes two numbers and returns the larger one. Do NOT use Math.max. Medium
7. Create a "Toggle Dark Mode" button. Clicking it adds/removes a class "dark" on the <body> tag. Medium
8. Write a function factorial that calculates the factorial of a number using a loop. factorial(5) should return 120. Medium
9. Build a mini calculator: two input fields, four buttons (+, −, ×, ÷), and a result display. Each button calls a calculation function and updates the result. Hard
10. Create a password input with a "Show/Hide" toggle button. When clicked, it switches the input type between "password" and "text". Hard

17. Mini Project — Interactive Profile Card

18. Lesson Summary

1. A function is a reusable block of code with a name, parameters, a body, and a return value
2. Three ways to create functions: declaration, expression, arrow function (use arrow for most things)
3. Parameters are placeholders; arguments are the actual values you pass
4. Default parameters provide fallback values when arguments are missing
5. return sends a value back. Without it, you get undefined
6. Scope: functions can see out (access globals), but the outside cannot see in (local variables are private)
7. Events are things that happen in the browser (click, input, submit, keydown)
8. addEventListener is the right way to wire a function to an event
9. Pass the function by name (no parentheses): addEventListener("click", handler)
10. The event object (e) gives you details about what happened
11. e.preventDefault() stops the browser's default action (essential for forms)

19. Quick Revision Notes (5-Minute Review)

// Declaration (hoisted)
function add(a, b) { return a + b; }

// Arrow (modern, preferred)
const add = (a, b) => a + b;

// Default parameter
const greet = (name = "Guest") => `Hi, ${name}`;

// Functions return undefined if no return keyword

// Attach event
element.addEventListener("click", handler);

// Inline arrow
button.addEventListener("click", (e) => {
  e.preventDefault();
  console.log(e.target);
});

// Common events: click, input, submit, keydown, change
// NEVER use handleClick() with () in addEventListener!

20. Challenge — Combine Functions + Events + Lesson 9

21. Comprehension Check — Answer These Before Moving On

1. In your own words, what is the difference between defining a function and calling a function?
2. Why do arrow functions NOT have their own this? (Hint: think about what would happen inside an event handler inside an object method.)
3. If you write addEventListener("click", myFunc()) instead of addEventListener("click", myFunc), what happens and why?
4. What is the call stack, and why does JavaScript need it?
5. Why do we always call e.preventDefault() in form submit handlers?

Primary Sources: javascript.info: Functions is the best free deep-dive on function mechanics. MDN: Introduction to events is the authoritative reference for event handling.

Finished the build? Type /teach and tell me what you built. I'll review your functions, event handlers, and the form validation pattern. After this, we move on to control flow: conditionals, comparison operators, and logical operators — where your code starts making decisions.