Functions

A name for a piece of work

A function is a block of code with a name, written once and called as often as needed. function greet(name) { … } declares it; greet("Ada") runs it with that value in place of the parameter.

Everything the function needs arrives through its parameters, and what it produces leaves through return. A function that returns its sentence can be logged, stored or combined; one that only logs can do nothing else.

Declared, then called

function greeting(name) {
  return `Hello, ${name}!`;
}

console.log(greeting("Ada"));
console.log(greeting("Grace"));

Arrow functions

The shorter form — const double = (n) => n + n; — is a function as a value: a name on the left, parameters, and an expression that is returned without the word return. For one-line functions it is the common shape in modern JavaScript.

With a block body the braces and the return come back. Use the arrow form for the short, obvious functions and the full form when a reader benefits from seeing the shape — the language does not mind either way.

Small pieces are easier to fix

The gain is the same as in any language: a function that does one thing can be read, tried and corrected on its own. If the honest name needs the word "and", it is two functions that have not been separated yet.

Parameters, defaults and scope

A parameter can have a default: function greet(name = "friend") uses the fallback when the caller passes nothing or undefined. That keeps the function usable with one argument and explicit with two, without a second overload or a branch at every call site.

Names declared inside a function belong to that function. A const created in the body is gone when the call returns, and a name outside it is visible unless the function shadows it. That isolation is why a function can be moved without dragging the rest of the file with it.

Pure functions are easier to trust

A function that only reads its arguments and returns a value is called pure. It has no hidden state, so the same input always gives the same output, and a test can call it without setting up a page. Most of the functions worth naming in a program can be written this way; the ones that touch the DOM or log are the exceptions, and they are easier to find when they are isolated.

A worked call, step by step

Follow console.log(greeting("Ada")). The argument "Ada" is evaluated first and bound to the parameter name. The body builds a template literal with that value and returns it. The call is replaced by the returned string, and only then does console.log run, printing the sentence. The function itself does not print anything.

That order explains the difference between returning and logging. A function that returns hands the value back to the expression that called it, so it can be logged, stored, compared or passed on. A function that logs has already used the value up; the caller receives undefined and can do nothing with it.

Returning early

A return also ends the function immediately. That is useful for a guard at the top: if a name is empty, return the fallback and let the rest of the body assume a real value. The reader can then stop thinking about the empty case at the line where it was handled.

Without an early return, the same guard becomes a nested if around the whole body, and each extra condition adds a level of indentation. A short function with two guards at the top is usually easier to read than one with a single deeply nested branch.

Try these next

• Write add(a, b) as both a declaration and an arrow function; call each once.
• Give a greeting function a default name and call it with no argument.
• Return a value from a function and log it outside, instead of logging inside.