JavaScript basics: variables, conditions, loops, functions, arrays and objects

In the earlier programming lessons you met variables, conditions, loops and functions as ideas. Now you will write them in JavaScript, the language every web browser can run. It is the third part of the web trio: HTML gives a page its structure, CSS its looks and JavaScript its behaviour. Nothing you write here can harm your computer, because the code runs inside the browser's protected space, and the practice lab below needs nothing installed.

Where JavaScript runs and how to see results

JavaScript is a programming language built into browsers. When a page loads, the browser reads the HTML, the CSS and any scripts, and runs the scripts line by line from top to bottom. To see what your code does you need somewhere to show output. The simplest way is console.log(...), which prints a value to the Console, a panel in the browser's developer tools that you will meet properly in the third lesson of this module.

You can also put a script in an HTML page with a script element. Anything between the tags is JavaScript. Lines starting with // are comments: notes for humans that the computer ignores.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First script</title>
</head>
<body>
  <h1>Hello</h1>
  <script>
    // This line prints to the console.
    console.log("The script ran.");
  </script>
</body>
</html>

Variables: named boxes for values

A Variable is a named place that holds a value. In modern JavaScript you create one with let when the value will change later, and with const when it will not. A good habit is to start with const and switch to let only when you need to. The equals sign does not mean "is equal to" here: it means "put the value on the right into the name on the left".

Values have types. The three you meet first are numbers (42, 3.5), strings (text in quotation marks, such as "Amina") and booleans (true or false). You can join strings with + or, more neatly, with a template literal: text between backticks with ${name} slots.

const gardener = "Wanjiru";   // a string, will not change
let seedsPlanted = 12;        // a number, will change
const isOpen = true;          // a boolean

seedsPlanted = seedsPlanted + 5;
console.log(`${gardener} has planted ${seedsPlanted} seeds.`);
console.log(typeof seedsPlanted);

Wanjiru has planted 17 seeds.
number

Conditions: making decisions

A Condition is a question with a true or false answer. if runs a block of code only when the condition is true; else if and else cover the other cases. Comparisons use >, <, >=, <=, === (is exactly equal to) and !== (is not equal to). Always use three equals signs to compare: a single = assigns and would overwrite your variable. Combine conditions with && (and) and || (or).

const temperature = 31;

if (temperature >= 35) {
  console.log("Too hot: water the beans twice.");
} else if (temperature >= 20) {
  console.log("Warm: water the beans once.");
} else {
  console.log("Cool: no extra water.");
}

Loops: repeating work

A Loop repeats a block of code. The classic for loop has three parts inside its brackets, separated by semicolons: where to start (let i = 1), when to keep going (i <= 5) and what to do after each round (i++, which adds one). A while loop repeats as long as a condition stays true; take care that something inside it eventually makes the condition false, or it will never stop and the browser tab will freeze.

for (let i = 1; i <= 5; i++) {
  console.log("Row " + i);
}

let water = 3;
while (water > 0) {
  console.log("Litres left: " + water);
  water = water - 1;
}

Functions: code you can reuse

A Function is a named block of code you can run whenever you like. It can take parameters (inputs written inside the brackets) and can return a result. Defining a function does not run it; you run it by writing its name followed by brackets, which is called calling it. Functions save you repeating yourself and give pieces of code a clear purpose.

function greet(name) {
  return "Hello, " + name + "!";
}

const total = (price, quantity) => price * quantity;

console.log(greet("Joseph"));
console.log(total(250, 4));

Hello, Joseph!
1000

The second function uses the shorter arrow function style, which you will see often. Both do the same job here.

Arrays and objects: collections of values

An Array is an ordered list written in square brackets. Items are numbered from zero, so the first item is list[0]. The property list.length gives how many items there are, and list.push(x) adds one at the end. An object keeps named values, called properties, in curly brackets and you read one with a dot: person.name. Real programs mix them: an array of objects is a table of records.

const beds = [
  { name: "North bed", rows: 4 },
  { name: "East bed", rows: 6 },
];

let totalRows = 0;
for (const bed of beds) {
  console.log(bed.name + " has " + bed.rows + " rows");
  totalRows = totalRows + bed.rows;
}
console.log("Total rows: " + totalRows);

North bed has 4 rows
East bed has 6 rows
Total rows: 10

Try it yourself