Skip to content

Functions

Learn how functions bundle reusable code, take inputs, and return outputs — the building blocks of programs.

What you'll learn

  • What a function is and why we use them
  • How parameters and arguments work
  • How to return a value from a function
  • The difference between defining and calling a function

Concept

Functions

A function is a reusable block of code with a name. You define it once and call it many times. Functions are how you avoid repeating yourself (the DRY principle: Don't Repeat Yourself) and how you organize a program into understandable pieces.

Defining and Calling

// Define
function greet(name) {
  return "Hello, " + name + "!";
}

// Call
greet("Ada");   // "Hello, Ada!"
greet("Grace"); // "Hello, Grace!"

Parameters and Arguments

A parameter is the variable listed in the function definition (name above). An argument is the actual value you pass when calling ("Ada"). The parameter is a placeholder; the argument fills it in for that call.

Return Values

A function can return a value back to the caller with the return keyword. Once return runs, the function stops. If a function has no return, it returns undefined by default.

function add(a, b) {
  return a + b;
}
const sum = add(3, 4);  // 7

Why Functions Matter

Functions let you:

  1. Reuse code — write once, call many times.
  2. Abstract complexity — hide details behind a simple name.
  3. Test in isolation — a small function is easy to verify.
  4. Compose — call functions from other functions to build up behavior.

Modern JavaScript also has arrow functions, a shorter syntax: const add = (a, b) => a + b;. They behave like regular functions for most purposes.

Example

              // A function that calculates a discounted price
function applyDiscount(price, discountPercent) {
  const discount = price * (discountPercent / 100);
  return price - discount;
}

const original = 100;
const salePrice = applyDiscount(original, 20);
console.log(`$ ${original} with 20% off = $ ${salePrice}`);
// $ 100 with 20% off = $ 80

// Arrow function syntax (shorter):
const tax = (amount, rate) => amount * rate;
console.log(tax(80, 0.08));   // 6.4

applyDiscount takes two parameters and returns the result. The arrow function tax shows the concise syntax for simple functions.

Try it

  • Hash Generator

    A hash function takes input (text) and returns output (a fixed-length hash). The same input always gives the same output.

Common mistakes

The mistake

Forgetting to call the function (referencing the name without parentheses).

The fix

greet is the function object; greet('Ada') calls it. If you see the function source printed instead of the result, you forgot the ().

The mistake

Expecting code after return to run.

The fix

return exits the function immediately. Any lines after it are unreachable. Put your final computation before the return statement.

Related Resources

Related Snippets

Practice Functions

2 exercises

Practice Functions

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors