Arrow functions

Short syntax

Arrow functions drop the function keyword and use a fat arrow between parameters and body. One expression body returns its value with no braces and no return word. Braces return for multi step bodies.

const add = (a: number, b: number): number => a + b; const double = (n: number): number => { const two: number = 2; return n * two; };

Lexical this

A classic function gets its own this value, which often surprises inside callbacks. An arrow keeps the this value from the surrounding scope instead. Methods that schedule work or handle events stay bound with no extra code.

class Timer { seconds: number = 0; tick(): void { setTimeout(() => { this.seconds += 1; }, 1000); } }

Inline callbacks

Arrows shine as short callbacks passed directly into the call. The logic sits next to the operation it serves. Names exist only when the same callback is reused in several places.

const names: string[] = ["ada", "bob", "cy"]; const upper: string[] = names.map((n) => n.toUpperCase());

When arrows win

Prefer arrows for callbacks, array helpers, and promise chains. Prefer named function declarations for top level units and recursive logic. Match the shape to the job and every reader will follow.

function fetchIds(): number[] { return [1, 2, 3]; } const labels: string[] = fetchIds().map((id) => "id-" + id);

Next: Callbacks

Article author: Arthur Isaev