Transform Arrays Without Losing the Original
Use a small pure function with map and reduce.
By BizAIPro Learning · Prerequisites: Turn Values into Results with Functions
What you will learn
- Read an array of numbers
- Transform values with map
- Explain the initial reduce value
Model a collection
An array holds an ordered collection. Indexing begins at zero. Before transforming an array, identify what each entry represents and what the result should represent. A list of quantities and a list of monetary amounts should not be mixed simply because both contain numbers.
Map creates a new result
map calls a function for each entry and returns an array of the returned values. It is useful when every input entry has a corresponding output entry. In the example, each price receives the same calculation. The original prices array remains available for comparison.
Reduce combines entries
reduce carries an accumulator through the collection. The initial value describes where that accumulation starts and handles the empty-array case. Starting a numeric sum with 0 makes the intended type explicit. Omitting an initial value changes behavior for an empty array.
Test a boundary
Run the example, then try an empty prices array. Explain why the total becomes 0 instead of throwing. Floating-point arithmetic is approximate, so production money calculations need an appropriate decimal strategy and rounding rules. Do not assume the display format changes the underlying arithmetic.
Connect to a project
A quotation calculator may map item records into line totals and reduce them into a subtotal. Keep tax and discount rules explicit. Compare a single item, several items and an empty collection before wiring the function into an interface. This separates calculation mistakes from interface mistakes.
Read the example
const prices = [10, 20, 30]; const discounted = prices.map(price => price * 0.9); const total = discounted.reduce((sum, price) => sum + price, 0); console.log(discounted); console.log(total);
Line-by-line explanation
- prices is the original array.
- map returns one discounted value per entry.
- reduce starts at 0 and accumulates the sum.
Expected output
[9,18,27] 54
Common mistakes to avoid
- Using map only for side effects
- Forgetting the empty-array case
- Assuming floating-point numbers are exact money values
Make a change. See what happens.
HTML/CSS renders in a script-free preview. JavaScript runs in a separate, time-limited console worker with network access blocked. DOM scripting and package imports are not supported. Browser memory limits still depend on your device.
Console output
Run your code to see output.
Choose the larger input
Return the larger of numeric parameters a and b. Use a conditional expression: condition ? valueIfTrue : valueIfFalse. Equal inputs must return that same value.
function solution(a, b) { /* your return expression */ }Why supply 0 as the initial sum?
Summary & next step
- Can you now read an array of numbers?
- Can you now transform values with map?
- Can you now explain the initial reduce value?
Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.