If in JavaScript

In programming, conditional statements are used to decide about the execution of the code based on various conditions given in the input data.

In every programming language we have at least several types of conditional statements.

JavaScript provides the following conditional statements:

• if
• if ... else
• if ... else if
• switch

There are three forms of if statements in JavaScript. All if statements in JavaScript are executed from top to bottom.

If statement

The if statement is the simplest conditional statement and the most commonly used statement in JavaScript. Used to decide if a specific code will be executed or not.

if (condition) {
    // the block of code to be executed when the condition is true
}

JavaScript executes the expression in parentheses. The condition is converted to true or false. If the specified condition is met, then the instruction block is executed.

if (hour > 19) {
    console.log('Good evening');
}

If the statement consists of only one line of code to be executed, curly braces can be omitted, however if the statement consists of multiple lines of code, curly braces are required.

if (hour > 19) 
    console.log('Good evening');

If you don't use curly brackets after the if statement condition, then JavaScript will consider that the statement placed immediately after it belongs to the if statement.

In general, it is always good practice to use braces. This helps to improve the readability of the code and avoids many misunderstandings.

If statements in JavaScript can be nested:

var discount = 5;
if (isMember) {
    discount = 20;
    if (hasDiscountCode) {
        discount = 30;
    }
}

If...else statement

The if ... else statement is another form of the if statement. Allows you to decide to execute two blocks of code based on one condition.

if (condition) { 
    // the block of code to be executed when the condition is true
} else { 
    // the block of code to be executed when the condition is false
}

The if ... else statement executes the statement if the specified condition is true, but if the condition is false it will execute another statement.

if (hour > 19) {
    console.log('Good evening');
} else {
    console.log('Good morning');
}

if ... else if statement

The if ... else if statement is another form of conditional statement that lets you execute statements based on several conditions.

if (condition1) {
    // the block of code to be executed when the condition1 is true
} else if (condition2) {
    // the block of code to be executed when the condition2 is true
} else {
    // the block of code to be executed when the condition1 and condition2 are false
}

If one of the conditions of the if statement is true, the statement associated with that if is executed and the rest of the conditions are ignored. However, if the first condition is not true, the next condition is checked. If none of the conditions are met, the last else statement will be executed.

if (hour< 19) {
    console.log('Good morning');
} else if (hour <= 24) {
	console.log('Good evening');
} else {
    console.log('Wrong hour');
}

If we create many if ... else if statements, the code will be difficult to read and difficult to maintain. In this situation, we should use the switch statement.

Conditional operator

When creating conditional statements in JavaScript, we can use a conditional operator, also called a three-argument or three-element operator, because it accepts three operands. The conditional operator is a shorter version of the if ... else statement.

var result = condition ? expression1 : expression2;

The conditional operator works the same as if statement in JavaScript - the condition is an expression that returns true or false. If the condition is true, the operator returns expression1, otherwise it returns expression2.

Conditional statements can be used with or without parentheses.

var fee = (isMember) ? 20 : 5;

If the conditional operator returns only logical values, true and false:

var isAdult = age >= 18 ? true : false;

we can replace it with its short version:

var isAdult = age >= 18;

In addition, we are not limited to using only one conditional operator. We can use several conditional operators at the same time:

var discount = isMember ? 20 :  hasDiscountCode ? 15 : 5; 

Instruction condition

The value that we pass to the if statement in JavaScript must be either a boolean value or it will be changed to a boolean value (true or false).

When writing conditional statements, we can use different comparison methods. However, comparison operators should be used with caution.

The comparison operator and strict comparison operator are different. The strict comparison operator (===) checks that both the values and the data types are the same.

console.log(1 === '1'); // false

When using the comparison operator (==), if the compared values are of a different type, the values are converted to the same data type and only then the values are compared.

console.log(1 == '1'); // true

When checking only one value, it's worth knowing which values are converted to false - null, undefined, 0, -0, '', NaN. Any other value is converted to true.

if (1) {
    console.log('The value is truthy');
}
if (0) {
    console.log('The value is falsy');
}

Summary

• conditional statements are used to decide about the execution of the code based on specific conditions
• In JavaScript, we have several conditional statements:
  • if - if the specified condition is met, it executes the block of code
  • if ... else - executes the block of code if the condition is met, otherwise it executes another block of code
  • if ... else if - allows the different blocks of code to be executed based on several conditions
  • switch
• curly braces can be omitted if the if statement consists of only one line of code, although it is good practice to use curly braces
• if conditional statements in JavaScript can be nested
• conditional operator is an shortened form of the if ... else conditional statement
• we can use sequences of conditional operators
• if conditional statements in JavaScript convert the condition to a boolean value
• the comparison operator converts the values to the same type and then makes the comparison
• the strict comparison operator compares data values and types
• values that are converted to false are null, undefined, 0, -0, '' and NaN