.JS File Format – Functions

Forms of function

FunctionDeclaration:
    function BindingIdentifier ( FormalParameters ) { FunctionBody }
FunctionExpression:
    function [BindingIdentifier] ( FormalParameters ) { FunctionBody }
ArrowFunction:
    ArrowParameters [no LineTerminator here] => ConciseBody
ArrowParameters:
    BindingIdentifier
    ( ArrowFormalParameters )
ConciseBody:
    [lookahead ≠ {] ExpressionBody
    { FunctionBody }

const a = (x) => x + 1;                // expression body, returned
const b = (x) => { return x + 1; };    // block body
const c = () => ({ value: 1 });        // parentheses to return an object
const d = x => x * 2;                  // parentheses optional for one simple parameter

• A named function expression’s name is bound only inside the function. The binding is read-only.
• A function declaration inside a block follows block rules.
• The Function constructor always creates a global-scope function. It does not capture the caller’s scope.
• For a function written in source code, Function.prototype.toString returns its exact source text, including comments (ES2019). Built-in functions give a standard placeholder.

The this binding

this is set each time an ordinary function is called, depending on how it is called. It is not fixed when the function is defined.

const o = {
  name: 'o',
  regular() { return this.name; },
  arrow: () => typeof this,
};
o.regular();          // "o"
const f = o.regular;
f();                  // TypeError in strict code: this is undefined

setTimeout(function () { this; });    // whatever the host passes
setTimeout(() => { this; });          // the enclosing this

In sloppy code, a this that is null or undefined becomes the global object, and a primitive is wrapped in an object. In strict code it stays exactly as given. See Strict mode.

At the top level, this is the global object in a script, undefined in a module, and module.exports in a CommonJS module. In a class field or static block, it is the instance or the class: see Classes.

Parameters

FormalParameters:
    [empty]
    FunctionRestParameter
    FormalParameterList
    FormalParameterList ,
    FormalParameterList , FunctionRestParameter
FormalParameter:
    BindingElement
BindingElement:
    SingleNameBinding
    BindingPattern [Initializer]
SingleNameBinding:
    BindingIdentifier [Initializer]
FunctionRestParameter:
    BindingRestElement

function f(a, b = a * 2, { c, d = 1 } = {}, ...rest) {
  return [a, b, c, d, rest];
}
f(1);                         // [1, 2, undefined, 1, []]
f(1, undefined, { c: 3 }, 4, 5); // [1, 2, 3, 1, [4, 5]]

• Missing arguments are undefined. Extra ones are ignored, apart from arguments and rest.
• A default value (ES2015) is used when the argument is undefined. It is evaluated at each call, left to right, and may refer to earlier parameters.
• Parameters that have expressions get their own scope, separate from the body’s var declarations.
• A rest parameter collects the remaining arguments in an array. There may be one, and it must be last, with no default.
• Parameters are simple if none uses a default, rest or destructuring. Non-simple parameters forbid a "use strict" directive in the body, and forbid duplicates.
• Duplicate parameter names are allowed only in sloppy functions with simple parameters.
• A trailing comma is allowed after the last parameter or argument (ES2017), but not after a rest parameter.

The arguments object

Every non-arrow function has a local binding arguments, an array-like object of the actual arguments. It is iterable, with length, and is not an array. An arrow function has no arguments of its own, and sees the enclosing function’s.

The mapped form is an exotic object (Arguments Exotic Objects). Prefer rest parameters, which give a real array.

new and new.target

new F(args) calls the function’s [[Construct]] internal method. For an ordinary function, it creates an object whose prototype is F.prototype, runs the function with that as this, and returns the object, or the function’s return value if that is an object.

new.target is the constructor that new was applied to, or undefined in a normal call. Arrow functions see the surrounding value.

function Point(x) {
  if (!new.target) return new Point(x);
  this.x = x;
}
Point(1) instanceof Point;     // true

Generators and async functions

A generator pauses at yield and returns a generator object, and an async function returns a promise, pausing at await. They are covered in Iterators and generators and Async.

Tail calls

ES2015 specifies that a call in tail position in strict code must reuse the current frame (Tail Position Calls). Few engines have implemented this, so programs cannot rely on it to keep the stack shallow.