Subjects and lessons to explore.

Law

Web Development · Foundations

Functions

9 min read 5 practice questions
6 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

A JavaScript function is reusable code that can be called to perform a task or calculate a value. A declaration gives the function a name, optional parameters, and a body. A call supplies arguments for those parameters. When a function uses return, the call evaluates to the returned value; without a , an ordinary produces undefined.

Why this matters

Functions let a program give one job a clear name and reuse its logic instead of copying it into every place that needs it. That makes a page's behavior easier to test, explain, and change. In later web work, functions organize event handlers, data transformations, and requests, but the same fundamentals still apply: understand what inputs a function expects, what it returns, and which work belongs inside it.

The college version

Declaration, body, and call

A introduces a callable function with the function keyword, an identifier, a parenthesized list, and a statement body in braces. For example, function greet(name) { return Hello, ${name}!; } declares a function named greet. Declaring it does not run the body. The body runs when code evaluates a call expression such as greet("Mina"). Separating declaration from call is useful: the declaration describes a reusable operation, while each call is one use of that operation. This lesson focuses on ordinary declared functions; arrow functions, methods, callbacks, asynchronous functions, and browser DOM work are separate subjects.

The function body is a block of statements. It can create local values, make decisions, and calculate a result. Good beginner functions tend to have one understandable responsibility, such as formatting a label or computing a total. That is not a rule that every function must be tiny, but it is a practical way to make behavior easier to inspect. A useful name describes the operation—calculateTotal says more than doThing. Naming also helps a reader identify the intended job at each call site, but a name cannot substitute for checking the body and its returned value.

Parameters receive arguments

Parameters are names written in a function's definition. They act as local bindings when a call begins. Arguments are the actual values written at a particular call site. In function square(number) { return number * number; }, number is a parameter. In square(5), 5 is an . The distinction matters because the same declared function can be called with different arguments: square(2) and square(9) reuse the same body but produce different results.

JavaScript does not require a call to provide the same number of arguments as the declaration has parameters. When no argument is supplied for a parameter, its initial value is undefined unless the declaration supplies a default parameter value. Extra arguments do not create additional named parameters in this simple declaration. That flexibility is not a reason to ignore expected inputs. A function's name, parameter names, and documentation should communicate what callers are meant to provide. Keep values that are only needed during one call inside that function unless there is a deliberate reason to share state.

Return values and observable results

A return statement ends the current function execution and supplies a value to the caller. In function add(a, b) { return a + b; }, the expression add(3, 4) evaluates to 7, so another expression can use it: const total = add(3, 4);. Returning a value is different from merely displaying one. console.log(total) writes a diagnostic message to a console, while return total gives the calling code a value it can store, compare, or pass onward.

If execution reaches the end of an ordinary function without a return statement, the call's result is undefined. A bare return; also returns undefined. This is often appropriate for a function whose purpose is an effect, but it is a bug when calling code expects a calculation. A return statement can appear before later statements in the same body; those later statements are not reached on that call. That is another reason to keep a function's result logic clear and deliberate. A caller can compose returned values—for example, use one function's result as an argument to another—without the called function knowing who will consume it. Testing a function with representative inputs and comparing the returned value with an expected value can reveal errors before its behavior is connected to any interface. When reading or writing a function, ask three concrete questions: What arguments does it use? What work does it perform? What value, if any, does the caller receive? Those questions make function behavior testable without involving a web page or a network request.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Think of a function as a named mini-recipe in a program. You write the recipe once, then call its name whenever you want the program to follow those steps. The empty spots in the recipe are parameters. When you call the function, you put actual ingredients—arguments—into those spots. A return is what the recipe hands back when it finishes, such as a finished total or a formatted message. A function can also finish without handing anything back; in JavaScript, that result is undefined.

Picture it like this

A smoothie counter has a recipe called makeSmoothie(fruit, milk). fruit and milk are the labels on the recipe's blanks (parameters). Saying makeSmoothie("banana", "oat milk") provides this order's ingredients (arguments). The finished smoothie is the return value.

Where the picture stops working

A program does not have a person or physical ingredients, and a function may do more than calculate one finished object. Also, JavaScript permits calls with missing or extra arguments, unlike a real counter that might reject an incomplete order.

Worked example

Suppose a checkout needs a total including tax. Write function totalWithTax(price, rate) { const tax = price * rate; return price + tax; }. Here price and rate are parameters; 20 and 0.05 are arguments in totalWithTax(20, 0.05). The calculation is 20 * 0.05, which is 1, then 20 + 1, which is 21. Executing this exact function with Bun printed 21. Because it returns the result, a caller can store it: const due = totalWithTax(20, 0.05);. Replacing return price + tax with console.log(price + tax) would display 21 but would not make due equal to 21.

Key takeaway

A function declaration defines reusable behavior. Calls provide arguments for parameters, and return determines the value a caller can use afterward.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

In function square(number) { return number * number; }, what is number?

Choose an answer, then check it.
Question 2 of 3intermediate

What does totalWithTax(20, 0.05) do in a program after totalWithTax has been declared?

Choose an answer, then check it.
Question 3 of 3intermediate

A calculation function must give its result to code that will store it in a variable. Which body is appropriate?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define a JavaScript function declaration, call, parameter, and argument.
  • Distinguish a parameter from an argument.
  • Explain how return determines the value produced by a call.
  • Apply a small function to calculate and reuse a result.

Common mistakes

  • Calling a parameter an argument everywhere.

    Use parameter for the name in the declaration and argument for the value in a call.

  • Expecting a declaration to run immediately.

    A declaration creates the function; a call invokes its body.

  • Using console.log when later code needs a computed value.

    Return the value and let the caller decide whether to display it.

  • Assuming a function without return produces its last computed expression.

    An ordinary JavaScript function that reaches its end without returning produces undefined.

Easily confused

parameter vs. argument

A parameter is named in the function definition; an argument is supplied by one call.

return vs. console.log

return supplies a value to the caller and ends the function; console.log displays a value but does not return that displayed value.

Key vocabulary

function declaration
Syntax that creates a named function with a parameter list and a body.
function call
An expression that invokes a function, usually by writing its name followed by parentheses.
parameter
A named local binding listed in a function definition for receiving an input.
argument
A value supplied in the parentheses of a particular function call.
return statement
A statement that ends the current function execution and optionally supplies a value to its caller.
undefined
The JavaScript value commonly produced when a function finishes without returning a value.

Sources & references

  1. Functions — JavaScript Guide (MDN Web Docs) — Mozilla
  2. ECMAScript Language: Functions and Classes — Ecma International / TC39

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.