Function Declarations

You have written the same tour-logging code multiple times across different lessons. Each time you needed to log a tour summary, you typed it again. A function lets you write that code once, give it a name, and run it whenever you need it.

What a function is

A function is a named, reusable block of code. The core principle it embodies is DRY — Don’t Repeat Yourself. Instead of writing the same logic five times, you write it once, name it, and call that name.

Functions also make code easier to read. formatTourSummary() tells you exactly what a block of code does without reading every line inside it.

Function declaration syntax

function formatTourSummary() {
  const tourName = 'Cascade Ridge Hike';
  const tourPrice = 149;
  const tourAvailable = true;
  const status = tourAvailable ? 'Available' : 'Sold Out';
  console.log(`${tourName} | $${tourPrice} | ${status}`);
}

The parts:

• function keyword
• The function name (formatTourSummary)
• Parentheses (empty for now — parameters come in the next lesson)
• Curly braces enclosing the function body

Calling a function

Declaring a function does not run it. To run it, you call it — the function name followed by ():

formatTourSummary();  // runs the function once
formatTourSummary();  // runs it again

Each call executes the entire function body. You can call a function as many times as you need.

Hoisting

Function declarations are hoisted — JavaScript moves them to the top of their scope before execution begins. This means you can call a declared function before it appears in the file:

formatTourSummary();  // works — hoisted above

function formatTourSummary() {
  console.log('Cascade Ridge Hike');
}

This is a feature of the function keyword specifically. Function expressions and arrow functions are not hoisted the same way — that distinction comes in Lesson 03.

Naming conventions

Function names follow the same camelCase convention as variable names, with one additional guideline: start with a verb. Functions do things — the name should say what:

Pattern	Example
get + noun	getTourPrice
format + noun	formatSummary
render + noun	renderTourCard
check / is + noun	checkAvailability, isAvailable
calculate + noun	calculateDiscount

A name like tourData tells you what it holds. A name like formatTourSummary tells you what it does. Functions should have action names.

Exercise

Write formatTourSummary() and call it twice:

function formatTourSummary() {
  const tourName = 'Cascade Ridge Hike';
  const tourPrice = 149;
  const tourAvailable = true;
  const status = tourAvailable ? 'Available' : 'Sold Out';
  console.log(`${tourName} | $${tourPrice} | ${status}`);
}

formatTourSummary();
formatTourSummary();

Then move the call to before the function definition — confirm it still works (hoisting). After that, try calling a function that does not exist yet to see the ReferenceError.

Recap

• A function is a named, reusable block of code. DRY: Don’t Repeat Yourself.
• Declare with the function keyword, a name, parentheses, and a body in curly braces.
• Call a function with functionName() — declaring is not the same as running.
• Function declarations are hoisted — they can be called before they appear in the file.
• Name functions in camelCase with a verb first: formatSummary, renderCard, checkAvailability.