Platform under construction

Functions & Scope

Intermediate

Function Declarations

Function declarations create named reusable blocks of behavior. They are excellent for important actions that deserve a clear name.

function formatTitle(value) {
  return value.trim().toUpperCase();
}

console.log(formatTitle("  JavaScript  "));

Functions & Scope

A function declaration gives behavior a reusable name.

A function declaration starts with the function keyword, followed by a name, parentheses and a block. The name should explain what the function does.

Function declarations are hoisted. That means the function can be called before the declaration appears in the file. This is useful, but code is still easier to read when important functions are near the code that uses them.

Use declarations for behavior that is central to the module: validation, formatting, rendering, calculation or a named operation that will be reused.

function keyword

Starts a function declaration.

Function name

Communicates the action or result.

Parameters

Inputs listed inside parentheses.

Body

Statements inside curly braces that run when the function is called.

Examples

Functions become readable when input, output and scope are visible.

Named function with clear input and output

function createStatusLabel(status) {
  return status === "ready" ? "Ready" : "Not ready";
}

const label = createStatusLabel("ready");

A vague function name

function doStuff(x) {
  return x.trim().toUpperCase();
}

// The function works, but the name hides the purpose.

Code patterns

Reusable examples for quick reference.

These examples focus on syntax you will actually look up later: declarations, callbacks, returns, closures and context handling. Use the small patterns first, then study the deeper explanation.

Basic declaration

Name the action and call it later.

function greet() {
  return "Hello";
}

console.log(greet());

Declaration with one parameter

Pass input into the function.

function upper(value) {
  return value.toUpperCase();
}

console.log(upper("ready"));

Declaration with validation

Return early when input is invalid.

function isValidScore(score) {
  if (!Number.isFinite(score)) {
    return false;
  }

  return score >= 0 && score <= 100;
}

Use a function in rendering

Keep UI updates small and named.

function renderMessage(status) {
  return status === "ready" ? "Ready" : "Waiting";
}

output.textContent = renderMessage("ready");

Rules that matter

Keep behavior small, named and testable.

Functions are where JavaScript stops being a list of statements and becomes a system. Scope decides what each function can see, while return values and parameters decide how functions communicate.

Use action names

formatTitle, validateInput and renderList are clearer than doStuff.

Keep one responsibility

A function should do one coherent job.

Return useful values

A reusable function is easier to test when it returns a result.

Avoid hidden global state

Pass values in through parameters when possible.

Prefer early returns for invalid input

Guard clauses keep the main path readable.

Place functions where readers can find them

Hoisting is not an excuse for a confusing file.

Production thinking

Good functions reduce the amount of code you must hold in your head.

Why does this matter?

Functions are how code becomes organized. Without clear functions, programs become long timelines with repeated behavior scattered everywhere.

Accessibility

Named functions make it easier to keep accessible UI behavior consistent, such as message rendering and focus handling.

Production note

Production code should use small named functions for reusable business logic, formatting and DOM behavior.

SEO note

Rendering functions that create headings, links or metadata should be predictable, named and easy to test.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Rename formatTitle to normalizeTitle and update the call.
Return lowercase text instead of uppercase text.
Add a guard that returns "Untitled" when the input is empty.

Practice assignment

Do this before moving to the next topic.

Write one function declaration with no parameters.
Write one function declaration with one parameter.
Write one function that returns early for invalid input.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Function Declarations.