Lesson 4
Expressions & arrow functions
Build a practical mental model for expressions & arrow functions and use it in working JavaScript.
By the end, you will be able to…
- Explain expressions & arrow functions in your own words
- Use expressions & arrow functions in a small program
- Recognize and debug a common failure mode
Build the mental model
Arrow functions are a compact expression syntax: a single expression is returned implicitly without a return keyword or braces, while a block body needs both.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
Arrow functions are the default style for callbacks (map, filter, event handlers) throughout modern JavaScript, so reading them fluently is essential.
Real-world example
Array method callbacks like items.map(item => item.price) rely on this concise arrow syntax constantly.
Common mistakes
- Adding braces but forgetting the return keyword, getting undefined
- Confusing implicit return (no braces) with an explicit block body
- Wrapping an object literal return in braces without parentheses, e.g. () => { id: 1 } (parsed as a block, not an object)
Try it yourself
Challenge
Convert the function declaration below into an arrow function with an implicit return.
Knowledge check
Why does () => { id: 1 } not return an object as many people expect?
Summary
Use concise arrow functions for short expressions; add braces and return for multi-statement bodies.