TL;DR / What you'll learn
What arrow functions are and why they exist
How to write basic arrow functions (one param, multiple params)
Implicit vs explicit return (with clear examples)
Small, practical conversions: normal function → arrow function
When to avoid arrow functions (short checklist)
Tiny exercises you can try right now
Why arrow functions? (motivation)
Purpose: Give the reader a reason to care before showing syntax.
Modern JavaScript aims for clarity and less boilerplate. Arrow functions provide a concise way to write functions — fewer keystrokes, clearer intent for small functions (like callbacks), and a style that fits well with functional patterns (map/filter/reduce). For beginners: arrow functions make many simple operations easier to read and write.
Key thing to show: a short example that reduces boilerplate.
// normal function
const add = function (a, b) {
return a + b;
};
// arrow function
const add = (a, b) => a + b;
What arrow functions are (plain explanation)
Purpose: Define the concept in one clear paragraph.
Arrow functions are a shorthand syntax for function expressions introduced in ES6. They use => and — for single-expression bodies — can implicitly return a value without the return keyword. They also differ from regular functions in how this and arguments behave (lexical this, no arguments object).
Questions to answer while writing:
Is it an alternative to function expressions? (Yes.)
Is it a new type of function? (Syntactic difference + lexical this behavior.)
Should I replace all functions with arrows? (Not always — see caveats.)
Basic arrow function syntax
Purpose: Show the minimal forms so readers can start writing them.
Show the forms: zero params, one param, multiple params, and multi-line bodies.
// zero parameters
const greet = () => 'hello';
// one parameter (parens optional)
const square = x => x * x;
// multiple parameters
const sum = (a, b) => a + b;
// multi-line body (explicit return)
const complex = (a, b) => {
const result = a * 2 + b;
return result;
};
Tip: When the body is a single expression, you can omit {} and the return keyword (implicit return).
Arrow functions with one parameter (shorthand)
Purpose: Explain the parens-optional shorthand and when (not) to use it.
Examples:
// parentheses optional for one parameter
const double = n => n * 2;
// but you must use parentheses for default values or destructuring:
const greet = (name = 'you') => `Hi, ${name}!`;
const print = ({ id }) => console.log(id);
Common beginner mistake: Omitting parentheses while using default parameters or destructuring — that will cause a syntax error. Use parentheses in those cases.
Arrow functions with multiple parameters
Purpose: Show how to write multi-parameter arrows and small examples.
const multiply = (x, y) => x * y;
const fullName = (first, last) => `\({first} \){last}`;
Question to answer: Do parentheses become mandatory? Yes — when there are 0 or >1 parameters, parentheses are required.
Implicit return vs explicit return
Purpose: Teach the most powerful shorthand and the pitfalls (especially with returning object literals).
Implicit return (single expression, no braces):
const add = (a, b) => a + b; // returns a + b
Explicit return (use braces and return):
const addVerbose = (a, b) => {
const sum = a + b;
return sum;
};
Returning object literals — gotcha: If you want to implicitly return an object literal, wrap it in parentheses.
// WRONG — syntax error or block body assumed
const getObj = () => { foo: 'bar' };
// CORRECT
const getObj = () => ({ foo: 'bar' });
Beginner mistakes:
Expecting implicit return to work with {} — but {} starts a block, not an object. Use parentheses.
Forgetting return in multi-line arrow functions (when you have {} you must return explicitly).
Basic differences between arrow functions and normal functions (short and practical)
Purpose: Give practical, beginner-relevant differences so readers avoid wrong assumptions.
this is lexical in arrow functions
No arguments object
- Arrow functions don’t have their own
arguments. Use rest parameters (...args) if needed.
Cannot be used as constructors
- Arrow functions can't be called with
new.
No prototype property
- They’re lightweight function expressions.
Not suitable for object methods that expect dynamic this
- Don’t define object methods as arrow functions if the method needs
this to refer to the object.
Short example showing lexical this:
function Timer() {
this.seconds = 0;
// using arrow: `this` is the Timer instance
setInterval(() => {
this.seconds++;
}, 1000);
}
If you used a normal function in setInterval, you'd need to bind this or use self = this.
Conversion walkthroughs (normal → arrow, step-by-step)
Purpose: Show the transformation process (how to think about converting a function).
Example 1 — simple conversion
- Start: function expression
const square = function (x) {
return x * x;
};
- Remove
function and add => after parameters:
const square = (x) => {
return x * x;
};
- Remove braces and
return for implicit return:
const square = x => x * x;
Example 2 — multi-line function (keep explicit return)
Start:
const compute = function(a, b) {
const sum = a + b;
return sum * 2;
};
Convert:
const compute = (a, b) => {
const sum = a + b;
return sum * 2;
};
Small practical examples (math, greetings, map usage)
Purpose: Give immediate copy-paste examples beginners can run.
// 1. Square (assignment idea)
const square = n => n * n;
// 2. Even or odd
const isEven = n => n % 2 === 0 ? 'even' : 'odd';
// 3. Using map()
const nums = [1, 2, 3, 4];
const squares = nums.map(n => n * n); // [1,4,9,16]
// 4. Greeting
const greet = name => `Hi, ${name}!`;
// 5. Returning object (implicit return)
const makeUser = (id, name) => ({ id, name });
Small comparison: arrow vs normal functions (practical checklist)
Purpose: Give a quick cheat-sheet so the reader knows when to use what.
Use arrow functions when:
You have short callbacks (map/filter/reduce).
You want lexical this (e.g., nested callbacks).
You prefer concise inline functions.
Use regular functions when:
You need to use this as a dynamic receiver (object methods using this).
You need the arguments object.
You need a function to be constructible with new.
Common beginner mistakes & tips
Purpose: Prevent common errors that frustrate learners.
Forgetting parentheses: If you use default params or destructuring, you must use () around parameters.
Returning object literals: Use () => ({}) for implicit return of objects.
Using arrow for object methods: Avoid method: () => { ... } if you rely on this.
Expect arguments to be available: Use rest (...args) instead.
Wrong use with new: Arrow cannot be constructors. new (() => {}) throws.
Line breaks and ASI: Be cautious about automatic semicolon insertion. For example, a return on its own line followed by an object literal can lead to unexpected results.
Short exercises / assignment (with solutions)
Purpose: Let the reader practice; provide solutions for reference.
Exercise A
Write a normal function that returns the square of a number; then rewrite it as an arrow function.
Solution
// normal
function squareNormal(n) {
return n * n;
}
// arrow
const square = n => n * n;
Exercise B
Create an arrow function that returns whether a number is even or odd.
Solution
const evenOrOdd = n => n % 2 === 0 ? 'even' : 'odd';
Exercise C
Use an arrow function inside map() on an array to square each element.
Solution
const nums = [1,2,3,4];
const squares = nums.map(n => n * n);
