Thinking like a developer

The developer habit

New developers often ask, "What code do I write?" Experienced developers ask a different question first: what problem am I solving? Asking this first saves time. Without it, you may write ten lines, find out the goal was different, and delete them all.

In this lesson you solve one small problem from start to finish: split a restaurant bill, with a tip, between friends. The program gets three numbers:

• the bill amount,
• the tip percent,
• the number of people.

It gives back one number: how much each person pays, rounded to two decimal places. For rupees, two decimal places means paise (100 paise make 1 rupee). You will do four things, in this order:

1. Say the problem again in your own words.
2. Write a plan in plain words.
3. Turn the plan into small functions.
4. Test your guesses with real JavaScript.

1const people = 4;2const total = 96;3const eachPays = total / people;4console.log(eachPays);

Line 1 stores the number of people, 4. Line 2 stores the total after the tip, 96. Line 3 divides the total by the number of people. Line 4 prints 24. This is a known answer. Later, you can compare the full program with it.

1const bill = 12;2const tipPercent = 0;3const total = bill + (bill * tipPercent) / 100;4console.log(total);

Line 1 stores a bill of 12. Line 2 sets the tip percent to 0. A zero tip is allowed. Line 3 adds the tip, but the tip is zero, so the total stays the same. Line 4 prints 12.

So zero is not always a problem. A tip of 0% is fine. A count of 0 people is not, because you can't split a bill between nobody. A good rule says exactly which values are allowed.

This is the last lesson in Stage 1. You have already seen first programs, the console, code structure, strict mode, the browser, code style, linting, and debugging. Stage 2 starts with variables.

This lesson uses a few small functions and if checks. Each one is explained when it first appears. Full lessons on functions and if come later.

The first job is not to write JavaScript. The first job is to say the request again in plain words that you can check. This is called a restatement. A good restatement names four things:

• Inputs: the values the code gets.
• Output: the answer the code gives back.
• Examples: real numbers you work out by hand.
• Constraints: rules the answer must follow, such as "at least one person".

1const bill = 80;2const tip = bill * 0.2;3const total = bill + tip;4console.log(total);

Line 1 stores the bill, 80. Line 2 works out a 20% tip. 20% is the same as 0.2, so the tip is 16. Line 3 adds the tip to the bill. Line 4 prints 96. You can use this small answer to check the bigger program later.

1// Problem statement2// Given a bill amount, tip percent, and number of people,3// return how much each person pays, rounded to two decimal places.4 5// Example: bill 80, tip 20%, people 4 -> 24

Line 2 names the inputs. Line 3 names the output and the rounding rule. Line 5 is one example worked by hand.

Work one example by hand before you write code:

1. The bill is 80.
2. A 20% tip adds 16, so the total is 96.
3. Four people share it, so each person pays 24.

This example is your first check. If your code gives 20, you forgot the tip. If it gives 96, you forgot to divide. If it gives 2400, the rounding step forgot to divide by 100 at the end.

Be just as exact about the output. "Show the total" can mean three different things:

• print a value in the console, so you can check it;
• return a value, so another part of the program can use it;
• put text on the page, so the person using the site can read it.

Write down which one the task needs.

Asking questions about the task is part of the work. Good questions for the bill problem:

• Can the bill be negative?
• Can the tip be negative?
• What should happen with zero people?
• Do we round each person's share, or the whole bill?

Sometimes nobody knows the answer yet. Then make your best guess and write it down. A guess you have not checked yet is called an assumption. Later, you test it.

Pseudocode is a plan written in ordinary words. It is not JavaScript, so the browser can't run it. That is on purpose. You think only about the order of the steps. You don't worry about commas, brackets, or exact names yet.

1Start with the bill amount, tip percent, and number of people.2Check that the number of people is more than 0.3Add the tip to get the total.4Divide the total by the number of people.5Round the answer to two decimal places.6Return the amount each person pays.

Line 1 names the three inputs. Line 2 is a check: there must be at least one person. Lines 3, 4, and 5 are the steps. Line 6 says what comes out.

The order matters:

• You can't split the bill until the total includes the tip.
• You should round only after you divide. If you round first and then divide, the answer can have long decimals again. For example, 10 divided by 3 is 3.3333…

Keep each step small enough to check. "Work out the bill" hides the real choices. "Add the tip, divide by people, then round" gives each later line of code one clear job. If the task says "handle bad input", write the exact rule, such as "stop when people is zero or less".

Now put the plan back in order below. Each step has two buttons, Move up and Move down.

1Start with the bill amount, tip percent, and number of people.2Check that the number of people is more than 0.3Add the tip to get the total.4Divide the total by the number of people.5Round the answer to two decimal places.6Return the amount each person pays.

If you get stuck, explain the plan out loud to a friend. When you say "then I divide by people", you may notice a missing check: what if people is 0?

Now turn the plan into JavaScript. You will use functions. A function is a group of lines with a name:

• You give it some values, called its inputs.
• It runs its lines.
• It hands an answer back with the word return.

A small function does one job, such as "add a tip" or "round a number". When each part is simple, the whole program is easier to test and to fix.

1function addTip(bill, tipPercent) {2  return bill + (bill * tipPercent) / 100;3}4console.log(addTip(50, 20));

Line 1 makes a function called addTip. It has two inputs, bill and tipPercent. Line 2 works out the tip as (bill * tipPercent) / 100, adds it to the bill, and returns the result. Line 4 calls the function with 50 and 20. The tip is 10, so the console prints 60.

1function addTip(bill, tipPercent) {2  return bill + (bill * tipPercent) / 100;3}4 5const total = addTip(80, 0);6console.log(total);

Line 2 returns the answer to the line that called the function. It does not print anything. Line 5 calls addTip(80, 0) and keeps the answer in total. Line 6 prints 80. This call is also a quick test: with a 0% tip, the bill should not change.

The full program has three small functions. Each one matches one line of the plan. A small function that another function calls is often called a helper.

1function addTip(bill, tipPercent) {2  return bill + (bill * tipPercent) / 100;3}4 5function splitBill(total, people) {6  return total / people;7}8 9function roundCurrency(amount) {10  return Math.round(amount * 100) / 100;11}12 13function calculateShare(bill, tipPercent, people) {14  const totalWithTip = addTip(bill, tipPercent);15  const each = splitBill(totalWithTip, people);16  return roundCurrency(each);17}18 19console.log(calculateShare(80, 20, 4));

Here is what each part does:

• Lines 1 to 3: addTip returns the bill plus the tip.
• Lines 5 to 7: splitBill divides a total by the number of people.
• Lines 9 to 11: roundCurrency rounds to two decimal places. Math.round rounds a number to the nearest whole number. So the function first multiplies by 100, then rounds, then divides by 100 again.
• Lines 13 to 17: calculateShare is the main function. It calls the three helpers in the same order as the plan.
• Line 19 calls calculateShare(80, 20, 4) and prints 24.

Now step through the same code below, one step at a time. The "Running in" label shows which function is running at each step. This is a replay that was recorded from the real functions, so every value you see is real. It is not a full browser debugger.

1function addTip(bill, tipPercent) {2  return bill + (bill * tipPercent) / 100;3}4 5function splitBill(total, people) {6  return total / people;7}8 9function roundCurrency(amount) {10  return Math.round(amount * 100) / 100;11}12 13function calculateShare(bill, tipPercent, people) {14  const totalWithTip = addTip(bill, tipPercent);15  const each = splitBill(totalWithTip, people);16  return roundCurrency(each);17}18 19console.log(calculateShare(80, 20, 4));Run

Small does not mean one function for every tiny calculation. Make a helper when at least one of these is true:

• it has a clear name;
• you want to test it on its own;
• it makes the main function easier to read.

addTip, splitBill, and roundCurrency pass this test. A helper named doStep would not. Its name doesn't say what job it does.

An assumption is a guess you have not checked. Assumptions can hide bugs. The first bill program guesses three things:

• people is a whole number bigger than 0.
• The tip is not negative.
• Rounding to two decimal places is enough.

When one of these guesses is wrong, JavaScript often does not complain. It may give you a value like Infinity and carry on.

1console.log(90 / 0);

This one line prints Infinity. JavaScript allows the division and gives no error. But Infinity makes no sense as a share of a bill. So the program needs a rule that runs before it divides.

1console.log(Number.isInteger(3));2console.log(Number.isInteger(1.5));

Number.isInteger asks one question: is this number whole, with no part after the decimal point? Line 1 prints true for 3. Line 2 prints false for 1.5. You can split a bill between three people, but not between one and a half people. So the check needs two rules: more than zero, and a whole number.

1function calculateShareGuarded(bill, tipPercent, people) {2  if (people <= 0) return "Add at least one person";3  if (!Number.isInteger(people)) return "People must be a whole number";4  if (bill < 0) return "Bill must be zero or more";5  if (tipPercent < 0) return "Tip cannot be negative";6 7  const totalWithTip = addTip(bill, tipPercent);8  const each = splitBill(totalWithTip, people);9  return roundCurrency(each);10}

Lines 2 to 5 are checks. Each one uses if. An if asks a yes-or-no question. When the answer is yes, the rest of that line runs. Here, the rest of the line is return with a clear message, so the function stops early and hands back the message.

A check like this, at the top of a function, is called a guard clause, or just a guard. It checks one rule and stops the function when the rule is broken. Line 3 uses !, which means "not": "if people is not a whole number". Lines 7 to 9 do the normal math only after every check passes. You will learn if fully in Stage 2.

Try it below. Turn each case on or off, and compare the answers. The "No checks" column is the first program, with no guards. The "With checks" column is the program with guards.

1function calculateShareGuarded(bill, tipPercent, people) {2  if (people <= 0) return "Add at least one person";3  if (!Number.isInteger(people)) return "People must be a whole number";4  if (bill < 0) return "Bill must be zero or more";5  if (tipPercent < 0) return "Tip cannot be negative";6 7  const totalWithTip = addTip(bill, tipPercent);8  const each = splitBill(totalWithTip, people);9  return roundCurrency(each);10}

Now step through the guarded function itself. It starts with zero people. Switch to a normal bill or a negative tip, and see which check stops the function.

1function addTip(bill, tipPercent) {2  return bill + (bill * tipPercent) / 100;3}4 5function splitBill(total, people) {6  return total / people;7}8 9function roundCurrency(amount) {10  return Math.round(amount * 100) / 100;11}12 13function calculateShareGuarded(bill, tipPercent, people) {14  if (people <= 0) return "Add at least one person";15  if (!Number.isInteger(people)) return "People must be a whole number";16  if (bill < 0) return "Bill must be zero or more";17  if (tipPercent < 0) return "Tip cannot be negative";18 19  const totalWithTip = addTip(bill, tipPercent);20  const each = splitBill(totalWithTip, people);21  return roundCurrency(each);22}23 24console.log(calculateShareGuarded(90, 15, 0));Run

So there are two different kinds of problem:

• A JavaScript error: the language can't run the code, and stops with a message.
• A wrong answer for the task: the code runs fine, but the result makes no sense for your problem.

90 / 0 is valid JavaScript and gives Infinity. It is still the wrong answer to "split this bill". Tests catch this second kind of problem.

Rounding each share can also leave a small amount left over. When 10 is split three ways, each share is 3.33. Three shares of 3.33 add up to 9.99, not 10. A real checkout needs a clear rule for that last paisa.

JavaScript also stores many decimal numbers only roughly. For example, this function rounds 1.005 to 1, not 1.01. So this function is fine for learning, but not for real payments. A real payment system usually counts money in whole paise, so it never needs decimals, and it follows a written rounding rule.

Where you'll use this

You will use these steps in almost all front-end work. Before you write code for a form, say what the form needs: the inputs, the output, the rules, and one example. Before you fix a bug, write down three things:

• what you expected to happen;
• what actually happened;
• the smallest step that could explain the difference.

1function cartTotal(price, quantity) {2  if (quantity <= 0) return "Choose at least one item";3  return price * quantity;4}5console.log(cartTotal(3, 2));

Line 1 makes a function called cartTotal. It has two inputs, price and quantity. Line 2 is a guard: the quantity must be at least one. Line 3 multiplies the price by the quantity. Line 5 tries a price of 3 and a quantity of 2, so it prints 6.

1function cartTotal(price, quantity) {2  if (quantity <= 0) return "Choose at least one item";3  return price * quantity;4}5 6console.log(cartTotal(3, 2));7console.log(cartTotal(3, 0));

Line 6 prints 6. Line 7 asks for 0 items, so the guard on line 2 stops the function. It prints Choose at least one item.

A boundary case is a value right at the edge of a rule. Here the rule is "at least one item", and 0 is right at its edge. Always test a normal case and a boundary case together. Each one catches a different mistake.

1function nameMessage(name) {2  if (name.trim() === "") return "Enter your name";3  return "Welcome, " + name;4}5 6console.log(nameMessage("Asha"));7console.log(nameMessage(""));

Line 2 uses trim(). It removes spaces from the start and the end of a piece of text. If nothing is left, the name is empty, and the function returns Enter your name. Otherwise line 3 returns a welcome. Line 6 prints Welcome, Asha. Line 7 prints Enter your name. This is the same pattern as the cart: name the rule, check it first, then return the normal answer.

1const typedQuantity = "3";2const quantity = Number(typedQuantity);3console.log(quantity + 1);

A form box on a web page always gives you text, even when the person typed a number. Line 1 stands for that text, "3". Line 2 uses Number() to turn the text into the number 3. Line 3 prints 4. Without line 2, "3" + 1 would join the two as text and give "31".

So turn form values into numbers, and check them, as soon as you read them. Programs that run outside the browser, in Node, get their input in other ways. They still need clear rules for it.

The table below shows the same steps in four everyday situations. Read each row from left to right: what happens, what to ask, and what to try first.

You can use these steps together with the earlier lessons. Read the code from top to bottom, as in Code structure. Print values in the browser console. When the code gets bigger, use the browser debugger to check one assumption at a time.

Common misconceptions

A restatement, pseudocode, and JavaScript each answer a different question. Read each row as: "this thing answers this question, like this."

Each answer comes with a short reason. If you miss one, read the reason. Then ask which step it is about: the inputs, the output, the plan, or a guess you should test.

Key takeaways

• Before you code, say the problem in your own words: the inputs, the output, an example, and the rules.
• Pseudocode is a plan in plain words. It lets you think about the steps without JavaScript details.
• Small functions are easier to name, test, fix, and use again.
• Test normal inputs and unusual inputs. Code can run with no error and still give a wrong answer.
• Saying the plan out loud, and working out one example by hand, show missing steps quickly.

Coming next: Variables: let, const & var.