JavaScript Statements

In HTML, JavaScript statements are “instructions” to be “executed” by the web browser’s JavaScript engine.

JavaScript Statements

This statement tells the browser to find an HTML element with id="demo" and change its content:

document.getElementById("demo").innerHTML = "Hello Modern JavaScript!";

JavaScript Programs

Most JavaScript programs consist of many JavaScript statements.

These statements are executed sequentially, one by one, in the order they are written (unless control flow statements like conditionals or loops alter this order).

In this example, x, y, and sum are declared and assigned values, and finally sum is displayed:

const x = 5;
const y = 6;
const sum = x + y;
document.getElementById("demo").innerHTML = sum; // Output will be 11

	JavaScript programs (and JavaScript statements) are often referred to as JavaScript code.

Semicolons ;

Semicolons are used to separate JavaScript statements.

It’s a widely adopted best practice to add a semicolon at the end of each executable statement:

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

When separated by semicolons, multiple statements on one line are allowed, though generally discouraged for readability:

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

	JavaScript has a feature called Automatic Semicolon Insertion (ASI). While it means semicolons are technically optional in some cases, relying on ASI can lead to subtle bugs. Explicitly using semicolons is safer and clearer.

JavaScript White Space

JavaScript largely ignores multiple spaces. You can add white space (spaces, tabs, newlines) to your script to improve readability.

The following lines are equivalent:

const person = "Hege";
const person =    "Hege";

A good practice is to put spaces around operators (e.g., =, +, -, *, /):

const x = y + z;

JavaScript Line Length and Line Breaks

For better readability, programmers often try to keep code lines under a certain length (e.g., 80-120 characters).

If a JavaScript statement doesn’t fit on one line, the best place to break it is after an operator or a comma:

document.getElementById("demo").innerHTML =
    "Hello Modern JavaScript!";

JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, enclosed in curly braces {}.

The purpose of code blocks is to define a sequence of statements to be executed together, often as the body of a function, a conditional statement, or a loop.

Here’s an example of a code block within a function definition:

function greetUser() {
    const message = "Hello from the function!";
    document.getElementById("demo").innerHTML = message;
    document.getElementById("myDIV").innerHTML = "How are you today?";
}

	Consistent indentation (e.g., 2 or 4 spaces) within code blocks significantly improves readability. You’ll learn more about functions later.

JavaScript Keywords

JavaScript statements often start with a keyword that identifies the action to be performed.

Here is a list of some important JavaScript keywords:

Keyword	Description
let	Declares a block-scoped variable.
const	Declares a block-scoped, read-only constant.
var	Declares a variable (older syntax, generally superseded by `let` and `const`).
if … else	Executes blocks of code based on a condition.
switch	Executes blocks of code based on different cases.
for	Creates a loop that executes a block of code multiple times.
while	Creates a loop that executes as long as a condition is true.
function	Declares a function.
return	Exits a function and optionally returns a value.
class	Declares a class (for object-oriented programming).
try … catch	Implements error handling for a block of statements.
async	Declares an asynchronous function.
await	Pauses an async function and waits for a Promise to resolve.
import	Imports modules.
export	Exports modules.
break	Terminates a switch statement or a loop.
continue	Skips the current iteration of a loop and continues with the next.

	JavaScript keywords are reserved words. Reserved words cannot be used as names for variables, functions, or labels.