Theory
The same five lines, everywhere
FestConnect calculates a fee in three places: the event card, the summary, the receipt. You copy the same base * count maths into all three. Then the fee formula changes, and you must hunt down every copy.
A function fixes this: write the logic once, give it a name, and call it wherever you need it. Change it in one place, everywhere updates. Functions are how code stops repeating itself and starts being reusable.
Theory
A recipe you can reuse
A recipe is written once and followed many times. It takes ingredients (parameters), does its steps, and produces a dish (the return value). 'Make 2 teas' and 'make 5 teas' use the same recipe with a different amount. A function is a recipe for code: define the steps once, then call it with different inputs whenever you need the result.
Theory
Define, call, return
- Define:
function calcFee(base, count) { return base * count; }. The names in the brackets are parameters (inputs). - Call:
calcFee(200, 2)runs it with arguments 200 and 2, giving 400. Calling needs parentheses. - return: sends a value back to the caller and ends the function. No return means it gives
undefined. - Redirect a page:
window.location.href = "thanks.html"sends the browser to another page, handy after a successful action.
Practical
FestConnect functions
// with parameters, returns a value
function calcFee(base, count) {
return base * count; // ends here; sends value back
}
console.log(calcFee(200, 2)); // 400
// without parameters
function showWelcome() {
console.log("Welcome to FestConnect");
}
showWelcome(); // runs it (note the parentheses)
// calling vs referencing
console.log(calcFee); // the function itself (no run)
console.log(calcFee(200, 1)); // 200 (called)
// after a successful register, redirect the browser
function goThanks() {
window.location.href = "thanks.html";
}This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
What does the parenthesis change?
In button.addEventListener('click', register) versus button.addEventListener('click', register()), one wires the function to the click and the other is a bug. Which is which, and what does the buggy one do?
Show the answer
register (no parentheses) passes the function itself to be called later, when the click happens. That is correct. register() calls it immediately, right when the line runs, and passes its return value (probably undefined) to addEventListener, so nothing happens on click. Rule: to hand a function to an event, use its name without parentheses; parentheses mean 'run it now'.
Quiz
A function has `return total;` followed by `console.log("done");`. The log never prints. Why?
- return ends the function immediately, so code after it does not run
- console.log only works outside functions
- You must call return twice to continue
- The log needs its own function to run
Show the answer
return ends the function immediately, so code after it does not run
return hands a value back and exits the function on the spot, so any statements after it are unreachable and never execute (A). console.log works fine inside functions (B). return is not called twice (C), and the log does not need its own wrapper (D). Put statements you want to run before the return, or the code is dead. This 'code after return' is a common bug.
Watch out
Function traps
1. Forgetting parentheses to call: showWelcome alone does nothing; showWelcome() runs it. But for event handlers you deliberately omit them (pass the name).
2. Code after return: it never runs. return is the exit.
3. Parameters vs arguments: parameters are the names in the definition; arguments are the actual values you pass when calling. Passing too few leaves the missing ones undefined.
Theory
register() is the goal
Everything in this unit builds toward one function: register(). It will be called on the form's submit event, read the fields with DOM methods, validate them (next two lessons), and on success redirect to thanks.html with window.location. You now have the shape of that function; the next lessons fill in the checks that decide pass or fail.
Summary
Key takeaways
- A function is a named, reusable block: define once, call many times.
- Parameters are inputs in the definition; arguments are the values passed when calling.
- Call with parentheses: calcFee(200, 2). return sends a value back AND ends the function.
- For event handlers pass the function name WITHOUT parentheses; parentheses run it immediately.
- window.location.href = "page.html" redirects the browser, e.g. after a successful register.
- Memory hook: a reusable recipe, called with parentheses.