JavaScript from zero: values, decisions and loops

Two ways into the same idea

Before You Start

The Core Idea

1Where do you write JavaScript and where do you see its output?

Three places: (1) right here in the lesson: press "Run" under any example, edit the code and run it again. (2) in the browser: press F12, open the Console tab, type a line and press Enter. (3) in your page: inside a <script> tag just before the end of body, or in an app.js file linked with <script src="app.js"></script>.

The command you will write thousands of times is console.log(...): it prints any value to the Console so you can see what is happening inside your program. A comment starts with // for one line, and the browser ignores it.

// my first program: press Run
console.log("Hello, Darb!");
console.log(2 + 3);
console.log("2" + "3");   // text joined to text, not maths
console.log(10 / 4, 10 % 4, 2 ** 10);

2Variables: const and let

A variable is a name for a value you keep to use later. const is for a value you will not rebind to something else, which is most variables. let is for a value that will change, like a counter. Do not use the old var. Names are English, start lowercase and run words together with a capital for each new word: totalPrice (camelCase).

const shopName = "Darb Cafe";
const pricePerCup = 14;
let cups = 2;

console.log(shopName, "sells a cup for", pricePerCup);
cups = cups + 1;       // let can change
cups += 1;             // the same, shorter
console.log("cups now:", cups);
console.log("bill:", cups * pricePerCup);

3Kinds of values: text, number and true/false

Every value has a type, and typeof tells you which. Text string goes in quotes. A number number has no quotes, whole or decimal. A boolean has only two values: true and false. undefined means "not given a value yet", and null means "no value, on purpose".

const name = "Sara";
const age = 21;
const isMember = true;
let nickname;            // no value yet

console.log(typeof name, typeof age, typeof isMember, typeof nickname);
console.log(Number("42") + 1, String(42) + 1);   // converting on purpose
console.log(Number("abc"));                      // NaN: "not a number"
console.log(0.1 + 0.2);                          // decimals are approximate!

Look at the last line: 0.1 + 0.2 is not exactly 0.3, because the computer stores decimal fractions in binary approximately. That is why money is calculated in cents or halalas (whole numbers) and divided by 100 only for display.

4Working with text

The easiest way to build text from values is a template literal with backticks ` `: you write ${...}` inside it and put any value or expression there. Strings come with ready-made tools (methods) you call with a dot: length, upper case, trimming, searching, replacing.

const customer = "  noura  ";
const drink = "latte";
const cups = 3;

const clean = customer.trim();
console.log(`Hello ${clean}, ${cups} x ${drink} = ${cups * 14} SAR`);
console.log(drink.length, drink.toUpperCase(), drink[0]);
console.log(drink.includes("tt"), drink.replace("latte", "mocha"));
console.log("05-123-4567".split("-"));

5Comparison and logic: ===, && and ||

A comparison gives true or false: >, <, >=, <=, and === "exactly equal" and !== "not equal". To join two conditions: && means "and" (both true), || means "or" (either is enough), and ! means "not".

const age = 17;
const hasTicket = true;

console.log(age >= 18);                 // false
console.log(age >= 18 && hasTicket);    // both? false
console.log(age >= 18 || hasTicket);    // either? true
console.log(!hasTicket);                // not: false

console.log("5" === 5, "5" == 5);       // strict vs loose
console.log("" == 0, null == undefined); // loose surprises

6Decisions: if and else

if (condition) { ... } runs the block only when the condition is true. else handles the other case, and else if covers several cases in order, stopping at the first true one. The ternary condition ? a : b is a short decision that gives a value.

function discountFor(total) {
  if (total >= 100) {
    return 0.15;
  } else if (total >= 50) {
    return 0.05;
  } else {
    return 0;
  }
}

for (const total of [30, 60, 120]) {
  const rate = discountFor(total);
  const label = rate > 0 ? `${rate * 100}% off` : "no discount";
  console.log(total, "->", label, "->", total - total * rate);
}

Truthy and falsy: in a condition, any value turns into true or false. Only six values are "falsy": false, 0, "" (empty text), null, undefined and NaN. Everything else is truthy, even "0" and "false" as text. So if (name) means "if the name is not empty".

7Loops: for and while

A loop repeats steps instead of writing them many times. for (let i = 1; i <= 5; i++) counts from 1 to 5: a start, a keep-going condition, a step. for (const x of list) visits each item in a list, and is usually the clearest. while (condition) repeats as long as the condition holds. break leaves the loop, and continue skips to the next round.

// 1. count
for (let i = 1; i <= 3; i++) {
  console.log("cup number", i);
}

// 2. visit every item
const orders = ["latte", "mocha", "v60"];
for (const drink of orders) {
  if (drink === "mocha") continue;   // skip mocha
  console.log("making", drink);
}

// 3. repeat while a condition holds
let beans = 100;
let cupsMade = 0;
while (beans >= 18) {
  beans -= 18;
  cupsMade++;
}
console.log(cupsMade, "cups, beans left:", beans);

Worked example

Problem: a café bill calculator. We have the cups and price of each drink. Compute the total, apply a 10% discount if it exceeds 50 SAR, add 15% tax, and print the bill. Steps: loop over the orders adding cups × price to the total, then a decision for the discount, then the tax, then print with a template literal. We work in halalas to avoid 0.1 + 0.2 fractions:

const order = [
  { drink: "latte", cups: 2, price: 1400 },   // prices in halalas
  { drink: "mocha", cups: 1, price: 1600 },
  { drink: "v60",   cups: 2, price: 1800 },
];

let subtotal = 0;
for (const line of order) {
  const lineTotal = line.cups * line.price;
  console.log(`${line.cups} x ${line.drink}`.padEnd(14), (lineTotal / 100).toFixed(2));
  subtotal += lineTotal;
}

const discount = subtotal > 5000 ? Math.round(subtotal * 0.10) : 0;
const tax = Math.round((subtotal - discount) * 0.15);
const total = subtotal - discount + tax;

console.log("subtotal".padEnd(14), (subtotal / 100).toFixed(2));
console.log("discount".padEnd(14), (-discount / 100).toFixed(2));
console.log("VAT 15%".padEnd(14), (tax / 100).toFixed(2));
console.log("TOTAL".padEnd(14), (total / 100).toFixed(2), "SAR");

Try it: change the mocha cups to 0 and run: does the discount still apply? Then add a line for a fourth drink.

Myth vs Reality

Where you meet it at work

Test your understanding

Quick review cards

Check Your Understanding