The need for expressions in Javascript

So far, we have been coding simple components:

1. Modal
2. Accordion
3. Off-canvas menu

While coding each of those components, we followed a simple execution pattern.

That is, "if the button is clicked, then do something".

For example, for the modal, if the button is clicked, we reveal the modal.

But sometimes, if something is clicked, we must check for a particular condition before doing something.

For example, let's say we are coding the functionality of YouTube's subscribe/unsubscribe button.

If the button is clicked:

1. First, we need to check(evaluate) if the button's text is "Subscribe" or "Unsubscribe".
2. If it is "Subscribe", we need to change the button text to "Unsubscribe".
3. Else, If it is "Unsubscribe", we need to change the button text to "Subscribe".

Similarly, let's just say we are enhancing a login form with the "Show/Hide Password" functionality.

If the "Show password" field is clicked:

1. First, we need to check(evaluate) if the "Show password" field is currently checked (turned on) or unchecked (turned off).
2. If it is currently checked, we need to reveal the password.
3. Else, if it is unchecked, we need to hide the password.

In both cases, first, we need to check if a particular condition is met or not before doing something.

Now comes the important question.

How do we check for a particular condition in Javascript?

The answer is simple.

We have to use the following building blocks:

1. Boolean Expressions
2. Conditional Statements

Boolean expressions will help us check for a condition

And Conditional Statements will help us do something when the condition is met.

We need to use both of them together to achieve our desired result.

But before we understand them, we need to understand two essential concepts of javascript:

1. Expressions
2. Statements

And this lesson is all about understanding expressions.

So, what is an Expression?

In JavaScript, An Expression is a valid unit of code that produces a value.

At the end of the day, a new value is born when a Javascript Expression is executed.

From the beginning of this course, unknowingly, we have written a lot of Expressions.

For example, we now got habituated to selecting HTML elements using document.querySelector() method.

The document.querySelector() method is nothing but an expression because it produces a javascript object that represents an HTML element.

For example, let's say there is an <img> element that outputs the Google logo:

<img src="images/google-logo.png" alt="Google Logo" />

And we are selecting that <img> element using document.querySelector method:

document.querySelector(".card img");

When the above expression is executed, it produces a javascript object that represents an <img> element:

{
    alt: "Google Logo",
    src: "https:/minilessons.io/images/google-logo.png", 
    naturalHeight: 866,
    naturalWidth: 2560,
    parentElement: div.card,
    tagName: "IMG",   
}

Another follow-up example:

let imageElement = {
    alt: "Google Logo",
    src: "https:/minilessons.io/images/google-logo.png", 
    naturalHeight: 866,
    naturalWidth: 2560,
    parentElement: div.card,
    tagName: "IMG",   
}

imageElement.alt; 
//Output: "Google Logo"

In the above code, when the expression imageElement.alt is executed, it produces a value of "Google Logo".

Expressions can contain operators.

In the above examples, the expressions were solo performers.

They are producing some value on their own when they are executed.

But there are other types of expressions that are not solo performers.

Depending on the type of expression, they take the help of an operator to produce a value.

Mathematical expressions

A mathematical expression produces a mathematical value.

Here is an example of a mathematical expression:

2 + 2;
// Output: 4

Come on, open up a new tab in the browser, and inside the console, type 2 + 2:

Did you see that?

When the expression 2 + 2 is executed, an addition operation is performed, and it produces a value of 4.

If you notice, the expression 2 + 2 is taking the help of the plus + operator to perform the addition.

In other words, we can not write mathematical expressions without mathematical operators.

Javascript performs the addition operation only when it sees an expression that contains a plus + operator.

Here is the full list of mathematical operators we can use for mathematical expressions.

But currently, what we are most interested in are boolean expressions, right?

Boolean expressions

A boolean expression is a valid unit of code that could resolve to only two values:

1. true
2. false

2 === 3; //Resolves to: false
10 > 5; //Resolves to: true

Come on, try them out in the console:

When the expression 2 === 3 is executed:

1. Javascript compares whether the number 2 is equal to 3.
2. And because 2 is not equal to 3, the expression 2 === 3 resolves to a boolean value of false.

Similarly, when the expression 10 > 5 is executed:

1. Javascript evaluates whether the number 10 is greater than 5.
2. And because 10 is greater than 5, the expression10 > 5 resolves to a boolean value of true.

If you notice, when we code boolean expressions, we usually use comparison operators like ===, >, <, etc.

Comparison operators are extremely useful if we want to produce a value of true or false in any situation.

Here is the full list of comparison operators we can use for boolean expressions:

That's all you need to know about boolean expressions for now.

In the next lesson, we will learn how expressions can contain other expressions.