{"id":2141,"date":"2020-04-05T12:22:38","date_gmt":"2020-04-05T12:22:38","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=2141"},"modified":"2022-07-02T02:35:26","modified_gmt":"2022-07-02T02:35:26","slug":"javascript-3-fcc-19","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/javascript-3-fcc-19\/","title":{"rendered":"JavaScript 3 – FCC 18"},"content":{"rendered":"\n
\"\"
Alice is continuing her adventure with JavaScript! <\/figcaption><\/figure>\n\n\n\n

Boolean Values <\/h2>\n\n\n\n

Simply put, a boolean is another data type, just like a string, array, or number. Unlike other data types, a boolean can only have two values: true<\/code> or false<\/code>. 1<\/a><\/p>\n\n\n\n

It can be helpful to think of a boolean as a toggle, or an on-off switch. When the toggle is in the “on” position, the value is true. When the toggle is in the “off” position the value is false. <\/p>\n\n\n\n

Here’s an example of a boolean value in a function: <\/p>\n\n\n\n

function offWithHisHead() {\n    return false; \n}<\/pre>\n\n\n\n
Conditional Logic: If Statements <\/h2>\n\n\n\n
We’ll see boolean values come into play when we use if<\/code> statements. In this context, if<\/code> is a keyword that controls the flow of the program using booleans. This is the syntax of an if<\/code> statement: <\/p>\n\n\n\n
if (condition) {\n      code block;\n  }\n... next bit of code... <\/pre>\n\n\n\n
Here’s how we would interpret that if<\/code> statement: “If the condition is true, then execute the code block.” On the other hand, if the condition were false, the code block wouldn’t be executed, and the program would move on to execute the next bit of code. <\/p>\n\n\n\n
This might feel a little abstract right now, but as you move through the Free Code Camp exercises in this section, you’ll get a lot of practice with if <\/code>statements, and they should make a lot more sense! <\/p>\n\n\n\n
Comparison Operators <\/h2>\n\n\n\n
JavaScript gives us a whole set of operators that allow us to compare two numerical values. These operators will always return a boolean true\/false value. This sounds a little complicated, but we basically asking simple questions like: “is a<\/code> greater than b<\/code>” or “is c<\/code> equal to d<\/code>.” We’re just asking those questions with JavaScript! <\/p>\n\n\n\n
One thing to be aware of here, is that some<\/strong> of the operators will actually convert the data type for you, so that the number 1<\/code> would be read the same as the string \"1\"<\/code>. When this happens, it’s called type coercion<\/strong>. You’ll see what we mean in a second. <\/p>\n\n\n\n
Equality operator ==<\/code><\/strong> : compares two values and returns true or false based on its findings. It will convert data types for you, so 1<\/code> and \"1\"<\/code> will be read as the same value.2<\/a> <\/p>\n\n\n\n
Strict equality operator ===<\/code><\/strong> : This is similar to the equality operator, but it will not<\/strong> convert the data type for you, so if one value is the number 1<\/code> and the other is the string \"1\"<\/code> they will not<\/strong> be considered equal. <\/p>\n\n\n\n
Inequality operator !=<\/code><\/strong> : This is simply the opposite of the equality operator and will return the value “true” when two values are not equal. The inequality operator will convert data types. <\/p>\n\n\n\n
Strict inequality operator !==<\/code><\/strong> : Chances are good that you see where we are going here! The strict inequality operator returns a value of true when two values are not equal. It does not<\/strong> convert the data type for you.<\/p>\n\n\n\n
Let’s take another look.  <\/p>\n\n\n\n
a<\/code><\/td>b<\/code><\/td>a == b<\/code><\/td>a === b<\/code><\/td> a != b<\/code><\/td>a !== b<\/code><\/td><\/tr>
2<\/code><\/td>3<\/code><\/td>false <\/code><\/td>false<\/code><\/td>true<\/code><\/td>true<\/code><\/td><\/tr>
4<\/code><\/td>\"4\"<\/code><\/td>true<\/code><\/td>false<\/code><\/td>false<\/code><\/td>true<\/code><\/td><\/tr>
4<\/code><\/td>4<\/code><\/td>true<\/code><\/td>true<\/code><\/td>false<\/code><\/td>false<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Type coercion<\/strong> comes into play when a = 4<\/code> and b = \"4\"<\/code>. The equality operator and inequality operator treat those two values as the same data type, but the strict equality and strict inequality operators do not. <\/p>\n\n\n\n
Why do we need comparison operators? They are incredibly useful when we’ll try to manipulate more advanced data structures down the line. They are also really handy in if<\/code> statements. Here’s an example:<\/p>\n\n\n\n
  function testComparison(val) {\n    if (val == 3) { \n      return \"Equal\";\n    }\n    return \"Not Equal\";\n  }\n  \n  testComparison(3);<\/pre>\n\n\n\n
What we’re seeing in the example above is a function<\/code> called testComparison<\/code> with one parameter: val<\/code>. The statement inside the function reads: if val<\/code> is equal to the number 3<\/code> then return the string \"Equal,\"<\/code> otherwise, return the string \"Not Equal.\"<\/code><\/p>\n\n\n\n
Okay, let’s tackle some other comparison operators. These should look pretty familiar, so we’ll move through them quickly. <\/p>\n\n\n\n
Operator<\/strong><\/td>Interpretation<\/strong><\/td><\/tr>
a < b<\/code><\/td>true when a<\/code> is less than b<\/code><\/td><\/tr>
a > b<\/code><\/td>true when a<\/code> is greater than b<\/code><\/td><\/tr>
a <= b<\/code><\/td>true when a<\/code> is less than or equal to b<\/code><\/td><\/tr>
a >= b<\/code><\/td>true when a<\/code> is greater than or equal to b<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
It’s helpful to note that all four of these operators will convert data types for you. We can use these operators in a function just like the other comparison operators. Here’s an example: <\/p>\n\n\n\n
 function perspective(glass) {\n    if (glass < 50) { \n      return \"Half Empty\";\n    }\n    return \"Half Full\";\n  }\n  \n  perspective(70);<\/pre>\n\n\n\n
What will happen when we pass the argument 70?3<\/a><\/p>\n\n\n\n
The Logical And (&&<\/code>) and Logical Or (||<\/code>)Operators<\/h2>\n\n\n\n
Let’s take it a step further. Say we wanted to compare two different boolean values at the same time. The logical and<\/em> operator will allow us to do that. It will return true<\/code> if both<\/strong> operands are true. <\/p>\n\n\n\n
The logical and<\/em> operator is displayed as two ampersands: &&<\/code>. Here’s an example of it in action: <\/p>\n\n\n\n
if (a > 10 &&<\/strong> a < 100) {\n    return \"Correct\";\n}\nreturn \"Incorrect\";<\/pre>\n\n\n\n
What we’re saying there is “if a<\/code> is greater than 10 and less than 100 return “Correct,” otherwise, return “Incorrect.” In other words, both the statement to the left and right of the &&<\/code> operator must be true for the boolean value to equal true. <\/p>\n\n\n\n
The logical or<\/em> operator also allows us to compare two different boolean values at the same time, but it will return true<\/code> if either statement is true. The logical or<\/em> operator is made of two pipe symbols: ||<\/code>.4<\/a> Here’s how it works in an if<\/code> statement. <\/p>\n\n\n\n
if (b < 10 ||<\/strong> b > 100) {\n    return \"Correct\";\n}\nreturn \"Incorrect\";<\/pre>\n\n\n\n
Here we will return “Correct” if b<\/code> is less than 10 or if b<\/code> is greater than 100. Simple enough, right?<\/p>\n\n\n\n
Else Statements<\/h2>\n\n\n\n
At this point, we’ve seen how if<\/code> statements work: in the examples above, when the if statement is true, we execute the code following the statement. An else<\/code> statement works with the if <\/code>statement and allows us to move on to execute the next bit of code when an if<\/code> statement is false. Basically we’re saying “if this is true do this thing, or else, do this next thing.”  Here’s the syntax of an else<\/code> statement: <\/p>\n\n\n\n
if (condition) {\n    code block;\n} else {\n    new code block;\n}  <\/pre>\n\n\n\n
We can easily chain together multiple if<\/code> statements by using else if<\/code> statements. Here’s what that would look like: <\/p>\n\n\n\n
 if (height > 100) {\n    return \"Alice ate something\";\n  } else if<\/strong> (height < 5) {\n    return \"Alice drank something\";\n  } else {\n    return \"Down the rabbit hole again\";\n  }<\/pre>\n\n\n\n
You’re not limited in the number of else if<\/code> statements you use, so as you can imagine, your code can get quite lengthy and complex. It’s important to remember that the function is executed from top to bottom, so the order of the statements can matter quite a bit. <\/p>\n\n\n\n
Switch Statements <\/h2>\n\n\n\n
Switch statements are similar to if<\/code> statements, in fact, they can can be used to simplify complex else if<\/code> statements in certain instances. A switch statement looks for the value of variable among several options (or cases); it uses break<\/code> statement to tell JavaScript to stop looking for matches among the cases. Let’s look at an example: <\/p>\n\n\n\n
  switch(character) {\n    case \"tweedle dee\":\n    case \"tweedle dum\":\n        danger = \"low\";\n        break;\n    case \"MaddHatter\":\n        danger = \"medium\";\n        break;\n    case \"Queen of Hearts\":\n        danger = \"high\";\n  }<\/pre>\n\n\n\n
This switch<\/code> statement switches on the value of the variable character<\/code>. By that we mean, that it compares the value of character<\/code> to the values of the cases. If the value of character<\/code> is equal to any one of the cases then any code for any case written below the matching case will execute until either a break statement occurs or there are no more cases. <\/p>\n\n\n\n
In the above example, if the character<\/code> is set to either \"tweedle dee\" <\/code>or \"tweedle dum\"<\/code> then the danger<\/code> will be set to \"low\"<\/code>. After which, the switch<\/code> breaks when it reaches the break<\/code> statement. On the other hand, if we set character<\/code> to \"Queen of Hearts,\"<\/code> the danger will be \"high\"<\/code>. Note that you do not need a break<\/code> statement after the last case. <\/p>\n\n\n\n
You can add a default<\/code> statement after the last case<\/code> which will be executed if the value doesn’t match any of the cases. Without a default<\/code> it is possible that none of the cases match the variable we are switching on. For example, if character<\/code> is “Cheshire Cat” in the example above, it will not match any of the cases and we wouldn’t update our danger<\/code> result. Here’s what the default statement would look like: <\/p>\n\n\n\n
  switch(character) {\n    case \"tweedle dee\":\n    case \"tweedle dum\":\n        danger = \"low\";\n        break;\n    case \"MaddHatter\":\n        danger = \"medium\";\n        break;\n    case \"Queen of Hearts\":\n        danger = \"high\";\n        break;\n    default<\/strong>: \n        danger = \"unknown\"        \n  }<\/pre>\n\n\n\n
Return Statements<\/h2>\n\n\n\n
This might seem kind of tacked on and easy to overlook in the Free Code Camp lessons, but it’s a really important (and simple!) concept. A return statement is similar to a break statement. While a break statement ends a switch statement, a return statement ends any function.  <\/p>\n\n\n\n
A function can actually have multiple return statements, which can be useful when you want to limit further code execution to scenarios where it makes sense. For instance consider this function: <\/p>\n\n\n\n
  reciprocater(y) {\n      if (y == 0) {\n       return 0\n      }\n      return 1\/y\n  }<\/pre>\n\n\n\n
This function takes in a value y<\/code> and returns it reciprocal 1\/y<\/code>, however, if y<\/code> is 0<\/code>, then 1\/y<\/code> is undefined. The early return<\/code> statement ensures that we do not try to divide 1<\/code> by 0<\/code>.<\/p>\n\n\n\n
Operator Quick Reference <\/h2>\n\n\n\n
Here’s a quick reference of comparison operators that we looked at in this group of Free Code Camp lessons: <\/p>\n\n\n\n
Operator<\/strong><\/td>Interpretation<\/strong><\/td><\/tr>
==<\/code> <\/td>The equality operator<\/strong> is true when values are the same regardless of data type <\/td><\/tr>
===<\/code><\/td>The strict equality operator<\/strong> is true when the values AND data type are the same<\/td><\/tr>
!=<\/code><\/td>The inequality operator<\/strong> is true when two values are not equal regardless of data type<\/td><\/tr>
!==<\/code><\/td>The strict inequality operator<\/strong> is true when the values and\/or data type is not the same<\/td><\/tr>
a < b<\/code><\/td>True when a<\/code> is less than b<\/code><\/td><\/tr>
a > b<\/code><\/td>True when a<\/code> is greater than b<\/code><\/td><\/tr>
a <= b<\/code><\/td>True when a<\/code> is less than or equal to b<\/code><\/td><\/tr>
a >= b<\/code><\/td>True when a<\/code> is greater than or equal to b<\/code><\/td><\/tr>
&&<\/code><\/td>The logical and<\/em> operator<\/strong> is true when the operands to the left and<\/strong> right of it are true<\/td><\/tr>
||<\/code><\/td>The logical or<\/em> operator <\/strong>is true when the operands to the left or<\/strong> right of it is true<\/td><\/tr><\/tbody><\/table><\/figure>\n
  1.  Be aware that boolean values don’t have quotes around them: so it’s true, not “true.” If quotes are present, it will be read as a string value and not a boolean value.↩<\/a><\/p><\/li>
  2. Don’t get this confused with the assignment operator (=<\/code>) which is used to assign a value to a variable as in var = 7<\/code>.↩<\/a><\/p><\/li>
  3. Our glass will be “Half Full”, optimism for the win!↩<\/a><\/p><\/li>
  4.  hold shift and backslash on most keyboards↩<\/a><\/p><\/li><\/ol><\/div>","protected":false},"excerpt":{"rendered":"
    Boolean Values Simply put, a boolean is another data type, just like a string, array, or number. Unlike other data types, a boolean can only have two values: true or false. It can be helpful to think of a boolean as a toggle, or an on-off switch. When the toggle is in the “on” position, … Continue reading JavaScript 3 – FCC 18<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2141","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=2141"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2141\/revisions"}],"predecessor-version":[{"id":3692,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2141\/revisions\/3692"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}