Variables, data types, conditions, loops and functions

Almost every program, from a calculator to a banking website, is built from the same few ideas. Programs remember things, make choices, repeat work and package tasks into reusable pieces. Once you can recognise these four building blocks you will be able to read simple code in any language, because the ideas stay the same while the spelling changes. This lesson introduces them in plain pseudocode first, and then shows how they look in JavaScript, the language that makes web pages interactive.

Variables: named boxes for values

A Variable is a named place in the computer's memory that holds a value. Picture a labelled box. The label is the variable's name, such as price, and what is inside is its value, such as 250. You can look inside, and you can replace what is inside with something else, which is why it is called a variable: its value can vary.

Good names matter. price tells the next reader what is stored, while x does not. Names usually use no spaces, so programmers join words, for example totalPrice. In pseudocode we write SET price TO 250. In JavaScript the same idea is written with the word let and an equals sign, which means "store the value on the right into the name on the left". It does not mean "is equal to" as in school maths.

let price = 250;
let quantity = 3;
let total = price * quantity;

price = 300;   // the box now holds 300
// total still holds 750 until we work it out again

Read it like a story. Line 1 makes a box called price and puts 250 in it. Line 3 multiplies the two values and stores the answer, 750, in total. Line 5 replaces the value in price with 300, but total is not recalculated, because the computer only does what each line says, once, in order. The words after // are a comment: notes for people that the computer ignores.

Data types: what kind of value is it?

Values come in kinds, and each kind is called a data type. The computer treats each kind differently, just as you treat a phone number differently from a price. The three you will use most are:

Conditions: making choices

A Condition is a question that is either true or false, used to decide which steps to run. You met this as the umbrella example in the last lesson. The pseudocode below checks whether a customer qualifies for a student discount.

SET age TO 17
IF age is less than 18
    SHOW "Student discount applies"
ELSE
    SHOW "Full price"
END IF

In JavaScript the question goes in round brackets after if, and the steps to run go in curly brackets. The comparison symbols are < (less than), > (greater than), === (exactly equal) and !== (not equal). Notice there are three equals signs when comparing. One = stores a value; === asks a question.

let age = 17;

if (age < 18) {
  console.log("Student discount applies");
} else {
  console.log("Full price");
}

console.log shows a message in the browser's developer console, which you will meet in a later module. For now think of it as "SHOW". When this code runs it prints Student discount applies, because 17 is less than 18.

Loops: repeating without retyping

A Loop repeats steps until a stopping rule is met. Without loops, showing a message 100 times would need 100 lines. With a loop it needs three. Loops are the reason computers are so good at boring, repetitive work.

REPEAT for each number from 1 to 3
    SHOW the number
END REPEAT

The JavaScript for loop has three parts inside its brackets, separated by semicolons: where to start (let i = 1), when to keep going (i <= 3) and what to do after each round (i++, which means add one to i). The variable i is just a counter.

for (let i = 1; i <= 3; i++) {
  console.log(i);
}

1
2
3

Functions: reusable named jobs

A Function is a named block of steps that you can run whenever you need it. Think of a recipe card in a drawer. You write the recipe once, give it a name, and then use it again and again. A function can receive values to work with, called parameters, and can give back an answer, called the return value.

function addTax(price) {
  return price * 1.16;
}

let shirt = addTax(1000);   // shirt now holds 1160
let book = addTax(500);     // book now holds 580

Reading it step by step: function addTax(price) defines a job called addTax that takes one parameter named price. The line return price * 1.16; hands back the answer. Further down we call the function twice with different values and store each answer in a variable. We wrote the calculation once and used it twice. If the tax rate changes, we fix one line instead of many.

The tax rate used here is an invented example for practice, not advice about real tax. Put the four ideas together and you can read most beginner programs: values are stored in variables, conditions choose, loops repeat and functions package jobs.