Glossary / Arrow functions

Arrow functions

Arrow functions (=>) are concise function expressions that capture this, arguments, super, and new.target lexically from their surrounding context. They are ideal for callbacks that should use the enclosing receiver, but they are not interchangeable with traditional functions: they cannot be constructors, do not have their own arguments, and do not have a dynamically assigned this.

Syntax and return behavior

const double = (n) => n * 2;           // implicit expression return
const makePoint = (x, y) => ({ x, y }); // parentheses disambiguate object
const describe = (value) => {
  const normalized = String(value).trim();
  return normalized;
};

A single parameter can omit parentheses; zero or multiple parameters need them. A concise body is an expression whose value is returned. A braced body is a statement block and needs an explicit return. Returning an object literal from a concise body requires parentheses because braces otherwise start a block.

Lexical this and limitations

An arrow nested in a method sees the method’s this, which is useful for callbacks. But an arrow assigned as an object property does not acquire the object as its receiver when called; it keeps the surrounding this. call, apply, and bind cannot replace arrow this. Arrows have no own prototype, and new Arrow() throws TypeError.

Choose arrows for callbacks and concise functional values. Use method syntax or a traditional function when dynamic receiver behavior or construction is intended. Avoid over-compressed one-liners for complex logic.

Interview questions

  1. What is lexical this? The arrow uses the surrounding context’s this, not the receiver at its call site.
  2. Can an arrow be constructed with new? No; it has no construct behavior.
  3. When are braces required with an explicit return? When the body contains statements; then write return.
  4. Why wrap ({ x }) in parentheses? To make the braces parse as an object expression rather than a function block.

References