Arrow function
An arrow function is a JavaScript function expression written with arrow syntax that uses lexical binding for this and has no own arguments object.
Functional Programming in JavaScript
An anonymous function expression, typically used as a value or inline callback.
- How it is used
- Supplies concise callback behavior to higher-order array operations that replace manual loops.
- How deep it goes
- Defines one-line implicit returns, multi-statement bodies, and equivalence with regular anonymous functions without examining runtime internals.
- Examples
- Uses squaring arrays, extracting person names, validating values, filtering by birth year, and small arithmetic functions.
- What you can do after
- Apply it via JavaScript array operations to express transformations and predicates without manual loop control.
Read how Functional Programming in JavaScript explains arrow function →
Web Components in Action
An ECMAScript function expression written with arrow syntax that lexically captures the surrounding this value.
- How it is used
- Preserves class-instance scope when Web Components handle mouse events, button clicks, or timers.
- How deep it goes
- Defines lexical scope through working event examples, but does not develop broader function semantics or implementation internals.
- Examples
- Uses photo-carousel button handlers, Web Harp mouse movement, and delayed strum cleanup as concrete callback examples.
- What you can do after
- Apply it in event listeners and timers while retaining access to component state and methods.
Essential TypeScript 5, Third Edition
An arrow function is a concise JavaScript function syntax using an arrow between its parameters and body or result expression.
- How it is used
- Uses concise functions for array callbacks and event handlers where access to an enclosing `this` matters.
- How deep it goes
- Explains expression results, function values, and `this` through examples, including a method-replacement failure; does not detail arrow-function internals.
- Examples
- Shows price summation with `reduce`, a returned greeting function, and a product quantity-change handler.
- What you can do after
- Apply arrow syntax to callbacks and handlers, and diagnose incorrect `this` when replacing a regular method.
Read how Essential TypeScript 5, Third Edition explains arrow function →
Secrets of the JavaScript Ninja, Second Edition
A concise JavaScript function syntax that captures this lexically from its creation context rather than creating its own binding.
- How it is used
- Uses arrow functions for concise callbacks and for preserving `this` in browser event handlers.
- How deep it goes
- Works through parameter and body forms plus lexical `this` in callbacks, while leaving browser-compatibility details to a linked resource.
- Examples
- Compares array-sort and greeting functions, then contrasts constructor and object-literal click handlers.
- What you can do after
- Diagnose/debug with it when a browser click callback changes the wrong object's state.
Read how Secrets of the JavaScript Ninja, Second Edition explains arrow function →
Pro Angular 16
An arrow function is JavaScript function syntax with lexical this binding and a concise expression form.
- How it is used
- Uses concise functions as callbacks, function arguments, inline behavior, and array filters in TypeScript and Angular examples.
- How deep it goes
- Explains parameters, return types, invocation, inline definitions, closures, and filtering, but does not develop broader function semantics.
- Examples
- Demonstrates city-producing functions, Paris and Rome closures, and filtering incomplete todo items.
- What you can do after
- Apply it via concise callbacks, typed function arguments, inline functions, and closure-based functions.
Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond
A concise function expression form with lexical this binding in JavaScript.
- How it is used
- Uses arrow functions to shorten inline callbacks and preserve the surrounding `this` without a saved variable or callback context argument.
- How deep it goes
- Explains syntax, implicit returns, lexical `this`, and common traps through short comparisons; stops short of language-specification internals.
- Examples
- Works through exponent calculation and object-property mapping, then contrasts object-literal returns and jQuery callbacks.
- What you can do after
- Practice/perform arrow-function refactors of callbacks while checking whether lexical `this` matches what the callback API expects.
D3.js in Action, Third Edition
An arrow function is JavaScript function syntax that uses an arrow notation and supports concise expression or block bodies.
- How it is used
- Uses arrow functions as D3 accessors for assigning data-driven SVG attributes.
- How deep it goes
- Explains parameter formatting, expression versus block bodies, returns, and index-based positioning without covering broader function behavior.
- Examples
- Demonstrates bar-chart rectangles, data-derived widths, indexed vertical positions, multiline class accessors, and conditional colors.
- What you can do after
- Apply arrow functions in D3 chains to calculate SVG dimensions, positions, classes, and colors from bound data.
Read how D3.js in Action, Third Edition explains arrow function →
Related concepts
- thisuses · In JavaScript, the this value is determined by a function’s call context or, for an arrow function, inherited lexically.
- functionkind of · A function is a callable program unit that performs an operation, may accept inputs, and can produce a result or side effect.
- function bindingcontrasts with · Function binding is the creation of a function with a predetermined this value and, optionally, preset arguments.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.