Functions: Declarations & Expressions

Syntax

function name(params) { /* body */ }
const name = function(params) { /* body */ };

Examples

function total(price, quantity) {
  return price * quantity;
}
console.log(total(12, 3));

greet("Alice"); // works even though called before the definition below

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const add = function(a, b) {
  return a + b;
};

console.log(add(3, 4)); // 7

// Named function expressions are also possible, useful for stack traces
const multiply = function multiply(a, b) {
  return a * b;
};

function calculateTotal(price, taxRate = 0.1) {
  return price + price * taxRate;
}

console.log(calculateTotal(100));       // 110 - uses default tax rate
console.log(calculateTotal(100, 0.2));  // 120 - overrides default

Best practices

• Use function declarations for top-level, reusable functions you want available throughout a file regardless of definition order
• Use function expressions or arrow functions when defining a function inline (like a callback)
• Give parameters default values instead of manually checking for undefined inside the function body
• Keep functions focused on a single responsibility for easier testing and reuse

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

In plain English

A function is a reusable operation. Parameters name its inputs, and return sends a result back to the caller.

What you’ll learn

• Declare and call a function.
• Pass arguments to parameters.
• Use a returned value.

Before you start: Variables: var, let, const

Breaking down the syntax

function

Introduces a function declaration.

parameters

Local names for values supplied by the caller.

return

Ends the call and supplies its result.

How it works

Arguments

The caller supplies input values.

Function body

The statements run with local parameter bindings.

Return value

A returned value can be assigned or passed onward. Falling off the end returns undefined.

When should I use this?

Use a function when an operation deserves a name, needs reuse, or should be tested separately.

Common mistakes

Printing instead of returning

console.log displays a value but does not return that value from your function.

Incorrect

function double(n) { console.log(n * 2); }
const result = double(3);

Corrected

function double(n) { return n * 2; }
const result = double(3);
console.log(result);

Compare approaches

• Function declaration: A named reusable operation with its own this binding rules.
• Arrow function: A concise expression with lexical this.

Accessibility

• Event-handler functions should support the native keyboard behaviour of the controls they enhance. Prefer a button to a clickable div.

Explore deeper

Inputs can reference mutable objects

Arguments are passed by value. When that value is an object reference, changing a property through the parameter affects the referenced object. Reassigning the parameter does not reassign the caller’s binding.

Specifications & further reading

• ECMAScript: functions and classes

Related JavaScript documentation