A function is a piece of a program given a name so it can be replayed as many times as needed, with different data. JavaScript offers three ways to write one.
The function keyword covers the oldest of the three. It has one property the others lack, and that property often decides the choice.
Definition
A function declaration ties together a name, a parameter list and a body in braces. Whatever the body produces leaves through return; without it, the call evaluates to undefined.
console.log(grossPrice(100)); // 120: the function is already available
function grossPrice(net) {
return net * 1.2;
}The call placed before the declaration works. The engine reads the file once, spots the function declarations and makes them usable anywhere in their scope, body included. This behavior is called hoisting, and only this form has it.
Three ways to write the same idea
function area(w, h) { return w * h; } // declaration
const area2 = function (w, h) { return w * h; }; // expression
const area3 = (w, h) => w * h; // arrow functionAll three compute the same thing. What separates them comes down to two points.
| Form | Available before its line | Value of this |
|---|---|---|
| Declaration | Yes, name and body | Depends on the call |
| Expression | No | Depends on the call |
| Arrow function | No | Inherited from the surrounding code |
In practice the arrow function wins for short functions passed as arguments, such as the ones Array.forEach() or Array.filter() take, because it does not redefine this. The declaration stays preferable for the main functions of a module, which you want to call without worrying about line order.
Parameters
A parameter can carry a default value, used whenever the call supplies nothing. The last one can take three dots before it to absorb the remaining arguments into an array: the Rest (...) parameter.
function invoice(client, rate = 0.2, ...lines) {
const net = lines.reduce((s, n) => s + n, 0);
return { client, gross: net * (1 + rate) };
}
console.log(invoice("Alice", 0.2, 12, 30, 8)); // { client: 'Alice', gross: 60 }A function declared with function also gets the arguments object, holding every argument received. It survives only for compatibility: ...rest replaces it, and produces a real Array.
Frequently asked questions
Should function or the arrow form be preferred?
The arrow function suits anywhere the function is short and passed as an argument, and the way it handles this avoids a whole class of bugs. The function declaration keeps the edge for the named functions of a module, where hoisting lets you order the code by importance rather than by call order.
Can a function be passed as an argument?
Yes, and it is a central habit of the language. A function is a value like any other: it can sit in a variable, travel as an argument, come back through return. That is what makes methods such as filter or Array.reduce() possible, since they receive the treatment to apply.
What happens when a function is called with too few arguments?
No error is raised. Missing parameters hold undefined, and the body runs anyway, all the way to an absurd result several steps later. That is what default values are for, and the first thing typeof helps check when a computation returns NaN with no explanation. Our JavaScript course devotes a full chapter to splitting code into functions, which is where the readability of a growing project is decided.