Translate Clear Steps into JavaScript

Start with the rule

A shop sells notebooks for 20 units each. The customer buys three. A single packing charge of 5 units is added to the whole order. There are no other charges or discounts in this exercise.

Pause and write: Is the packing charge per item or per order? Calculate the expected total on paper. Explain why multiplying the packing charge by three would be wrong.

The confirmed rule says once per order. The subtotal is 60 and the total is 65. The arithmetic is easy; understanding what each amount represents is the important work.

Write the steps before translating them

1. Identify the unit price, quantity and packing charge.
2. Multiply unit price by quantity to obtain the subtotal.
3. Add the packing charge once.
4. Display the total with a useful label.

These steps are the algorithm. Now we can express them in JavaScript.

Give information a name

const unitPrice = 20;
const quantity = 3;
const packingCharge = 5;
const subtotal = unitPrice * quantity;
const total = subtotal + packingCharge;
console.log("Order total:", total);

const declares a named binding. The = assigns the value on its right to the name on its left; it is not a question about equality. Later expressions use those names. Declare them before using them in this program.

A const binding cannot be reassigned. We use it because the values do not need reassignment during this calculation. We will study changing values with let later. For objects, const does not mean the contents are immutable; that distinction belongs to a later module.

20 is a number. "Order total:" is text. The comma passes two arguments to console.log, which displays the label and value. * multiplies and + adds these numeric values.

Names such as unitPrice use camelCase: the first word starts lowercase and subsequent words start uppercase. JavaScript distinguishes unitPrice from UnitPrice.

Run the example deliberately

Use the browser Console from lesson 1. You can enter the declarations one line at a time, in order. On the final line, expect the label and 65. Before rerunning a changed version, reload the blank tab to start a fresh context, then enter the whole sequence again. Some consoles reject repeated declarations of the same const name.

Why readable steps matter

Compare the previous version with:

console.log(20 * 3 + 5);

This also produces 65. But the roles of 20, 3 and 5 are not visible. Named steps make it easier to check whether the implementation matches the rule and where a change belongs. More lines are useful here because they carry meaning, not because longer code is inherently better.

A useful comment explains a decision:

// Packing is charged once per order, not per item.
const packingCharge = 5;

The // starts a comment, which is not executed. A comment repeating "add five" would explain less than the business reason above.

Guided exercise: find the wrong interpretation

Someone proposes calculating (unitPrice + packingCharge) * quantity.

Pause: Predict its result for this order. What business rule would that expression implement?

Correction

It produces 75. It charges packing for every item. The parentheses group addition before multiplication. The problem is not invalid syntax: it is a different interpretation of the charge. Under the stated rule, calculate the subtotal first and add packing once.

New information: revise the right decision

The owner changes packing to 8 units per order. Before executing anything, identify what changes and predict the total.

Only the packing value changes. The subtotal remains 60; the total becomes 68. Naming that value makes the affected decision visible.

Independent exercise: another small order

Prepare a quote for two folders costing 15 units each, with a single packing charge of 4 units. Write the rule in your own words, list the inputs, predict the output and then write a program using meaningful names.

One possible correction

const unitPrice = 15;
const quantity = 2;
const packingCharge = 4;
const subtotal = unitPrice * quantity;
const total = subtotal + packingCharge;
console.log("Order total:", total);

The expected total is 34. Different names are acceptable when they communicate the same roles. Do not add taxes or discounts: they were not part of the exercise. For a real quote, confirm whether they apply.

Common mistakes

• Writing "20" when a numeric amount is intended. Text and numbers have different behavior; we will examine conversion in a later module.
• Using a name before declaring it, or changing its capitalization.
• Trying to update a const binding instead of starting a fresh run with revised input values.
• Adding an unstated rule because it seems realistic.

Knowledge check

1. Why calculate the subtotal separately?
2. Does const total = 65 verify that 65 is correct?
3. Does a shorter expression necessarily communicate the rule better?

Answers

1. It names a meaningful intermediate result and separates item cost from the order-level charge.
2. No. Assignment stores a value under a name. Verification needs an independent expectation.
3. No. Choose an expression whose meaning can be reviewed against the rule.

What you learned

Readable JavaScript begins with clear inputs and decisions. Naming the parts helps you explain, review and change the program.