JavaScript Fundamentals: Conditionals

Today is the 5th day of my #100DaysOfCode journey with JavaScript.

I write about my learnings in an explained way through my blogs and socials. If you want to join me on the learning journey, make sure to follow my blogs and social and share yours too. Let's learn together!🫱🏼‍🫲🏼

This Article is a part of the JavaScript Fundamentals series.

Console Log

The console.log will log values during the program's execution. If we console.log a value, that value will show in our test results. You will also often see console.log used in code examples:

let a = 22; 
a = a + 10; 
console.log(a); // 32;

Conditionals

Conditional statements control behaviour in JavaScript and determine whether or not pieces of code can run.

• if Statement

  Use of if when needing to branch based on a condition:

  if(1 === 1) {
      console.log( "Yes, it's true!" );
  }
  

  In the above line, 1 === 1 is the condition. The === operator referred to as the strict equality operator. It compares two values and evaluates them to be true if they are equal.

  Example: Let's complete the isEqual function! If a is equal to b return true.

  function isEqual(a, b) {
      return(a===b);
  }
  

  !== or Is Not Equal referred to as a strict inequality operator. This operator will evaluate to true if the two values are not equal.

  console.log( 1 !== 2 ); // true
  console.log( 2 !== 2 ); // false
  console.log( 3 !== 2 ); // true
  

  Example: Let's complete the isNotEqual function! If a is not equal to b return true.

  function isNotEqual(a, b) {
      if(a !== b){
          return true;
      }
  }
  

• else Statement

  The else statement runs only if the if condition is not true.

  if(isRaining === true) {
      stayIndoors();
  }
  else {
      // isRaining is not true
      goOutside();
  }
  

  Example: Let's update our isNotEqual function to also handle the case where a is equal to b. If a is not equal to b return true. Otherwise, return false.

  function greater(first, last) {
      if (first > last){
          return first;
      }
      if (last > first) {
          return last;
      }
  }
  

  Let's take a look at two new operators, greater than > and less than < operators! Both > and < will evaluate to false if the operands are equal:

  console.log(1 > 3); // false
  console.log(3 > 1); // true
  
  console.log(3 < 1); // false
  console.log(1 < 3); // true
  

  The values on either side of the operator are referred to as "operands". The operands for the equation 1 > 3 are 1 and 3.

• >= or <= Operator

  Both >= and <= will evaluate to true when the operands are equal, unlike the > and < operators.

  function greaterThanOrEqualTo(a, b) {
      if(a > b) {
          return true;
      }
      if(a === b) {
          return true;
      }
  }
  
  // or
  // Both will accomplish the same functionality.
  
  function isEqual(a,b) {
      if(a === b) {
          return true;
      }
      return false;
  }
  

• else If Statement

  We can use else and if together:

  if(firstCondition) {
      // firstCondition is true
  }
  else if (otherCondition) {
      // firstCondition is not true and otherCondition is true
  }
  else {
      // neither condition is true
  }
  

  What happens if the two conditions were true?

  const a = true;
  const b = true;
  
  if(a) {
      // this will run
  }
  else if (b) {
      // this will not run!
  }
  else {
      // this will definitely not run.
  }
  

  The important thing to take away from this is that else statements will only run if the original condition is not true.

Conclusion

Ending with an extra bit of information about JavaScript functions...

In order to guarantee that code is readable to a standard, many organisations maintain a rigid style guide. {} are typically recommended for if/else statements.

Today I learned about Conditionals, If, Else, Else If in JavaScript.

If You ❤️ My Content! Connect Me on Twitter or Supports Me By Buying Me A Coffee☕