Platform under construction

Functions & Scope

Intermediate

Function Expressions

Function expressions create functions as values. They can be assigned to variables, passed around and used where expressions are expected.

const formatTitle = function (value) {
  return value.trim();
};

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

Functions & Scope

A function expression treats behavior as a value.

A function expression creates a function and places it inside an expression. Most commonly, it is assigned to a const variable.

Unlike function declarations, function expressions are not callable before the assignment has run. The variable exists according to normal let or const rules.

Function expressions are useful for callbacks, configuration objects, event handlers and cases where a function belongs to a value rather than the top-level flow.

Assigned value

The function is stored in a variable.

Anonymous or named

The function can have no name or an internal name for stack traces.

Not declaration-hoisted

The variable must be initialized before calling it.

First-class value

The function can be passed as data.

Examples

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

Function value with a clear variable name

const createLabel = function (status) {
  return `Status: ${status}`;
};

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

Calling before initialization

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

const createLabel = function (status) {
  return `Status: ${status}`;
};

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.

Assign a function

Store behavior in a const.

const double = function (value) {
  return value * 2;
};

console.log(double(4));

Named expression

A name can improve stack traces and recursion.

const factorial = function calculate(value) {
  if (value <= 1) return 1;
  return value * calculate(value - 1);
};

console.log(factorial(5));

Function in an object

Store behavior next to related settings.

const formatter = {
  label: function (value) {
    return `Status: ${value}`;
  }
};

console.log(formatter.label("ready"));

Pass a function as data

Callbacks are built on function values.

const numbers = [1, 2, 3];
const doubled = numbers.map(function (value) {
  return value * 2;
});

console.log(doubled);

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 const for function values

The function binding usually should not be reassigned.

Call after assignment

Function expressions follow variable initialization rules.

Name the variable well

The variable name often carries the function meaning.

Use named expressions when helpful

They can improve recursion and stack traces.

Keep callbacks small

Large anonymous functions are hard to scan.

Prefer declarations for central reusable behavior

Use expressions when value-like behavior is useful.

Production thinking

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

Why does this matter?

Function expressions are the gateway to callbacks, array methods, event handlers and flexible code organization.

Accessibility

Event handlers and UI callbacks often use function expressions. Clear names make behavior easier to audit.

Production note

Production code should avoid huge inline anonymous functions and extract important behavior into named constants.

SEO note

Rendering callbacks that build content should be small and predictable, especially when they affect visible text or links.

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.

Give the function expression an internal name.
Move the click handler into a named const.
Try calling createStatusLabel before the const line and read the error.

Practice assignment

Do this before moving to the next topic.

Assign a function expression to a const.
Use a function expression with Array.map.
Write one named function expression.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Function Expressions.