JAVASCRIPT / LESSON 06

Give reusable work a function

Define functions, pass arguments, and use returned values.

Content updated

By the end, you can…

  • Defining a function describes work; calling it runs that work. return sends a result back.
  • Predict the example's result, change one part, and verify the behavior in your own script.
Before you begin

One idea at a time

A function groups instructions into a reusable operation. A declaration gives it a name and a body. Nothing inside that body runs just because you wrote the declaration. Call the function with parentheses when you want it to run. A clear function name describes the work, such as makeGreeting or calculateTotal.

Parameters are local names for inputs. Arguments are the actual values supplied in a call. Each call gets its own parameter values, so the same instructions can produce different results. return ends the current call and sends a value back to the caller. Logging that value and returning it are separate actions.

What to remember first

Remember first

Defining a function describes work; calling it runs that work. return sends a result back.

Read the code before trying it

function name(parameter) { ... }Define a function
The parameter is available inside this body, not everywhere in your script.
makeGreeting("Mia")Call with an argument
The argument Mia becomes the name parameter for this call.
return valueSend a result back
The caller can store or use the result. Statements after return in this call do not run.
const double = function (n) { ... }Store a function expression
A function is also a value. This form assigns it to a binding.
(n) => n * 2Write an arrow function
An expression after => is returned implicitly. With a braced body, write return explicitly when you need a result.

Walk through an example

javascript
function makeGreeting(name) {
  return "Hello, " + name + "!";
}

const greeting = makeGreeting("Mia");
console.log(greeting);
console.log(makeGreeting("Sam"));

The declaration describes a greeting but logs nothing. The first call supplies Mia, receives a string, and stores it in greeting. console.log displays that stored string. The second call uses Sam and logs its result directly. The function body stays the same; only its input changes.

See it happen: try a small change

Give reusable work a function: try it

Predict the result, choose a version, then compare the code and output. Try the controls when the example has them. Each version starts fresh.

Code to notice

function double(number) {
  return number * 2;
}
console.log(double(4));

Live result

Lesson example
index.htmlPreview

What changed: return sends eight to console.log.

Look a little closer

A function with no explicit return evaluates to undefined when called. It may still perform useful work such as updating a page. Decide whether your function should produce a value, perform an action, or both, and make that behavior clear. Avoid hiding important work inside a function whose name suggests it only calculates.

You can pass a function to other code without calling it: the name alone refers to the function value. Such a function is often called a callback. Later, event listeners will call your callback when someone interacts. Arrow functions are concise, but they have different this behavior from ordinary functions; revisit that difference in the advanced objects lesson.

Try it in your own project

Keep the same HTML and replace script.js with your total function and its two calls. Expect 12 and 0. Replace the declaration when trying the arrow version rather than keeping two definitions named total.

The interactive preview runs in its own isolated document. Its Output panel mirrors console.log messages; it is not a full DevTools console. Choosing another version or resetting starts a fresh example and does not edit your local files. Read any simulation label: storage and request demonstrations explain their offline substitutes, while the written local examples use the real browser APIs.

A common wrong turn

Writing makeGreeting without parentheses refers to the function rather than running it. Conversely, adding parentheses when you are meant to pass a callback runs it too early. Also check that a braced arrow body contains return; braces change an expression body into a statement body.

Your turn: give reusable work a function

Write a function that calculates the cost of several notebooks and reuse it with different quantities.

Try this in your own HTML and JavaScript files, then open the page in a browser. There is no separate checked practice for this task yet.

  1. Define function total(price, quantity) with return price * quantity in its body. Commas separate the two parameters; supply the two arguments in that same order.
  2. Log total(4, 3) and total(4, 0). Expect 12 and 0.
  3. Rewrite it as an arrow function in a separate run. Keep the same results, then explain which values are parameters and which are arguments.

Go to the source

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.