JavaScript Statements

Every instruction you give to JavaScript is a statement. When you declare a variable, call a function, or run a loop, you are writing statements. Before you can read or write JavaScript code confidently, you need to understand what a statement is and how the engine processes it.

Understanding statements also helps you grasp related concepts like semicolons, code blocks, and how whitespace is handled - all of which affect the readability and reliability of your code.

A statement is a complete instruction that the JavaScript engine reads and executes. Think of it as a single sentence in a language - it has a clear beginning and end and expresses one complete action.

Common examples of statements include:

• Variable declarations - telling JavaScript to create a storage container
• Assignment statements - storing a value in a variable
• Function calls - telling JavaScript to run a piece of reusable code
• Control flow - if/else, loops, switch

// Variable declaration statement
let userName;

// Assignment statement
userName = "Alice";

// Declaration and assignment in one statement
let age = 25;

// Function call statement
console.log(userName);

// Expression statement
age = age + 1;

Each line above is a complete instruction. The JavaScript engine executes them one by one, top to bottom, unless a control flow statement changes the order.

My story: When I first started coding, I would mix up expressions and statements. I thought 5 + 3 was a statement because it looked like something was happening. It's actually an expression - it produces a value but does not instruct the engine to do anything on its own. Wrapping it in console.log(5 + 3) turns it into a statement. Understanding this distinction helped me write cleaner, more intentional code.

A single-line statement is an instruction that fits entirely on one line. It is the most common form of statement in JavaScript. Variable declarations, assignments, and function calls are all typically written as single-line statements.

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

Each of these lines is a complete statement. The semicolon at the end is optional in most cases (JavaScript has a mechanism called Automatic Semicolon Insertion), but it is good practice to include it. We will cover this in the Semicolon section below.

A single-line statement ends where the instruction is complete. You can write multiple statements on the same physical line by separating them with semicolons, although this is not recommended because it 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 wrapped inside curly braces { }. Blocks are used to group multiple statements together so they are treated as a single unit.

You will see code blocks everywhere in JavaScript - inside if statements, else branches, for loops, while loops, and function bodies.

let temperature = 30;

if (temperature > 25) {
  // This is a code block - all statements inside run together
  let message = "It is hot outside.";
  console.log(message);
  console.log("Stay hydrated!");
}

The three statements inside the if block only execute when the condition is true. Without the curly braces, only the very first statement after the condition would be controlled by the if - the rest would run regardless.

// Function body is a code block
function greet(name) {
  let greeting = "Hello, " + name + "!";
  console.log(greeting);
}

greet("Alice");

Code blocks can be nested inside each other. An if block inside a for loop inside a function is perfectly valid JavaScript. Each pair of curly braces defines its own block.

In JavaScript, a semicolon ; marks the end of a statement. It signals to the engine that one instruction is complete and the next one can begin.

let city = "Paris";   // semicolon ends this statement
console.log(city);    // semicolon ends this statement

Automatic Semicolon Insertion (ASI)

JavaScript has a feature called Automatic Semicolon Insertion (ASI). When the engine encounters a line ending where a semicolon would be valid, it automatically inserts one. This means the code below runs without errors:

// No semicolons - ASI handles them
let country = "France"
console.log(country)

However, ASI does not always behave the way you expect. There are edge cases where the engine inserts a semicolon in a place you did not intend, leading to bugs that can be very difficult to track down.

// ASI inserts a semicolon after "return"
// This function returns undefined, not the object
function getConfig() {
  return
  {
    theme: "dark"
  }
}

console.log(getConfig()); // undefined - not what you wanted!

My take: Always use semicolons. ASI can save you in simple cases, but relying on it leads to bugs that are hard to find. Experienced developers who skip semicolons know every edge case - beginners do not. Write the semicolon explicitly and remove all ambiguity. Your future self will thank you.

Whitespace

Whitespace refers to spaces, tabs, and newlines. The JavaScript engine ignores whitespace between tokens (keywords, values, operators). This means you can format your code however you like to improve readability - JavaScript does not care about the extra spaces.

// These two statements are identical to the engine
let total = 10 + 5;
let total2=10+5;

// Indenting code blocks improves readability
if (total > 10) {
  console.log("Greater than 10");
}

Even though whitespace is ignored by the engine, consistent indentation is essential for human readers. Always indent statements inside code blocks by two or four spaces so the structure of your code is instantly visible.

What's next? Now that you understand statements and how the engine reads instructions, let's explore popup boxes in the next tutorial.

• What is a statement in JavaScript? How does it differ from an expression?
• What is Automatic Semicolon Insertion (ASI) in JavaScript? Can you give an example where relying on ASI causes unexpected behavior?
• What is a code block in JavaScript? Why are curly braces important when using if statements and loops?
• Does whitespace affect how JavaScript executes code? How should you use indentation and spacing to improve code quality?