Sign in Subscribe
Expressions

Understanding statements in Javascript

Understanding statements in Javascript

So, what is a statement in Javascript?

A JavaScript program is a sequence of statements, and each statement is an instruction that tells the computer what to do.

Here are some examples of statements in javascript.

Variable assignment statement

const pi = 3.14159265359;

In the above statement, we are instructing the computer to create a variable called pi and store a value of 3.14159265359 in it.

Function declaration statement

function showModal(){
    let discountModal = document.querySelector("#surprise-discount-modal");
    discountModal.style.display = "block";
}

This statement is instructing the computer to declare a function called showModal.

If/Else statement

if(showPasswordField.checked){
    passwordField.type = "text";
} 
else {
    passwordField.type = "password";
}

In the above "If/else statement":

  1. If the "Show password" field is checked, we are instructing the computer to reveal the password.
  2. Else, we are telling it to hide the password.

Oops, spoiler for an upcoming lesson :D

Anyway, at the beginning of this lesson, I told you that a Javascript program is a sequence of statements, right?

/* Functionality for revealing the modal */
function showModal(){

    console.log("Show modal button is clicked!");

    //Step 1: Select the Discount Modal element
    let discountModal = document.querySelector("#surprise-discount-modal");

    //Step 2: Change the display property of the element to "block"
    discountModal.style.display = "block";
}

//Step 1: Select the "Unlock your surprise" button
let showModalButton = document.querySelector(".show-modal-btn");

//Step 2: Attach the event listerner to it 
showModalButton.addEventListener("click", showModal);

You already know what's happening here.

The above javascript program is nothing but a sequence of statements that instructs the computer to reveal the modal when the button is clicked.

Basically, in the above program, except for the comments, every other line of code is a statement.

💡
Javascript doesn't execute comments, so comments are not statements.

An expression is always part of a statement

As I said during the last lesson, an expression is never on its own.

In fact, statements will have slots for expressions and we can put any expression in those slots.

And the location of the slot will vary based on the type of statement.

Variable assignment statement

let variableName = /* slot for the expression */;

For example, when it comes to a variable assignment statement, the slot for the expression is after the assignment operator =.

let showModalButton = document.querySelector(".show-modal-btn");

Function declaration statements

When it comes to functions, expressions go inside the body of the function.

function showModal(){
    /* Expressions go here */
}

For some statements, it is mandatory to have at least one expression

if(/* Mandory expression goes here */){
   //Statements goes here
} else {
    //Statements goes here
}

For example, for conditional statements such as an If/Else statement, it is mandatory that you provide at least one expression.

Otherwise, javascript will throw a syntax error.

You will understand the reason behind this when we learn about If/Else statements in the next lesson.

Read next