beginner24 min

Functions

Package reusable logic into named functions with parameters and return values.

What you'll learn

  • Define functions using function declarations and arrow functions
  • Use parameters, default values, and return statements
  • Explain the basics of variable scope inside a function

Prerequisites

Explanation

A function packages a piece of logic under a name so you can run it again without retyping it. There are two common ways to write one:

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

const triple = (n) => n * 3;

The first is a function declaration. The second is an arrow function stored in a const — a shorter syntax that's especially popular for small helper functions and callbacks. When an arrow function's body is a single expression, you can even skip the return keyword and the curly braces, as shown above (that's called an "implicit return").

Parameters are the named inputs a function expects (n above); arguments are the actual values you pass in when calling it (double(5)). A parameter can have a default value, used only when the caller doesn't supply that argument:

function greet(name = "friend") {
  return "Hello, " + name + "!";
}
greet();          // "Hello, friend!"
greet("Priya");   // "Hello, Priya!"

The return statement sends a value back to wherever the function was called, and immediately ends the function — any code after a return inside the same block never runs. A function with no return statement implicitly returns undefined.

Variables declared inside a function (including its parameters) exist only inside that function — this is called scope. A variable declared inside one function is invisible outside it, which is exactly what lets two different functions safely use a variable with the same name without conflicting.

Example

A function declaration and an equivalent arrow function.

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

const perimeter = (width, height) => 2 * (width + height);

console.log(area(4, 5));
console.log(perimeter(4, 5));

Try it yourself

Add a default value to height and call area() with only one argument.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

Write a function `square(n)` that returns n multiplied by itself.

Checks: square(4) is 16 · square(0) is 0 · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Write a function `applyDiscount(price, percent = 10)` that returns the price after subtracting percent% (defaulting to 10 if not given).

Checks: 20% discount on 100 is 80 · 50% discount on 200 is 100 · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Forgetting the return statement, so the function always produces undefined.
  • Confusing parameters (the placeholders in the definition) with arguments (the real values passed in).
  • Assuming a default parameter value applies even when a caller explicitly passes undefined for a different reason than 'omitted'.

Knowledge check

Knowledge check

1. What happens to code written after a return statement in the same block?
2. What does a function return if it has no return statement at all?
3. When is a parameter's default value used?

Takeaway

Functions turn repeated logic into a single reusable, well-named tool you call instead of retype.

Summary

Functions can be written as declarations or arrow functions, accept parameters (optionally with defaults), and send a result back with return. Variables inside a function are scoped to it and invisible outside.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Arrays and Objects