Conditional constructs

Conditional constructions allow you to perform certain actions depending on certain conditions.

if..else construct

The if..else construct checks some condition and if this condition is true, then performs some actions. The simplest form of the if..else construct :

if(condition){
    some action
}

The if the keyword is followed by a condition in parentheses, and after the condition is a block of code with some actions. If this condition is true, then the actions that are placed in the code block are executed.

For example:

const income = 100;
if(income > 50) {
    
    console.log("income is over 50");
}

Here, the following condition is used in the if construct: income > 50. If this condition returns true, that is, if the constant incomevalue is greater than 50, then the browser displays the message. If the value is incomeless than 50, then no message is displayed.

If the block of code contains a single statement, as in the case above, then the construction can be simplified by removing the curly braces and placing the actions immediately after the condition:

const income = 100;
if(income > 50) console.log("more income 50");

or move actions to the next line

 
const income = 100;
if(income > 50) 
    console.log("more income 50");

Moreover, the conditions can be difficult:

const income = 100;
const age = 19;
if(income > 50 && age > 18){

    console.log("more income 50");
    console.log("age more than 18");
}

Checking if a value exists

The if construct allows you to check for the existence of a value. For example:

let myVar = 89;
if(myVar){
    
    console.log(`The variable myVar has a value: ${myVar}`);
}

If the variable myVar has a value, as in this case, then in the conditional construct it will return the value true.

Opposite option:

let myVar;
if(myVar){
    console.log(`The variable myVar has a value: ${myVar}`);
}

Here the variable myVarhas no value. (In reality, it is equal to undefined) Therefore, the condition in the if construct will return false , and the actions in the if construct block will not be performed.

But often, an alternative option is used to check the value of a variable – they check for the value undefinedand null:

if (myVar !== undefined && myVar !== null) {
    console.log(`The variable myVar has a value: ${myVar}`);
}

else expression

Above, we looked at how to determine the actions that are performed if the condition after the if is true. But what if we want to also execute another set of instructions if the condition is false? In this case, you can use the else block . This block contains statements that are executed if the condition after the if is false, that is, it is equal to false :

if(condition){
    action if condition is true
}
else{
    actions if condition is false
}

That is, if the condition after the if is true, the if block is executed. If the condition is false, the else block is executed. For example:

const income = 45;
if(income > 50){

    console.log("more income 50");
}
else{
    console.log("income less than or equal to 50");
}

Here the constant income is 45, so the condition after the statement will if return false and control will jump to the block else.

Also, if the else block contains one instruction, then the construction can be shortened:

const income = 45;
if(income > 50) console.log("more income 50");
else console.log("income less than or equal to 50");

Alternative conditions and else if

With the else, if construct, we can add an alternative condition to the if block. For example, in the condition above, the value of income may be greater than a certain value, maybe less, or maybe equal to it. Let’s reflect this in the code:

const income = 50;
if(income > 50) {
    console.log("more income 50");
}
else if(income === 50){
    console.log("Income equal  50");
}
else{
    console.log("Income is less 50");
}

In this case, the else-if block will be executed. If necessary, we can use multiple else if blocks with different conditions:

const income = 500;
if(income < 200){

    console.log("Below average income");
}else if(income>=200 && income < 300){
    
    console.log("Slightly below average");
}
else if(income>=300 && income < 400){
    
    console.log("Average income");
}
else{
    console.log("Above average income");
}

true or false

In JavaScript, any variable can be used in conditional expressions, but not any variable is of type boolean. And in this regard, the question arises, what will this or that variable return – true or false? A lot depends on the data type that the variable represents:

• undefined
• returnsfalse
• null
• returnsfalse
• Boolean

If the constant/variable is false, then returns false. Accordingly, if the constant/variable is equal to true, then returnstrue

number

Returns falseif the number is 0 or NaN (Not a Number), otherwise returnstrue

For example, the following variable will return false:

let x = NaN;
if(x){  // false

}

String

Returns false if the constant/variable is equal to the empty string, i.e. its length is 0, otherwise returns true

const emptyText = "";   // false - as an empty string
const someText = "javascript";  // true - string is not empty

Object Always returnstrue
 
const user = {name:"Tom"};  // true
const car = {}; // true

Switch..case construction

The switch..case construct is an alternative to using the construct if..else and also allows you to handle multiple conditions at once:

const income = 300;
switch(income){

    case 100 : 
        console.log("Income equal to 100");
        break;
    case 200 : 
        console.log("Income equal to 200");
        break;
    case 300 : 
        console.log("Income equal to 300");
        break;
}

The switch keyword is followed by the comparison expression in parentheses. The value of this expression is sequentially compared with the values ​​placed after the case statement. And if a match is found, then a specific case block will be executed.

A break statement is placed at the end of each case block to avoid executing other blocks.

However, if necessary, you can process several conditions at once:

const income = 200;
switch(income){

    case 100 :
    case 200 :
        console.log("Income is 100 or 200");
        break;
    case 300 :
        console.log("Income is 300");
        break;
}

In this case, for the condition when income is equal to 100 and 200, the same actions are performed.

If we also want to handle the situation when no match is found, we can add an optional default block :

const income = 300;
switch(income){

    case 100 :
        console.log("Income is 100");
        break;
    case 200 :
        console.log("Income is 200");
        break;
    case 300 :
        console.log("Income is 300");
        break;
    default:
        console.log("Income of unknown value");
        break;
}