Functions

A function is a named, reusable block of code. You define it once, then call it whenever you need it, passing in different inputs and getting back a result. Functions are how programs are broken into understandable pieces — and in JavaScript they're also values that can be stored and passed around.

Declaring and calling a function

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ana"));
console.log(greet("Ben"));

Hello, Ana!
Hello, Ben!

A function declaration has the keyword function, a name, a list of parameters in parentheses, and a body in braces. Calling it — greet("Ana") — runs the body with name set to the argument "Ana".

Return values

return sends a value back to the caller and ends the function immediately. A function without return (or with a bare return;) gives back undefined:

function area(width, height) {
  return width * height;
}

function logArea(width, height) {
  console.log("area is", width * height);
}

const a = area(3, 4);
const b = logArea(3, 4);
console.log(a, b);

area is 12
12 undefined

Prefer functions that return results over ones that only print them: a returned value can be stored, tested, combined and displayed however the caller likes.

Code after a return never runs, which makes early returns a clean way to handle special cases:

function divide(a, b) {
  if (b === 0) return "cannot divide by zero";
  return a / b;
}

console.log(divide(10, 4));
console.log(divide(1, 0));

2.5
cannot divide by zero

Why use functions?

• Reuse — write logic once, call it from many places.
• Naming — calculateShipping(order) explains itself; twenty lines of inline arithmetic don't.
• Isolation — variables inside a function don't leak out or clash with others.
• Testing — a small function with clear inputs and outputs is easy to check.

Function expressions

A function can also be created as an expression and stored in a variable:

const square = function (n) {
  return n * n;
};

console.log(square(9));

81

The result is the same. The practical difference is hoisting: function declarations can be called before the line where they appear, because they're set up when the scope starts; function expressions can't. Lesson 25 explains why.

console.log(double(4));

function double(n) {
  return n * 2;
}

8

Functions are values

In JavaScript, functions are "first-class": you can store them in variables, put them in arrays and objects, pass them to other functions and return them from functions:

function shout(text) {
  return text.toUpperCase() + "!";
}
function whisper(text) {
  return text.toLowerCase() + "…";
}

const styles = { shout, whisper };

function speak(text, style) {
  return style(text);
}

console.log(speak("Hello", styles.shout));
console.log(speak("Hello", styles.whisper));
console.log(typeof shout);

HELLO!
hello…
function

Passing a function into another function is extremely common — it's how event handlers and array methods like map work. Lesson 28 is devoted to it.

Calling vs referencing

A common beginner bug is mixing up fn (the function itself) with fn() (calling it and using the result):

function getTime() {
  return "12:00";
}

console.log(typeof getTime);
console.log(getTime());

function
12:00

When you register a click handler, pass the function: button.addEventListener("click", save). Writing save() there would call it immediately and pass its return value instead.

Good function habits

• Name functions with verbs: calculateTotal, formatDate, isValidEmail.
• Keep each function focused on one job.
• Prefer returning values over changing variables outside the function ("side effects").
• If a function needs more than three or four parameters, consider passing one object instead (lesson 24).

Try it yourself