Summary - Arrow functions
Build an array filtering and sorting tool using arrow functions.
Summary - Arrow functions
In this group you learned arrow functions: the => arrow, concise and block bodies, parameter usage, lexical this, and that arrows cannot be constructors. Now you will combine them in a small tool.
Goal: a tool that filters a product array by price, sorts it, and computes the total. Every function will be an arrow.
Exercise Filter and sort by price
Write a filterByPrice arrow function. It takes a maxPrice parameter. From the products array, use filter to keep items whose price is less than or equal to maxPrice, then sort them by price ascending. Use arrow callbacks in both.
Show example solution
const filterByPrice = (maxPrice) => {
return products
.filter((p) => p.price <= maxPrice)
.sort((a, b) => a.price - b.price);
};Exercise Compute the total price
Write a totalPrice arrow function. It takes an items parameter and returns the sum of all product prices using reduce. The initial value should be 0.
Show example solution
const totalPrice = (items) =>
items.reduce((sum, item) => sum + item.price, 0);Test yourself
-
Which is true?
- An arrow function can be called with new
- With one parameter, parentheses are optional
- An arrow has its own arguments object
- A block body does not use return
Show answer
With one parameter, parentheses are optional — Correct. With one parameter, parentheses can be dropped: <code>n => n + 1</code>.
-
Match the concepts
- => arrow
- arrow function
- lexical this
- inherits outer scope
- ...args
- rest parameter
- new arrow
- throws TypeError
-
What is the result?
[5, 10, 15].reduce((a, b) => a + b, 0);- 15
- 25
- 30
- 0
Show answer
30 — Correct. 0 + 5 + 10 + 15 = 30.