JavaScript Functions & Scope

Defining and calling functions

A function is a reusable block of code that can accept inputs, called parameters, and optionally return a value. You define one with the function keyword, a name, a parenthesized list of parameters, and a body in curly braces. Defining a function doesn't run it, calling it does, by writing its name followed by parentheses containing the actual values, called arguments, you want to pass in. This separation is powerful: you can define a calculation once, like converting a price and quantity into a total, and then call it with completely different numbers every time you need that calculation done.

1function calculateTotal(price, quantity) {2  return price * quantity;3}45const total = calculateTotal(19.99, 3);6console.log(total); // 59.97

Function expressions and arrow functions

Functions can also be stored in variables. A function expression, const greet = function(name) { ... }, and an arrow function, const greet = (name) => { ... }, both create a function value and assign it to a variable, rather than declaring a named function directly. Arrow functions offer a shorter syntax, and when the body is a single expression, you can even skip the curly braces and return keyword entirely, since the expression's value is returned automatically. You'll see arrow functions everywhere in modern JavaScript, especially for short callbacks, so it's worth getting comfortable reading both styles even before you use them everywhere yourself.

1const square = (n) => n * n;2const greet = (name) => `Hello, ${name}!`;34console.log(square(5));   // 255console.log(greet("Ada")); // Hello, Ada!

Parameters, defaults, and multiple returns paths

Parameters can have default values, used only when a caller doesn't provide an argument for that position, written as function greet(name = "friend") { ... }. Functions can also contain multiple return statements guarded by conditionals, letting a function take different paths depending on its inputs, similar to how you already write branching logic with if and else, except now that logic lives inside a reusable, named unit. As soon as a return statement runs, the function stops immediately and hands that value back, so return also doubles as an early exit from a function when you want to skip the rest of its body under certain conditions.

1function describeAge(age, unit = "years") {2  if (age < 0) {3    return "Invalid age";4  }5  return `${age} ${unit} old`;6}78console.log(describeAge(10));        // 10 years old9console.log(describeAge(5, "days")); // 5 days old

Scope: where variables live

Scope determines which parts of your code can see and use a given variable. Variables declared with let or const inside a function are local to that function, they exist only while the function is running and are invisible from outside it. This is a feature, not a limitation: it means two different functions can each use a variable named total without any conflict, because each total lives in its own private scope. Blocks like if statements and loops also create their own scope for let and const, so a variable declared inside a for loop's braces doesn't exist once the loop finishes. Variables declared outside any function, at the top level of your script, are in the global scope and are visible everywhere, which is convenient but risky, since too many global variables makes it easy for one part of a program to accidentally overwrite another's data.

• Function scope: variables declared inside a function only exist while that function runs and only inside it.
• Block scope: let and const declared inside { } (including if and for blocks) are confined to that block.
• Global scope: variables declared outside any function or block are visible everywhere, so use them sparingly.
• Inner scopes can read outer variables, but outer scopes can never read variables declared inside an inner scope.

1function makeMessage() {2  const greeting = "Hi there";3  return greeting;4}56console.log(makeMessage());7console.log(typeof greeting); // "undefined" - greeting doesn't exist out here

Why functions and scope matter together

Combining functions with careful scope is what lets programs grow without becoming tangled messes. Each function becomes a small, self-contained unit you can reason about on its own, understand its inputs, trust its output, and reuse it elsewhere without worrying that it secretly depends on or interferes with unrelated variables somewhere else in your program. As you move toward working with the DOM and handling events in the next chapters, you'll write many small functions, each responsible for one clear job, and scope is what keeps all of those functions from stepping on each other's toes.