Arrow Functions

A shorter way to write function expressions — especially for callbacks.

Arrows are expressions (not declarations), so they do not hoist like function name() {}. Prefer them for short transforms. Event listeners in this workbook often stay as function () {}. Arrows also do not create their own this — leave that for later. 

Results appear here.

Run each arrow form on the score above.

Important JavaScript

// Block body — use { } and an explicit return
const labelBlock = (score) => {
  return score + " points";
};

// Concise body — expression is returned automatically
const labelConcise = (score) => score + " points";

// One parameter — parentheses optional
const double = (n) => n * 2;
const doubleShort = n => n * 2;

// Zero or 2+ parameters — parentheses required
const zero = () => 0;
const add = (a, b) => a + b;

// Not hoisted:
// labelConcise(1);  // would fail if placed above the const