JavaScript Statements

A computer program is a list of instructions for the computer to carry out. In JavaScript, each instruction is called a statement. A program is just statements run one after another, top to bottom, in the exact order you wrote them. On a web page, the browser is what runs them.

let x, y, z;    // Statement 1: create three variables
x = 5;          // Statement 2: put 5 in x
y = 6;          // Statement 3: put 6 in y
z = x + y;      // Statement 4: add them, put 11 in z
console.log(z);  // Statement 5: show z

JavaScript programs, and the statements in them, are often just called code.

// What a Statement Is Made Of

Statements are built from the pieces you met in the Syntax lesson: values, operators, expressions, keywords, and comments. Here is one statement taken apart:

let message = "Hello" + " World";   // a comment

//  let                 keyword: "create a variable"
//  message             identifier: the variable's name
//  =                   operator: assignment
//  "Hello" + " World"  expression: evaluates to "Hello World"
//  ;                   ends the statement
//  // a comment        comment: ignored by JavaScript

A handy way to tell the difference: an expression produces a value, a statement performs an action. "Hello" + " World" is an expression. let message = ...; is a statement that uses it.

Statements can also do things you can see on the page. This one tells the browser to write text inside the HTML element with id="demo":

document.getElementById("demo").innerHTML = "Hello Dolly.";

// Order Matters

Because statements run top to bottom, each one can use the results of the ones before it, but not the ones after:

let price = 100;
let tax   = 0.08;
let total = price + (price * tax);
console.log(total);

Move the console.log to the top and it breaks, because total does not exist yet when that line runs:

console.log(total);    // runs first
let total = 108;

// Semicolons

A semicolon ; marks the end of a statement. Put one at the end of each statement:

let a, b, c;    // declare 3 variables
a = 5;          // assign the value 5 to a
b = 6;          // assign the value 6 to b
c = a + b;      // assign the sum of a and b to c

Because the semicolon is what separates statements, several can share one line:

a = 5; b = 6; c = a + b;

You will see code online with no semicolons at all. JavaScript has a feature called automatic semicolon insertion that guesses where statements end when you leave them out. So semicolons are technically optional, but they are strongly recommended, because the guess is sometimes wrong:

function getScore() {
  return
    100;
}
console.log(getScore());

// White Space

JavaScript ignores extra spaces. White space is there only to make code readable. These two lines are identical to JavaScript:

let person = "Hege";
let person="Hege";

The one place spaces do matter is inside a string. "Hi there" and "Hithere" are different values.

// Line Length and Line Breaks

For readability, programmers avoid lines longer than about 80 characters. When a statement will not fit on one line, the best place to break it is after an operator:

// Hard to scan: one very long line
let result = (firstNumber + secondNumber) * (thirdNumber - fourthNumber) / divisor;

// Better: each line ends with an operator
let result = (firstNumber + secondNumber) *
             (thirdNumber - fourthNumber) /
             divisor;

// Also common: break right after the =
document.getElementById("demo").innerHTML =
"Hello Dolly!";

A line that ends in an operator is obviously unfinished, so JavaScript keeps reading onto the next line. That is also why the return example above went wrong: a line that looks finished may get a semicolon inserted.

// Code Blocks

Curly braces { } group statements into a code block. The purpose of a block is to mark statements that belong together and run together. You will find them in functions, loops, and if statements:

// A function groups its statements into a block
function showTotal(price, taxRate) {
  let tax   = price * taxRate;
  let total = price + tax;
  console.log("Total: $" + total);
}

showTotal(100, 0.08);

// An if statement also uses a block
let score = 92;

if (score >= 90) {
  console.log("A");
  console.log("Excellent work");
}

Both statements inside the braces run together as a unit when the condition is true. Without the braces, only the first line would belong to the if.

// Keywords

Statements often start with a keyword that says what action to perform. Here are some you will learn in this course:

Keywords are reserved words: they cannot be used as variable names.

// Quick Check

let a = 2; let b = a * 3; console.log(b);

let count = 1;
count = count + 1;
console.log(count);
count = 10;

let total = 5 +
  10;

// Try It

▶ Open Playground

1. Click Open Playground. Add a fourth statement that adds a, b, and c together, then log the result
2. Rewrite all four statements on one line, with semicolons between them. Run it again: same result?
3. Move your console.log line above the let lines and run it. Read the error in the Console
4. Recreate the getScore function with return and 100 on separate lines and confirm you get undefined. Then put them on one line and run it again