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. If you want to read code confidently, this is one of the first concepts to master.

Understanding statements also makes semicolons, code blocks, and whitespace much easier to understand, which improves both readability and reliability.

A statement is a complete instruction that the JavaScript engine executes. You can think of it like one full sentence that tells the engine to do something specific.

Common examples of statements include:

• Variable declarations that create storage in memory
• Assignments that store values in variables
• Function calls that run reusable code
• Control flow statements like if/else, loops, and 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.

Tip: 5 + 3 is an expression because it produces a value. console.log(5 + 3); is a statement because it instructs JavaScript to perform an action.

A single-line statement is an instruction 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 instruction 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 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?