Reflections Front End Web Development – Javascript Continued – Lesson 12

I have taken a few moments to write down my thoughts about Lesson 12 on Javascript Conditionals to answer the following questions:

  • What new skills have I learned?
  • What has been easy?
  • What has been difficult?
  • How have I used the problem solving strategies from the first project to overcome challenges so far?

Overall, I found this lesson to be moderately easy (especially given the many provided online resources), and did not encounter any significant difficulties. Here we learned about the use of Conditionals in Javascript.  This included:

  • Flowcharts
  • if … else statements
  • else … if statements
  • logical Operators
  • Logical Expressions
  • Advanced Conditionals
  • Ternary Operator
  • Switch statement

Collected Lesson 12 Quizzes on Conditionals in codepen.io

Also refer to my notes on Conditionals below:

Conditionals

Flow Charts

Flowcharts are visual diagrams that outlines the solution to a problem through a series of logical statements. The order in which statements are evaluated and executed is called the control flow.

flowchart

if … else statements

If…else statements allow you to execute certain pieces of code based on a condition, or set of conditions, being met. The value inside the if statement is always converted to true or false. Depending on the value, the code inside the if statement is run or the code inside the else statement is run, but not both. The code inside the if and else statements are surrounded by curly braces {…} to separate the conditions and indicate which code should be run. Note that you cannot have an else statement without first having an if statement.

else … if statements

In some situations, two conditionals aren’t enough. In JavaScript, you can represent this secondary check by using an extra if statement called an else if statement. By adding the extra else if statement, you’re adding an extra conditional statement. The else statement essentially acts as the “default” condition in case all the other if statements are false.

Logical Operators

The && symbol is the logical AND operator, and it is used to combine two logical expressions into one larger logical expression. If both smaller expressions are true, then the entire expression evaluates to true. If either one of the smaller expressions is false, then the whole logical expression is false.

Logical expressions are similar to mathematical expressions, except logical expressions evaluate to either true or false. Similar to mathematical expressions that use +, -, *, / and %, logical operators &&, || and ! can be used to create more complex logical expressions.

Logical operators can be used in conjunction with boolean values (true and false) to create complex logical expressions. By combining two boolean values together with a logical operator, you create a logical expression that returns another boolean value. Here’s a table describing the different logical operators:

logical operators

Note that logical expressions are evaluated from left to right. Similar to mathematical expressions, logical expressions can also use parentheses to signify parts of the expression that should be evaluated first.

Below are the truth tables for logical AND ( && ) and logical OR ( || ).

logical and or.jpg

Truth tables are used to represent the result of all the possible combinations of inputs in a logical expression. A represents the boolean value on the left-side of the expression and B represents the boolean value on the right-side of the expression.

Truth tables can be helpful for visualizing the different outcomes from a logical expression.

However, in both tables above, there are specific scenarios where regardless of the value of B, the value of A is enough to satisfy the condition.

For example, if you look at A AND B, if A is false, then regardless of the value B, the total expression will always evaluate to false because both A and B must be true in order for the entire expression to be true.

This behavior is called short-circuiting because it describes the event when later arguments in a logical expression are not considered because the first argument already satisfies the condition.

Short Circuit

Advanced Conditionals

Every value in JavaScript has an inherent boolean value. When that value is evaluated in the context of a boolean expression, the value will be transformed into that inherent boolean value.

Truthy and Falsy Values

A value is falsy if it converts to false when evaluated in a boolean context. For example, an empty String “” is falsy because, “” evaluates to false. You already know if…else statements, so let’s use them to test the truthy-ness of “”.

falsy

Here’s the list of all of the falsy values:

  • the Boolean value false
  • the null type
  • the undefined type
  • the number 0
  • the empty string “”
  • the odd value NaN

There are only six falsy values in all of JavaScript.

A value is truthy if it converts to true when evaluated in a boolean context. For example, the number 1 is truthy because, 1 evaluates to true. Let’s use an if…else statement again to test this out:

truthy

Essentially, if it’s not in the list of falsy values, then it’s truthy.

Ternary Operator

The ternary operator provides you with a shortcut alternative for writing lengthy if…else statements.

ternary op

To use the ternary operator, first provide a conditional statement on the left-side of the ?. Then, between the ? and : write the code that would run if the condition is true and on the right-hand side of the : write the code that would run if the condition is false.

Switch Statement

If you find yourself repeating else if statements in your code, where each condition is based on the same value, then it might be time to use a switch statement.

A switch statement is an another way to chain multiple else if statements that are based on the same value without using conditional statements. Instead, you just switch which piece of code is executed based on a value.

When the switch statement first evaluates, it looks for the first case clause whose expression evaluates to the same value as the result of the expression passed to the switch statement. Then, it transfers control to that case clause, executing the associated statements.

Break Statement

The break statement can be used to terminate a switch statement and transfer control to the code following the terminated statement. By adding a break to each case clause, you fix the issue of the switch statement falling-through to other case clauses.

However, in some situations, you might want to leverage the “falling-through” behavior of switch statements to your advantage.

Also, notice the default case. You can add a default case to a switch statement and it will be executed when none of the values match the value of the switch expression: for example, when your code follows a hierarchical-type structure.

Happy Coding and Blogging!

Images

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s