Codectionary / Developer documentation / JavaScript

Functions: Declarations & Expressions

Functions are reusable blocks of code. A function declaration (using the function keyword with a name) is hoisted, meaning it can be called before its definition in the code. A function expression assigns a function to a variable and is not hoisted the same way - it must be defined before it is called.

Before you start: Variables: var, let, const

Syntax

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

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

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

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.

Examples

Calculate a total

Multiply two inputs and return a reusable result.

function total(price, quantity) {
  return price * quantity;
}
console.log(total(12, 3));
  1. price and quantity are parameters.
  2. 12 and 3 are arguments at the call site.
  3. return supplies 36 to console.log.

Function Declaration

A named function that can be called before its definition due to hoisting.

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

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

Function Expression

Assigning an anonymous function to a variable - not hoisted.

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;
};

Default and Return Values

Giving parameters default values and returning results.

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

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

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

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