javascript

1.5 JavaScript Statements

Learn what JavaScript statements are, how they form instructions for your computer, and why semicolons and code blocks are important for writing clear, runnable code.

9 min read 8 sections Tutorial

In JavaScript, a **statement** is a single, complete instruction that tells the computer to do something. Think of it like a single step in a recipe. Your entire program is just a list of many statements, one after another.

1.5 JavaScript Statements

A statement is a command that JavaScript runs. Every line of code that performs an action is usually a statement. For example, declaring a variable or printing something to the screen are both statements.

JavaScript runs your code statement by statement, from top to bottom. Understanding statements is key to building any program, big or small.

What is a JavaScript Statement?

A JavaScript statement is a complete instruction that the computer can execute. It's the smallest independent unit of execution in a JavaScript program.

Instructions

Statements are like commands. They tell the computer exactly what to do, step by step.

Semicolons

Most statements end with a semicolon ; to mark where one instruction finishes and the next begins.

Code Blocks

Multiple statements can be grouped together inside curly braces {} to form a single block.

Execution Flow

JavaScript runs your program by executing each statement in order, from the top to the bottom.

What is a Statement?

Getting Started

What is a Statement?

Every time you write a line of code that does something, you are writing a statement. It's like telling your computer: "Do this!" or "Remember this value!"

Statements are the building blocks of all JavaScript programs. They can be simple, like creating a variable, or more complex, like telling your program to repeat an action.

javascriptExamples of JavaScript Statements

1// This is a variable declaration statement. It creates a variable named 'score'.
2let score = 100;
3
4// This is another variable declaration statement. It creates 'userName'.
5const userName = "Alice";
6
7// This is an expression statement. It calls the console.log function.
8console.log("Hello, " + userName + ". Your score is: " + score);
9
10// This is an if statement. It checks a condition and runs code if true.
11if (score > 90) {
12  console.log("Great job!"); // This is also an expression statement inside the if block
13}
14
15// This is a function call statement. It adds two numbers.
16let result = Math.max(10, 20); // Math.max() is a function call
17console.log("Max number is: " + result);

Statements vs. Expressions

A statement performs an action. An expression produces a value. All expressions are also statements, but not all statements are expressions.

For example, let x = 5; is a statement. 5 + 3 is an expression that results in 8. When you write console.log(5 + 3);, the 5 + 3 is an expression, and console.log(...) is an expression statement.

Semicolons and Code Execution

Most JavaScript statements end with a semicolon ;. This semicolon tells the JavaScript engine that one instruction has finished and the next one is about to begin. It's like the period at the end of a sentence.

JavaScript has something called Automatic Semicolon Insertion (ASI). This means it often tries to add semicolons for you if you forget them. However, relying on ASI can sometimes lead to unexpected behavior and bugs. It is always best practice to add semicolons yourself.

javascriptSemicolons: Important for Clarity

1// Statement 1: Declare a variable
2let firstName = "John";
3
4// Statement 2: Declare another variable
5let lastName = "Doe";
6
7// Statement 3: Print a message to the console
8console.log(firstName + " " + lastName);
9
10// Without semicolons, JavaScript might guess where they go.
11// This often works, but can cause problems in complex code.
12let city = "New York"
13let country = "USA"
14console.log(city + ", " + country)
15
16// Always use semicolons for clarity and to avoid unexpected errors.

✗ BadBad Practice (Missing Semicolons)

let a = 10
let b = 20
const sum = a + b
console.log(sum)

✓ GoodGood Practice (With Semicolons)

let a = 10;
let b = 20;
const sum = a + b;
console.log(sum);

Block Statements vs. Single Statements

Some statements are just one line long, like let x = 5;. These are called single statements. Other times, you need to group several statements together to act as one unit. This is where block statements come in.

A block statement is a collection of zero or more statements enclosed in curly braces {}. You will see block statements with if conditions, for loops, while loops, and function definitions. They help organize your code and define its structure.

Single Statement

Block Statement

Single Statement

let age = 15;

// If the condition is true, only the next single statement runs.
if (age >= 18)
  console.log("You are an adult."); // Only this line is part of the if

console.log("Program continues."); // This line always runs

Block Statement

let age = 20;

// If the condition is true, all statements inside the curly braces run.
if (age >= 18) {
  console.log("You are an adult.");
  console.log("You can vote."); // Both lines are part of the if
}

console.log("Program continues.");

let age = 15;

// If the condition is true, only the next single statement runs.
if (age >= 18)
  console.log("You are an adult."); // Only this line is part of the if

console.log("Program continues."); // This line always runs

let age = 20;

// If the condition is true, all statements inside the curly braces run.
if (age >= 18) {
  console.log("You are an adult.");
  console.log("You can vote."); // Both lines are part of the if
}

console.log("Program continues.");

Always use curly braces for if, for, while

Even if your if statement or loop only has one line of code, it's a very good habit to always use curly braces {}. This makes your code clearer and prevents accidental bugs if you add more lines later. It makes your code easier to read for others, and for your future self!

Writing Clear and Organized Statements

Well-written statements make your code easy to understand and maintain. Each statement should have a clear purpose. Grouping related statements into blocks and using proper indentation helps show the structure of your program.

Think of each statement as a building block. You combine many blocks to create a whole building. If your blocks are messy or unclear, the whole building will be hard to understand.

Declare variables

Start by declaring any variables you need. Use const for values that won't change and let for values that will. Each declaration is a statement.

javascriptDeclare variables

1const userName = "Jane";
2let messageCount = 0;

Perform calculations or logic

Use expression statements to update variables or make decisions. For example, increment a counter or check a condition.

javascriptPerform calculations or logic

1messageCount = messageCount + 1; // Update count
2
3if (messageCount > 0) {         // Conditional logic
4  console.log("You have new messages!");
5}

Output results

Finally, use statements like console.log() to show information to the user or for debugging purposes. This is how your program communicates.

javascriptOutput results

1console.log(`Hello, ${userName}!`);
2console.log(`You have ${messageCount} unread messages.`);

Avoid overly complex single statements

While you can write very long, complex statements, it makes your code hard to read and debug. Break down complex tasks into multiple, simpler statements. Each statement should ideally do one thing clearly.

Common Types of JavaScript Statements

Statement Type	Purpose	Example
Declaration	Create variables, functions, or classes.	`let x = 10;` or `function greet() {}`
Expression	Evaluate an expression and often assign its result.	`x = y + z;` or `console.log('hi');`
Control Flow	Control the order in which code is executed.	`if (condition) {}` or `for (;;) {}`
Iteration	Repeat a block of code multiple times.	`while (condition) {}` or `for (item of list) {}`

Test Your Knowledge

Quick Check

Which of the following best describes a JavaScript statement?

Quick Check

What is the primary purpose of a semicolon (;) at the end of a JavaScript statement?

Quick Check

What do curly braces {} typically define in the context of statements?

Quick Check

Consider the code: let x = 5; console.log(x);. How many statements are there?

Quick Reference

Pro Tips

1Statement — a single, complete instruction for the computer to execute.
2Program Flow — JavaScript executes statements one by one, from top to bottom.
3Semicolons (;) — used to mark the end of most statements. It is best practice to always include them.
4Automatic Semicolon Insertion (ASI) — JavaScript tries to add missing semicolons, but relying on it can cause bugs.
5Expression Statement — a statement that evaluates an expression and performs an action, like console.log('Hi');
6Declaration Statement — creates a variable, function, or class, like let count = 0;
7Control Flow Statement — changes the order of execution, like if, for, while.
8Block Statement ({}) — groups multiple statements together to be executed as a single unit.
9Readability — use one statement per line and consistent semicolons for clear, easy-to-read code.
10One Action — ideally, each statement should perform a single, clear action to avoid complexity.

Variables

Learn how to store values using variables, which are often declared with statements.

Control Flow

Explore if/else, for, and while statements to control your program's logic.

Functions

Understand how to define and call functions, which are themselves a type of statement.

Expressions

Dive deeper into expressions and how they differ from and interact with statements.

You now understand JavaScript Statements!

You've learned that statements are the fundamental instructions in JavaScript, how semicolons define their boundaries, and how block statements group instructions. This knowledge is crucial for writing any functional JavaScript code.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next