JavaScript Function Declarations: Syntax, Hoisting, and Return

A Function Is a Named Block of Steps

Any time you want to give a chunk of logic a name and reuse it, you write a function. The oldest and most straightforward way in JavaScript is the function declaration — the function keyword followed by a name.

Reading that left to right:

• function is the keyword that starts a declaration.
• greet is the function name.
• (name) is the parameter list — the inputs the function takes.
• The block in braces is the body.
• greet("Ada") is a call. JavaScript runs the body with name bound to "Ada".

Defining a function doesn't run it. Calling it does.

Parameters and Arguments

The word parameter is the name inside the function definition. The word argument is the value passed in when you call. Casual speech treats them as synonyms; the distinction matters when you're reading error messages.

Here base and exponent are parameters. 2 and 10 are arguments. JavaScript binds them in order: first argument to first parameter, and so on.

Unlike some languages, JavaScript won't complain if you pass the wrong number of arguments. Missing ones become undefined; extras are silently ignored. That's flexible and occasionally a trap — we'll see defaults and rest parameters in later docs.

return Sends a Value Back

console.log writes to the output. return hands a value back to the caller so they can use it:

Without return, a function returns undefined:

return also exits the function immediately. Early returns are the standard way to bail on edge cases before the main logic:

Early returns keep the main body from turning into a pyramid of if/else.

Hoisting: You Can Call It Before You Define It

Here's something that genuinely surprises people coming from other languages. Function declarations are hoisted — JavaScript moves them to the top of their scope before running any code. That means you can call a function on a line above where it's declared:

That code runs fine. Before execution, the engine scans the scope, registers square as a function, and only then starts running statements top to bottom.

This is a real behavioral difference between function declarations and the other ways to make a function (function expressions, arrow functions). Those get hoisted like variables — the name is known, but the value isn't assigned until the line runs. More on that distinction next.

Most style guides recommend defining functions before you call them anyway. Hoisting is a safety net, not a style to lean on.

Declarations vs Expressions

A function declaration stands on its own as a statement. A function expression appears where a value is expected — most often on the right-hand side of an assignment:

Both produce callable functions. The differences:

• Declarations are hoisted in full. Expressions follow the hoisting rules of the variable they're assigned to (const and let are in the temporal dead zone until the line runs).
• Declarations must have a name. Expressions can be anonymous, though naming them helps stack traces.
• Declarations can't appear just anywhere. In strict mode, a function foo() {} inside an if block behaves inconsistently across engines — use an expression there instead.

For most top-level helpers in a file, a declaration reads well. For functions passed as arguments or assigned to properties, an expression (or an arrow function) is the usual choice.

Naming and Style

A function name is a promise about what the function does. Spending a few extra characters to pick a descriptive one pays for itself the first time someone reads the code.

A few conventions worth adopting:

• Function names should be verbs: fetchProfile, computeTotal, sendEmail.
• Use camelCase — that's the JavaScript norm.
• Boolean-returning functions often start with is, has, or can: isValid, hasAccess, canEdit.

The goal is for the call site to read like a sentence.

A Small Working Example

Pulling the pieces together — parameters, early return, a descriptive name:

One declaration, a guard clause, a clear return. That shape covers most of the functions you'll write.

Next: Arrow Functions

Declarations are the workhorse, but modern JavaScript leans heavily on a shorter syntax — arrow functions — especially for callbacks and one-liners. They look different, they behave differently around this, and they're what the next page is about.