TypeScript Arrow Functions

A function with no function keyword

An arrow function is a function you write at the point of use. The shape is a parameter list, then=>, then a body. In prose that looks like (args) => body. Store it inconst, or pass it straight into map or sort.

C++ lambdas look like [captures](args) { body }. TypeScript arrows do not use a capture list. They close over locals automatically. Annotate parameters. Annotate the return type when the body is more than one expression.

Store an arrow in a const

The type of a function from number to number is written(n: number) => number. That is a type, not a call. The value on the right is the arrow.

const bump = (n: number): number => n + 10;
console.log(bump(5));
console.log(bump(20));

Output is 15 then 30. bump(5) is an ordinary call. A single-expression body after => is the return value. You do not write return on that short form.

A brace body needs return

When the work is more than one expression, use braces. Then you must return if the caller needs a value. Forgetting return makes the function return undefined.

const label = (n: number): string => {
  if (n % 2 === 0) {
    return "even";
  }
  return "odd";
};
console.log(label(8));
console.log(label(7));

Output is even then odd. The return type : string sits before =>.

Pass an arrow into sort

sort takes a comparator. An arrow is the usual way to write that comparison at the call site. You already did this in the algorithms chapter. Here the focus is the syntax, not the array method.

const scores: number[] = [6, 1, 9, 4];
scores.sort((a: number, b: number) => a > b ? 1 : a < b ? -1 : 0);
console.log(scores.join(" "));
scores.sort((a: number, b: number) => b - a);
console.log(scores.join(" "));

First line 1 4 6 9 (the ternary comparator is a long way to write ascending). Second line9 6 4 1 from b - a. Prefer the subtraction form for numbers.

map and forEach

Arrays expect a function of one item. An arrow fits on the same line as the call. Type the item. The return ofmap is a new array. forEach is for side effects such as printing.

const nums: number[] = [1, 2, 3, 4];
const squares: number[] = nums.map((n: number) => n * n);
console.log(squares.join(" "));
nums.forEach((n: number) => {
  console.log(n * n);
});

First line 1 4 9 16. Then four more lines, one square each. Use map when you need the list. Use forEach (or a loop) when you only want to print.

What the pieces mean

Zero parameters are () => 1. One untyped parameter may drop the parentheses in JavaScript; this tutorial always writes (n: number) so the type stays visible.

Keep the body small

An arrow that fills a screen belongs in a named function instead. Use an arrow when the work is a few lines and the name would be used once: a sort order, a small transform, a predicate forfind. Next: Date, for a timestamp you construct from a fixed ISO string.