Conditional logic

Conditionals are used to perform different actions based on different conditions.

Summary:

Conditional logic in JavaScript allows us to execute code based on whether a condition is met or not. We can use if statements or ternary operators to compare variables or values, and execute code accordingly. We can also use comparison and logical operators to evaluate conditions. In Wized, we can use conditional logic to redirect users based on their status or response to a request.

Operators cheat sheet:

Comparison Operators:

• > Greater Than
• < Less Than
• >= Greater than or Equal to
• <= Less than or Equal to
• == Equal to
• === Strict Equal to
• != Not Equal to
• !== Strict Not Equal to

Logical Operators:

• && Logical AND
• || Logical OR
• ! Logical NOT

Grasping If Statements in Wized

For something to happen, something needs to meet a condition.

We can compare this in code using if statements or ternary operators.

An if statement looks like this:

//We are declaring a variable x and setting it to always be true
const x = true;

//We evaluate the value of x to be either true or false, if x is true the code will be executed
if (x) {
  return 'x is true';
}

In the snippet above the block of code will only be executed if and only if the variable x is set to a truthy value. Below we can see that x is set to false, which means the code block will never be executed.

//We are now declaring the variable x and setting it to be always false
const x = false;

//We evaluate the value of x to be either true or false, if x is true the code will be executed
if (x) {
  return 'this line will never execute';
}

We are not limited to working with truthy values, we need a condition to be met and this condition can be whatever we want but it needs to evaluate to true for the code to execute.

//We are now declaring the value of x and setting it to always be false
const x = false;

//We will now evaluate the value of x, this value is modified by the '!' operator which is a logical NOT
if (!x) {
  return 'x is not true';
}

In this example, the block of code will be executed if and only if the variable x is set to a falsy value, because of the ! operator which negates the truthiness of the value. Read more about the ! operator here.

The Power of If-Else Statements

We can also compare variables and execute code depending on the outcome with an if-else statement

//We are now declaring the variable age to be set to always be 18
const age = 18;

//We will now evaluate the value of x, if the value is set to anything greater than or equal to 18 the code on the first block will be executed if the expression evaluates to false the code in the second block, the else block, will be executed

if (age >= 18) {
  //This will only be executed when the age variable is set to 18 or higher
  return 'You are eligible to vote';
} else {
  //This will execute in case our age variable is lower than 18
  return 'You are not yet eligible to vote';
}

In this example, the code inside the if block will be executed if the age is greater than or equal to 18, and the code inside the else block will be executed if the age is less than 18. We can even check for multiple conditions by using the else if keyword like so:

if (age >= 18) {
  //This will only be executed when the age variable is set to 18 or higher
  return 'You are eligible to vote';
} else if (age >= 16) {
  //This will execute in case our age variable is between 16, and 18.
  return 'You are not yet eligible to vote, but soon, you will be';
} else {
  //This will execute in case our age variable is lower than 16
  return "You are not yet eligible to vote, and you won't be for quite a while";
}

Understanding the '===' Operator

Javascript can also take into account the type of variables using the === operator to make a strict match, we can use this in Wized to condition actions according to our request’s response.

On the setup above, the user will only be redirected to their homepage only and only if the status code is a number and this number is 200.

Ternary Operators

In Javascript we can also use ternary operators to compare two values, this operator looks like this:

//This is an example of a ternary operator, another. way to write an if-else statement
condition ? expression1 : expression2;

If the condition is true, expression1 is evaluated and returned. If the condition is false, expression2 is evaluated and returned. For example:

//We are declaring our variable age to always be set to 18
const age = 18;

//We are now declaring a variable named status, this will get its value from the result of the ternary operator, if the operator evaluates to 'true' the status will be set to "adult" else it will be set to "minor"

const status = age >= 18 ? 'adult' : 'minor';
return status;

In this example, if age is greater than or equal to 18, the string "adult" will be assigned to the variable status. Otherwise, the string "minor" will be assigned to the variable status.

Referencing the video above we can use ternary operators inside our project to decide which page to show based on our user’s status

//We will evaluate the value of our request's response to 'is_admin', for users to
//be able to see the '/only-admins-can-see-this-page' the response needs to be a
//string and the string needs to be 'yes'.  Only if these two conditions are met
//the user will be redirected to the admin page

{{
r.1.$.is_admin === 'yes' ?
'/only-admins-can-see-this-page':
'/users-and-admins-can-see-this'
}}

Conclusion

In a nutshell, conditional logic helps us control our web app based on certain rules. This includes 'if' statements, 'if-else' statements, and ternary operators.

This is one of the basic building blocks in programming, which can help you build some advanced logic for your web app.

So if you feel like you mastered this lesson, head over to the next one. Else, spend some more time familiarizing yourself with this important concept.