JavaScript Statements

A JavaScript program is made up of instructions that tell JavaScript what to do. You have already been writing these instructions:

const name = "Sam";
console.log(name);
name = "Alex";

Each line asks JavaScript to perform an action. These instructions are called statements. We will start with familiar code, then add the names that help you understand how it is structured.

A statement is an instruction that JavaScript can execute. Variable declarations, assignments, function calls, conditions, loops, and returns are all common kinds of statements.

const age = 30;

console.log(age);

age = age + 1;

if (age > 18) {
  console.log("Adult");
}

JavaScript normally evaluates statements in order, from top to bottom. Control flow, functions, and asynchronous work can change when later code runs. Review related ideas in Variables, Functions, Loops and Switch, and Conditional Statements.

The word statement is a broad category. You have already met many of these:

• Variable declaration: const age = 30;
• Assignment: age = 31;
• Function call: console.log(age);
• Conditional statement: if (age >= 18) { ... }
• Loop: for (let i = 0; i < 3; i++) { ... }
• Return statement: return total;

Do not worry about memorizing every category. The useful first idea is that a statement tells JavaScript to do something.

An expression is code that produces a value. These are all expressions:

• 2 + 2 produces 4.
• age produces the value stored in age.
• user.name produces a property value.
• getTotal() produces the function's result.
• true and "Hello" are values too.

const total = 2 + 2;
//             2 + 2 is the expression.
// The complete line is a declaration statement.

Remember: expressions produce values; statements perform instructions. They are not always separate: a statement can contain one or more expressions.

Some expressions can be written as complete statements. The expression produces or performs a result, and the complete line becomes an instruction.

console.log("Hello");
count = count + 1;
user.name = "Sam";

Function calls, assignments, and property updates are common expression statements. This is why console.log(total); can be described both as a call expression used as a statement and, more simply, as an expression statement.

A single-line statement is a statement written on one line. This is the most common style in JavaScript for declarations, assignments, and function calls.

let score = 100;
console.log(score);
score = score - 10;

Each of these lines is a complete statement. Semicolons are optional in many cases because of Automatic Semicolon Insertion, but writing them yourself is still a safer habit.

A single-line statement ends when the step is complete. You can place multiple statements on one physical line with semicolons, but doing so usually hurts readability.

// Technically valid, but avoid this style
let x = 5; let y = 10; console.log(x + y);

A code block is a group of statements enclosed in curly braces: { ... }. The braces group statements together so they can be controlled as one unit.

const temperature = 30;

if (temperature > 25) {
  const message = "It is hot outside.";
  console.log(message);
  console.log("Stay hydrated!");
}

function greet(name) {
  const greeting = "Hello, " + name + "!";
  console.log(greeting);
}

Both the if body and the function body are blocks. Blocks commonly appear in if/else, loops, functions, and try/catch. Curly braces matter because they show exactly which statements belong together.

Beginner tip: use braces consistently. Without them, an if may control only the first following statement, which is easy to misread.

A semicolon commonly marks the end of a statement.

const city = "Paris";
console.log(city);

Semicolons are often optional because JavaScript has Automatic Semicolon Insertion. JavaScript can insert some semicolons automatically, but many teams write them explicitly and consistently because that makes statement boundaries easier to see and avoids some surprises.

Automatic Semicolon Insertion, or ASI, means JavaScript can insert a semicolon in certain situations when its grammar requires the end of a statement.

let country = "France"
console.log(country)

This works because JavaScript can interpret the line break as the end of each statement. ASI is based on JavaScript grammar, not simply on every newline. It is not a rule that inserts a semicolon after every line.

A line break immediately after return can end the return statement before the expression that follows it.

function getConfig() {
  return
  {
    theme: "dark"
  };
}

console.log(getConfig()); // undefined

JavaScript effectively treats this as return;, so the function returns undefined. Keep the returned expression on the same line as return:

function getConfig() {
  return {
    theme: "dark"
  };
}

Common ASI mistake: do not put a line break immediately after return when the returned expression is supposed to continue.

Whitespace includes spaces, tabs, and newlines. JavaScript generally ignores whitespace between tokens, but the same behavior for the engine does not mean code is equally readable for humans.

const total = 10 + 5;
const compactTotal=10+5;

if (total > 10) {
  console.log("Greater than 10");
}

Strings and some syntax make whitespace meaningful, so “JavaScript ignores whitespace” is not an absolute rule. Use consistent spacing and indentation to show blocks and make code easier to maintain.

• Thinking every line is a statement: 2 + 2 is an expression inside a declaration statement.
• Thinking every newline creates a semicolon: ASI follows grammar, not every line break.
• Putting return on its own line: this can return undefined.
• Putting multiple statements on one line: valid with semicolons, but harder to read.
• Using poor indentation: the engine may run the code, but humans struggle to see its structure.
• Confusing a block with a statement: { ... } groups statements and is used by many statements.

1. Is 2 + 2 an expression or a statement?
2. Is const total = 2 + 2; a statement or expression?
3. What does console.log(2 + 3); do?
4. Identify the block in if (age > 18) { console.log("Adult"); console.log("Allowed"); }.
5. What does the return newline example return?
6. Which is easier to read: const x = 5; const y = 10; console.log(x + y); or three separate lines? Explain why.

Answers: 1. Expression. 2. Statement containing an expression. 3. It calls console.log with the value 5. 4. The statements between { and }. 5. undefined, because ASI ends return. 6. Three separate lines are easier to scan and maintain.

• Statement: an instruction JavaScript can execute.
• Expression: code that produces a value.
• Expression statement: an expression used as a complete statement.
• Block: a group of statements inside { }.
• Semicolon: commonly marks the end of a statement.
• ASI: JavaScript can insert some semicolons automatically.
• Return plus newline: a common ASI pitfall.
• Whitespace: usually ignored between tokens, but important for readable formatting.

Now that you understand how JavaScript instructions are structured, let's see how JavaScript can interact with the browser using popup boxes.

• What is a statement in JavaScript, and how does it differ from an expression?
• What is Automatic Semicolon Insertion (ASI), and when can it cause unexpected behavior?
• What is a code block, and why are curly braces important?
• Does whitespace affect JavaScript execution, and how should indentation be used?