JavaScript building blocks for beginners ( conditionals)

In this article, I will introduce the key basic features of JavaScript and let us pay attention to common code block types such as conditional statements, loops, functions, and events.

Prerequisites

You should have some familiarity with basic HTML and CSS.

Making decisions to your code

In any programming language, code needs to make decisions based on different inputs and take corresponding actions.

Conditional statements allow us to express such decisions in JavaScript, from choices to be made (for example, “A or B “) to the results of those choices.

Basic if … else syntax
if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}
  • The keyword if accompanied with the aid of some parentheses.
  • The conditions to be tested are enclosed in parentheses (usually “Is this value greater than this other value?” or “Is this value present?”).
  • A set of keys with a code; this can be any code we like, and it only runs when the condition returns true.
  • The keyword else.
  • Another set of braces in which we have more code (it can be any code we like and only execute if the condition is not true), or in other words, the condition is false.

You should note that you do not have to include the other and second key block; the following is also perfectly legal code:

if (condition) {
  code to run if condition is true
}

run some other code

Nevertheless, you must be careful here; in this case, the second code block is not controlled by the conditional statement, so it will execute regardless of whether the condition returns true or false. This is not necessarily a bad thing, but it may not be what you want; usually, you want to run one block of code or the other, not both.

Real Code Example
let foodIsReady = false;
let PricePerPlate;

if (foodIsReady === true) {
  PricePerPlate = 10;
} else {
  PricePerPlate = 0;
}

As shown in the figure, this code always causes the foodIsReady variable to return false, which means that our food will never be ready.

or

let foodIsReady = false;
let PricePerPlate;

if (foodIsReady === true) { // don't need to explicitly specify '=== true'
  PricePerPlate = 10;
} else {
  PricePerPlate = 0;
}
Nested if … else

It is perfectly fine to place an if … else statement in another statement to nest them. For example, we can update our weather forecast application to display an additional set of options based on temperature:

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
  } else if (temperature >= 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some sunscreen on.';
  }
}

Although all the code works together, the work of each if … else statement is completely independent of the other.

swagasoft

Fully stack(MEAN) software engineer with over five years of experience participating in the complete product development lifecycle of successfully launched applications. Eager and willing to deliver mission- critical technology solutions.

View all posts by swagasoft →

Leave a Reply

Your email address will not be published. Required fields are marked *