JavaScript Statements

by

JavaScript statements are the instructions that tell a JavaScript program what to do. Just as a sentence in a human language communicates an idea, a JavaScript statement communicates an action or operation that the browser or JavaScript engine needs to perform. When you write JavaScript code, you usually combine multiple statements to create a complete program that can process data, make decisions, repeat tasks, respond to user actions, and modify the content of a web page.

Understanding JavaScript statements is one of the most important steps for beginners because almost every JavaScript program is built by combining statements in a logical order. Once you understand how statements work, you can move more comfortably into variables, operators, conditional statements, loops, functions, arrays, objects, and DOM manipulation.

In this tutorial, you will learn what JavaScript statements are, how statements are written, how semicolons work, how multiple statements are executed, and how different types of JavaScript statements are used in real web development.

What Are JavaScript Statements?

A JavaScript statement is an instruction that JavaScript can execute. A program can contain one statement or many statements, depending on what the program needs to accomplish.

For example:

let name = "John";

This statement creates a variable named name and stores the value "John" in it.

Another example is:

console.log("Hello, World!");

This statement tells JavaScript to display "Hello, World!" in the browser’s developer console.

A more practical example might contain several statements:

let name = "John";
let age = 25;

console.log(name);
console.log(age);

Here, JavaScript executes the statements in sequence. The first statement creates the name variable, the second creates the age variable, and the remaining statements display their values.

JavaScript Statements and Expressions

Beginners often confuse statements with expressions because both appear frequently in JavaScript code. Although they are related, they have different purposes.

An expression is JavaScript code that produces a value, while a statement is an instruction that performs an action or controls how the program operates.

For example:

5 + 10

This is an expression because it produces the value 15.

When you write:

let total = 5 + 10;

the complete line is a statement, while 5 + 10 is an expression used inside that statement.

Another example is:

age > 18

This expression produces either true or false.

It can be used inside a statement such as:

if (age > 18) {
    console.log("You are an adult.");
}

Understanding this difference becomes particularly useful when you start learning conditional statements, functions, and more advanced JavaScript concepts.

How JavaScript Executes Statements

JavaScript generally executes statements from top to bottom in the order in which they appear. However, certain statements can change this normal flow by making decisions, repeating instructions, or calling functions.

Consider this example:

let name = "John";
console.log("Hello " + name);
console.log("Welcome to Web4Learners!");

JavaScript first creates the name variable, then prints the greeting, and finally prints the welcome message.

The order matters because later statements can depend on values created by earlier statements.

For example:

let price = 100;
let quantity = 3;
let total = price * quantity;

console.log(total);

JavaScript needs to create price and quantity before calculating total.

The output is:

300

This sequential execution model is one of the basic concepts you should understand before moving into more complex JavaScript programs.

Semicolons in JavaScript Statements

A semicolon ; can be used to mark the end of a JavaScript statement.

For example:

let name = "John";
let age = 25;
console.log(name);
console.log(age);

Each statement ends with a semicolon.

JavaScript also has a feature called Automatic Semicolon Insertion, commonly abbreviated as ASI. Because of ASI, JavaScript can sometimes understand where a statement ends even when you do not explicitly write a semicolon.

For example:

let name = "John"
let age = 25

console.log(name)
console.log(age)

This can work correctly in JavaScript.

However, many developers prefer using semicolons consistently because they make the structure of the code clearer and can help avoid certain edge cases.

For beginners, the important thing is to understand that semicolons are commonly used at the end of JavaScript statements, even though JavaScript can automatically insert them in many situations.

Image Placement

Add a visual comparison here showing the same JavaScript code written with semicolons and without semicolons.

Alt text: JavaScript statements with semicolons and without semicolons comparison

Writing Multiple JavaScript Statements

A JavaScript program normally contains multiple statements that work together to accomplish a task.

For example:

let firstName = "John";
let lastName = "Smith";

let fullName = firstName + " " + lastName;

console.log(fullName);

These statements work together to create a complete operation.

The first two statements store the first and last names. The third statement combines them into a complete name, and the final statement displays the result.

The output is:

John Smith

This demonstrates why statements are important. A useful JavaScript application rarely consists of only one instruction. Instead, many statements work together to create the desired behavior.

JavaScript Statements Inside HTML

JavaScript is commonly added to an HTML document using the <script> element.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Statements</title>
</head>
<body>

    <h1>JavaScript Example</h1>

    <script>
        let name = "John";
        console.log(name);
    </script>

</body>
</html>

The JavaScript statements are written inside the <script> element.

When the browser loads the HTML document, it processes the JavaScript code and executes the statements according to their position and the rules of the JavaScript language.

Types of JavaScript Statements

JavaScript provides many different types of statements, and each type has a specific purpose. Some statements create variables, some control program flow, some repeat instructions, and others are used to define or control functions.

The following table provides a quick overview.

Statement TypeCommon ExamplesPurpose
Variable Statementslet, const, varCreate variables
Expression Statementsx = 10;Evaluate an expression
Conditional Statementsif, else, switchMake decisions
Loop Statementsfor, while, do...whileRepeat code
Function StatementsfunctionDefine reusable functions
Jump Statementsbreak, continueChange loop execution
Return StatementreturnReturn a value from a function
Block Statements{ }Group multiple statements
Exception Statementstry, catch, throwHandle errors
Debugging StatementsdebuggerPause code during debugging

You do not need to memorize all of these statements immediately. It is more useful to understand what each category does and learn them naturally as you build JavaScript programs.

Variable Statements

Variable statements are used to create variables that store data.

Modern JavaScript primarily uses let and const.

For example:

let name = "Alice";
const age = 25;

The let statement creates a variable whose value can later be changed:

let score = 50;

score = 75;

console.log(score);

The output is:

75

The const statement creates a variable that cannot be reassigned:

const country = "India";

console.log(country);

Trying to reassign it will result in an error:

const country = "India";

country = "USA";

For new JavaScript code, let and const are generally preferred over var because they provide clearer block-scoped behavior.

Expression Statements

An expression can also be used as a statement when JavaScript evaluates it for its effect.

For example:

let x = 10;

x = x + 5;

console.log(x);

The statement:

x = x + 5;

changes the value stored in x.

Another example is:

console.log("Hello");

Here, the function call is being used as a statement to produce an observable effect.

Conditional Statements

Conditional statements allow JavaScript to make decisions based on conditions.

The most common conditional statement is if.

let age = 20;

if (age >= 18) {
    console.log("You can access this content.");
}

JavaScript checks whether the condition age >= 18 is true. If it is true, the code inside the block is executed.

You can also use else:

let age = 16;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are under 18.");
}

Conditional statements are extremely useful when building interactive websites because applications often need to respond differently depending on the user’s actions or the data being processed.

Switch Statements

The switch statement is useful when you need to compare one value against several possible cases.

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of the week");
        break;

    case "Friday":
        console.log("End of the working week");
        break;

    default:
        console.log("Another day");
}

The switch statement checks the value of day and executes the matching case.

The break statement prevents JavaScript from continuing into the following cases.

Loop Statements

Loop statements allow JavaScript to execute the same section of code repeatedly.

The for loop is one of the most commonly used loops.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

The output is:

1
2
3
4
5

The loop creates the variable i, checks the condition, executes the block, and then updates i.

Another common loop is the while loop:

let count = 1;

while (count <= 5) {
    console.log(count);
    count++;
}

Loops are particularly useful for processing arrays, generating repeated HTML elements, displaying lists, and performing repetitive calculations.

Image Placement

Add an image here showing a for loop visually progressing from 1 to 5, with the loop condition and increment highlighted.

Alt text: JavaScript for loop statement execution from one to five

Function Statements

Functions allow you to organize JavaScript statements into reusable blocks of code.

For example:

function greet() {
    console.log("Hello, Web4Learners!");
}

The function can then be called:

greet();

The function contains a statement:

console.log("Hello, Web4Learners!");

Functions become especially important as JavaScript applications become larger because they allow related instructions to be organized into reusable pieces.

A function can also accept parameters:

function greet(name) {
    console.log("Hello, " + name);
}

greet("John");

The output is:

Hello, John

Block Statements

A block statement groups multiple JavaScript statements together using curly braces { }.

For example:

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

The two console.log() statements belong to the same block.

Blocks are commonly used with if, else, loops, functions, and other JavaScript structures.

Understanding blocks is particularly important because modern JavaScript uses block scope with let and const.

Break Statements

The break statement stops a loop or exits a switch statement.

For example:

for (let i = 1; i <= 10; i++) {

    if (i === 5) {
        break;
    }

    console.log(i);
}

The loop stops when i reaches 5.

The output is:

1
2
3
4

This can be useful when you want to stop searching or processing data after a particular condition has been reached.

Continue Statements

The continue statement skips the current iteration of a loop and moves to the next iteration.

For example:

for (let i = 1; i <= 5; i++) {

    if (i === 3) {
        continue;
    }

    console.log(i);
}

The output is:

1
2
4
5

The number 3 is skipped because continue tells JavaScript to move directly to the next iteration.

Return Statements

The return statement is commonly used inside functions to send a value back to the code that called the function.

function add(a, b) {
    return a + b;
}

let result = add(10, 20);

console.log(result);

The output is:

30

The function calculates a + b and returns the result to the statement that called it.

Return statements are fundamental to writing reusable JavaScript functions because they allow functions to calculate or process something and provide the result to another part of the application.

Try, Catch, and Throw Statements

JavaScript provides statements for handling errors that can occur while a program is running.

For example:

try {
    let result = unknownVariable;
    console.log(result);
} catch (error) {
    console.log("An error occurred.");
}

If JavaScript encounters an error inside the try block, execution can move to the catch block.

You can also use throw to create your own error:

let age = 15;

if (age < 18) {
    throw new Error("Age must be 18 or older.");
}

Error handling becomes increasingly important when working with APIs, forms, databases, authentication, and other applications where unexpected situations can occur.

Comments in JavaScript

Comments are not executed as JavaScript statements. Instead, they allow developers to add explanations or notes to their code.

A single-line comment starts with //:

// Store the user's name
let name = "John";

A multi-line comment can be written using /* */:

/*
    This code calculates
    the total price.
*/

let price = 100;
let quantity = 2;
let total = price * quantity;

Comments can make code easier to understand, especially when working on larger projects or collaborating with other developers.

JavaScript Statements Example

The following example combines several types of statements into a small JavaScript program:

let name = "John";
let age = 25;

function checkAge(userAge) {

    if (userAge >= 18) {
        return "You are an adult.";
    } else {
        return "You are under 18.";
    }
}

let message = checkAge(age);

console.log("Name:", name);
console.log("Age:", age);
console.log(message);

This example contains variable declarations, a function statement, a conditional statement, return statements, a function call, and console output.

The program demonstrates how different JavaScript statements can work together to solve a simple problem.

JavaScript Statements in a Real Web Page

JavaScript statements become much more useful when they interact with HTML elements.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Statements Example</title>
</head>
<body>

    <h1 id="heading">Welcome</h1>

    <button onclick="changeHeading()">Click Me</button>

    <script>
        function changeHeading() {
            let heading = document.getElementById("heading");

            heading.textContent = "Hello from JavaScript!";
        }
    </script>

</body>
</html>

In this example, several JavaScript statements work together.

The function creates a reusable block of code. The document.getElementById() statement accesses the heading element, and the textContent assignment changes the text displayed on the page.

When the user clicks the button, JavaScript executes the function and changes the heading.

Common Mistakes When Writing JavaScript Statements

Beginners often encounter errors because of small syntax or logical mistakes. Understanding these common problems can make debugging much easier.

Forgetting Quotes Around Text

Incorrect:

let name = John;

Correct:

let name = "John";

Text values need to be represented as strings using quotes.

Using an Undefined Variable

For example:

console.log(username);

If username has not been declared, JavaScript can produce a ReferenceError.

A variable should be declared before it is used:

let username = "John";

console.log(username);

Incorrect Curly Braces

Conditional statements and loops use curly braces to group statements.

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

Missing or incorrectly placed braces can cause syntax errors or unexpected behavior.

Confusing Assignment and Comparison

The = operator assigns a value:

let age = 20;

The === operator checks whether two values are strictly equal:

if (age === 20) {
    console.log("Age is 20");
}

Understanding the difference between assignment and comparison is essential when writing conditional statements.

JavaScript Statements Best Practices

Writing JavaScript that works is important, but writing JavaScript that remains understandable and maintainable is equally valuable.

Use meaningful variable names so that another developer can understand what the code represents.

Instead of:

let x = 500;

prefer:

let productPrice = 500;

Keep related statements organized together and use indentation consistently, particularly when working with nested conditions, loops, and functions.

For modern JavaScript development, prefer let and const for variable declarations rather than using var unless you specifically need the behavior provided by var.

You should also avoid putting too many unrelated operations into a single function. Breaking larger programs into smaller functions makes the code easier to understand, test, and maintain.

Why JavaScript Statements Are Important

JavaScript statements form the foundation of JavaScript programming because they provide the instructions that control what an application does. Whether you are creating a simple button interaction or developing a large web application, your JavaScript code ultimately depends on statements that create data, process information, make decisions, repeat operations, call functions, handle errors, and interact with web page elements.

Once you understand statements, you will have a much easier time learning the more advanced parts of JavaScript because many advanced features are built by combining the same fundamental concepts in more powerful ways.

JavaScript Statements vs Other Programming Languages

Most programming languages use statements to tell a computer what to do, but the syntax differs between languages.

FeatureJavaScriptPythonJava
Variable declarationlet x = 10;x = 10int x = 10;
Conditionalif (x > 5)if x > 5:if (x > 5)
Loopforforfor
Functionfunction test() {}def test():void test() {}
Common statement ending;New line;

The underlying idea is similar across languages, but each programming language has its own syntax and rules.

JavaScript Statements Quick Reference

StatementMain PurposeExample
letDeclare a variablelet age = 20;
constDeclare a constantconst pi = 3.14;
ifCheck a conditionif (age >= 18) {}
elseRun alternative codeelse {}
switchCompare multiple casesswitch(day) {}
forRepeat codefor (...) {}
whileRepeat while condition is truewhile (...) {}
breakStop a loopbreak;
continueSkip an iterationcontinue;
functionCreate a functionfunction greet() {}
returnReturn a valuereturn total;
tryTest code for errorstry {}
catchHandle an errorcatch (error) {}
throwCreate an errorthrow new Error();

Frequently Asked Questions About JavaScript Statements

What is a statement in JavaScript?

A JavaScript statement is an instruction that tells the JavaScript engine to perform an action, such as creating a variable, calling a function, making a decision, repeating code, or changing a value.

Do JavaScript statements require semicolons?

Semicolons are commonly used to terminate JavaScript statements, but JavaScript also provides Automatic Semicolon Insertion, which allows many statements to work without explicitly writing semicolons.

What is the difference between a JavaScript statement and an expression?

An expression produces a value, while a statement represents an instruction or action performed by the program. Expressions are frequently used inside statements.

What are the most common JavaScript statements?

Common JavaScript statements include let, const, if, else, switch, for, while, function, return, break, continue, try, catch, and throw.

Can a JavaScript program contain multiple statements?

Yes. Most JavaScript programs contain many statements that are executed in an order determined by the program’s control flow.

Where can JavaScript statements be written?

JavaScript statements can be written inside an HTML <script> element, in an external .js file, or in environments such as browser developer tools and JavaScript runtimes.

Practice Example

Try creating a simple JavaScript program that checks whether a number is positive, negative, or zero.

let number = 10;

if (number > 0) {
    console.log("The number is positive.");
} else if (number < 0) {
    console.log("The number is negative.");
} else {
    console.log("The number is zero.");
}

Change the value of number and run the program again to see how the output changes.

This small exercise combines variable declaration, comparison expressions, conditional statements, and console output, making it a useful beginner exercise for understanding how JavaScript statements work together.

Image Placement

Add a beginner practice visual here showing the code on one side and three possible outputs: positive, negative, and zero, on the other side.

Alt text: JavaScript conditional statement practice example for positive negative and zero numbers

What to Learn After JavaScript Statements

After understanding JavaScript statements, the next concepts to learn should build naturally on this foundation. A good learning path includes:

  • JavaScript Variables
  • JavaScript Data Types
  • JavaScript Operators
  • JavaScript Conditional Statements
  • JavaScript Loops
  • JavaScript Functions
  • JavaScript Arrays
  • JavaScript Objects
  • JavaScript Strings
  • JavaScript Events
  • JavaScript DOM Manipulation
  • JavaScript Error Handling
  • JavaScript Asynchronous Programming

Leave a Comment