JavaScript lesson · 12 min

JavaScript Functions

Write reusable functions, pass arguments, return values, and test the result.

Code runs locally in your browser

What you will practice

Define a function with parameters.
Return a value instead of only logging.
Reuse the same function with different inputs.

What this means

A function is a reusable action. You give the action a name, describe what inputs it needs, and tell it what result to return.

Functions help you avoid copying the same logic into many places. If the rule changes later, you update one function instead of hunting through the whole project.

The values passed into a function are called arguments. The names that receive those values inside the function are called parameters.

If this is your first time seeing this

A function is code you save for later. Instead of rewriting the same calculation again and again, you give it a name and call it when needed.

The values inside parentheses are inputs. The `return` line is the result that comes back out.

Mini glossary

Function: A reusable block of code with a name.
Parameter: A named input listed when the function is created.
Return value: The value a function sends back to the code that called it.

Example from everyday life

A function is like a recipe card. The recipe name is the function name, the ingredients are parameters, and the cooked dish is the returned value. You can use the same recipe many times with different ingredient amounts.

How it works step by step

JavaScript sees `function totalPrice(price, quantity)` and stores a reusable block of code under the name `totalPrice`.
When the code calls `totalPrice(4, 3)`, JavaScript puts `4` into `price` and `3` into `quantity`.
The function calculates `price * quantity` and returns `12` to the line that called it.
The returned value is stored in `subtotal`, then reused to calculate the discounted price.

Where you will use this

A checkout page uses functions to calculate tax, discounts, delivery price, and final total.
A form uses a validation function to check whether an email address looks correct.
A dashboard uses formatting functions to turn raw numbers into readable labels like `$12.50` or `3 min ago`.

Before you run the code

A function packages a small piece of behavior behind a name. Parameters are the values the function receives, and return sends a result back to the caller.

Returning values makes code easier to test because another line of code can compare the result, format it, or pass it to another function.

Common beginner mistakes

Logging a value but forgetting to `return` it, which means other code cannot reuse the result.
Mixing up parameter names and argument values.
Making one function do too many unrelated things.

JavaScript editor

function totalPrice(price, quantity) {
  return price * quantity;
}

const subtotal = totalPrice(4, 3);
const discounted = subtotal - 2;

console.log(`Subtotal: ${subtotal}`);
console.log(`After discount: ${discounted}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingCalculates the subtotal

WaitingUses the returned value again

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Call `totalPrice(10, 2)` and predict the subtotal.
Add a third parameter named `discount` and subtract it inside the function.
Rename the function to `calculateTotal` and update the call too.

Previous lesson Next lesson