{"id":18983,"date":"2021-10-28T13:42:44","date_gmt":"2021-10-28T11:42:44","guid":{"rendered":"https:\/\/firmbee.com\/?p=18983"},"modified":"2021-11-09T15:25:37","modified_gmt":"2021-11-09T14:25:37","slug":"snippets-control-structures","status":"publish","type":"post","link":"https:\/\/firmbee.com\/snippets-control-structures","title":{"rendered":"Snippets and control structures. Part 4 JavaScript course from Beginner to Advanced in 10 blog posts"},"content":{"rendered":"

This is part 4 of the JavaScript <\/a>blog post series that will take you from beginner to advanced. By the end of this series you will know all the basics you need to know to start coding in JavaScript. Without further ado, let\u2019s get started with the fourth tutorial.<\/strong><\/p>\r\n\r\n

Snippets and control structures – table of contents:<\/h2>\r\n
    \r\n \t
  1. Upgrading our coding set up to\u00a0snippets<\/a><\/li>\r\n \t
  2. Control structures<\/a><\/li>\r\n<\/ol>\r\n

    In this blog post we will continue with where we left from the third blog post.<\/a><\/a> At this stage you should have your Google Chrome browser open and more specifically have your JavaScript console open. If you for some reason closed them, it would be a good time to open them back up.<\/p>\r\n

    If you are on a Mac, the keyboard shortcut to open up the console is to press \u201cOption + Command + J\u201d, after you open up Chrome. If you are using a Windows device, you can use the keyboard shortcut of \u201cControl + Shift + J\u201d, to open up the JavaScript Console, once you open up Chrome. Or you can also go to the menu at the top and go to View -> Developer -> JavaScript Console.<\/p>\r\n

    Upgrading our coding set up to\u00a0snippets<\/h2>\r\n\r\n

    Until this point in the course, we could have written everything line by line and executed it line by line. It wouldn\u2019t be the most convenient way to run things, but it would work nonetheless. Starting with this tutorial, we will write code that takes multiple lines of code to create a complete set of instructions. In order to achieve that we will use something called \u201csnippets\u201d in Google Chrome. Without further ado, let\u2019s upgrade our setup from JavaScript console to Chrome snippets.<\/p>\r\n

    Currently you should have your console open, and if you followed the previous tutorials you should have a screen that looks like this:<\/p>\r\n\"snippets\"\r\n\r\n

    When you look at this screen, or your screen for that matter, you should see: Elements, Console, Sources, Network, Performance, Memory, Application and so on written next to each other at the top bar of the dark area. If you are seeing them in lighter colors, that’s completely fine too. It means that you are using the light mode, which can be the default mode for day time. The screen that I show currently uses the color scheme for dark mode in Chrome console settings. If you see the Elements, Console, Sources, Network and so on showing up, in either color scheme, you are good to go.<\/p>\r\n

    If you take a closer look at the top bar of the console, you can see that the writing of \u201cConsole\u201d looks slightly at a different color. Go ahead and click \u201cSources\u201d right next to it.<\/p>\r\n\"snippets\"\r\n\"snippets\"\r\n

    Once you click on sources you should be looking at a screen that somehow looks like this.<\/p>\r\n\r\n

    One difference you might expect if that you probably won\u2019t see the \u201cnotes.js\u201d file, as I have created it previously. Other than that it should look pretty similar to this. To create a new file click on the \u201c+ New snippet\u201d. Once you click on it, it will create a new JavaScript file for you and you can name it however you like. In this tutorial we will name it \u201cindex.js\u201d as it is a common practice to name the first or the primary file as \u201cindex.js\u201d.<\/p>\r\n

    If you want to follow this tutorial word to word, after clicking on \u201c+ New Snippet\u201d, you can enter the name \u201cindex.js\u201d and hit the enter key on your keyboard. Now we can click inside the opened file on the major area that opened up, to start coding JavaScript.<\/p>\r\n

    Let\u2019s start with something that we already know that works. And that is:<\/p>\r\n\r\n

    \r\nalert("Hello, World!");\r\n<\/pre>\r\n
    You can either write it out yourself for extra practice or copy and paste the code part to the file we created. I highly recommend typing it out yourself as this is how you learn it in many cases. Once you type it, if you hit the enter key, you will see that the code is not executed. Instead your cursor will just go to the next line, as with any other text editing area. There are two main ways we can execute our code. First one is to click on the play button that is located at the bottom right corner.<\/p>\r\n\"snippets\"\r\n\r\n
    If you click on that play button, it should execute our code and display us the results.<\/p>\r\n\"snippets\"\r\n\r\n
    Once you click \u201cOK\u201d, let\u2019s also run our code using the other main way. The second main way to run your code, or run your snippet is to use the keyboard shortcut. As we can see, it already shows us the shortcut when we click on the run button. That keyboard shortcut is \u201cCommand + Enter\u201d. To do that, we can press the Command key and then hit the Enter key. Doing that will also run our code and give us the same results as clicking on the play button.<\/p>\r\n\"snippets\"\r\n\r\n
    And with that, now you know the two ways to execute our JavaScript code in the Chrome snippets.<\/p>\r\n
    If you want to create new files to maybe takes notes about JavaScript, or to practice some JavaScript code, you can always create new files by clicking the \u201c+ New snippet\u201d and name your files as you like. Now that we have our new coding set up ready, lets see some more JavaScript.<\/p>\r\n\r\n
    Control structures<\/h2>\r\n
    When we write code, we have to account for many scenarios and actions the user can take. This preparation for different scenarios can come from different sources such as the device our code runs, screen size to be displayed, different types of browser the user might have and so on. But how do we make sure we can be prepared for different scenarios? If you write different codes one after another, would executing all of them makes sense to the user? To answer all of that and more, we will use control structures.<\/p>\r\n
    Control structures allow us to guide the execution of the code, so that our code can adapt to different conditions. There are multiple common elements used for control structures. In this tutorial we will start with the simplest one and move from there. The first one we will see uses If, else, else if statements to control the execution of the code.<\/p>\r\n
    If, else<\/em> and else\u00a0if<\/em><\/h3>\r\n
    This is the simplest control structure to get started with. What it allows us to do is to execute some piece of code if a certain condition is true, and execute another piece of code if another condition is true. Let\u2019s see that with an example. Let\u2019s assume that, if it rains outside, I will take my umbrella with me. Otherwise, I won\u2019t take an umbrella. We can translate the exact logic and reasoning to code as follows:<\/p>\r\n
    (Before writing this code we will comment the code from the previous code we have in the file by placing two forward slashes in front of it, so it does not get executed, but you still have a copy of it. After adding the forward slashes it should look like this:)<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = true;\r\nif (rainy){\r\n   alert("Take an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    Running this code would give us the following output:<\/p>\r\n\"control_structures\"\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = false;\r\nif (rainy){\r\n   alert("Take an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    Whereas running this version of the code that says there is no rain, would give the following output:<\/p>\r\n\"control_structures\"\r\n\r\n
    When you are typing out the code to make changes to the code file, if you take a closer look at the file name, you will see that it will have an asterisk before the file name. This means that the code file we write is not fully saved. This may not make a large difference if you are writing only couple lines of code that you can always write, but more often than not you will want to save your code, so that you can reuse or review it later on. We can save this code file the same way we save other files, so that would be \u201cCommand + S\u201d on Mac and \u201cControl + S\u201d on Windows.<\/p>\r\n\"control_structures\"\r\n
    In our case, because we are executing our code right after writing it, it automatically saved our file when we execute the code. So if you are going to write some code and leave it for hours, it is good idea to save your code every now and then to make sure you are not losing any significant progress.<\/p>\r\n
    It is great that we can have our code adapt to a binary condition using an If and an else statement, but what it we have multiple things to consider, which will most likely be the case in real life. For example, what if it is cold and you need to get a hoodie when it is cold. One way we could do that would be an \u201celse if\u201d statement and we can do it as follows:<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = false;\r\nlet cold = true;\r\nif (rainy){\r\n   alert("Take an umbrella");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    The output of this code would look like this:<\/p>\r\n\"control_structures\"\r\n
    So if a certain condition is true, the first code that is in between the parentheses will be executed. In our case, since the first condition checks for rain, we will alert the user that they should take an umbrella. If that condition is false, meaning that there is no rain, we will keep checking for other conditions by using an \u201celse if\u201d statement. One thing that is significantly different from the \u201celse if\u201d statement is that, we can check for as many condition as we like with else if statements.<\/p>\r\n
    The important thing to remember here is that, your code will be checked from top to bottom, for correctness or trueness. Meaning that with the current code, if the weather is both rainy and cold, it will not recognize the cold weather, since the first statement is correct. We can also verify this by changing the code to have both rainy and cold conditions.<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = true;\r\nlet cold = true;\r\nif (rainy){\r\n   alert("Take an umbrella");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n\"control_structures\"\r\n\r\n
    Now you may be wondering, how can I solve this? Which one is more important, the weather being cold, or being rainy? Should you pick one condition and sacrifice the other condition? Do you even have to make such a choice? Well, not really. This is a very common problem and it has a very common and relatively simple solution. We can use an \u201cand\u201d expression to cover multiple scenarios. To tell JavaScript that we want to use an \u201cand\u201d to connect our programming logic, we will use two of this symbol: \u201c&\u201d. And because our code is checked from top to bottom, we will use the most comprehensive option to the first if statement. The updated code then, looks like this.<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = true;\r\nlet cold = true;\r\nif (rainy && cold) {\r\n    alert("Wear a hoodie and take an umbrella with you.")\r\n} else if (rainy){\r\n   alert("Take an umbrella");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    Running this code would give you an alert that looks like this:<\/p>\r\n\"control_structures\"\r\n
    Much better. Now we can combine multiple different scenarios, including different combinations of these scenarios. But what if we want to consider a scenario that is not cold but rainy. And assume that we want to tell the user to not to get a hoodie specifically, and to only get an umbrella. To do just that, we can use the logical \u201cnot\u201d, we can use it in our code with the exclamation mark before the condition we want to specify. Let\u2019s add that condition to our code so it is more complete.<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = true;\r\nlet cold = true;\r\nif (rainy && cold) {\r\n    alert("Wear a hoodie and take an umbrella with you.")\r\n} else if (rainy && !cold){\r\n   alert("Take an umbrella, but not a hoodie.");\r\n} else if (rainy){\r\n   alert("Take an umbrella");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    When we are adding a new condition to an if else tree, as long as it is the more comprehensive condition we can place it somewhere at the top. This way, we have much less chance for errors compared to the opposite approach. One side affect of injecting new code to existing code is that some of the code may become redundant or may not work in the most efficient way. We will not heavily focus on the efficiency part, but for now we can see that we cover both the cold and not cold conditions for a rainy weather, so we can optionally remove the condition that just checks for \u201crainy\u201d condition. Doing this code adjustments is also called \u201cCode Refactoring\u201d, in the refactoring process the point is the make code incrementally more clean and efficient.<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\nlet rainy = true;\r\nlet cold = true;\r\nif (rainy && cold) {\r\n    alert("Wear a hoodie and take an umbrella with you.")\r\n} else if (rainy && !cold){\r\n   alert("Take an umbrella, but not a hoodie.");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n<\/pre>\r\n
    When we want to check for an either condition to be true, we can use the \u201cor\u201d operator, which is the pipe symbol used twice on your keyboard and looks like this \u201c||\u201d.<\/p>\r\n
    Let\u2019s see an example to that with another example. To add more examples to the same file without interfering with the new commands, we can comment out the previous code we used by wrapping the previous code inside these symbols that we have seen before:<\/p>\r\n
    \r\n\/* \r\n*\/\r\n<\/pre>\r\n
    Which is a forward slash an asterisk and the same symbols in the opposite order to close of the commented part. Let\u2019s wrap our current code inside these symbols so that they do not interfere with the new code to be come. Now your code file should look like this:<\/p>\r\n
    \r\n\/\/ alert("Hello, World!");\r\n\/*\r\nlet rainy = true;\r\nlet cold = true;\r\nif (rainy && cold) {\r\n    alert("Wear a hoodie and take an umbrella with you.")\r\n} else if (rainy && !cold){\r\n   alert("Take an umbrella, but not a hoodie.");\r\n} else if (cold) {\r\n    alert("Get a hoodie with you, not an umbrella");\r\n} else {\r\n   alert("No need for an umbrella");\r\n}\r\n*\/\r\n<\/pre>\r\n
    From now on we will focus on the new parts we are adding to the file, so that we can focus on learning one thing at a time. You can optionally keep the previous code in the commented mode, move them to a new file for your references, or if you don\u2019t want to see it any longer, you can delete it for a cleaner file.<\/p>\r\n
    Let\u2019s continue with our example to an \u201cor\u201d case. Consider a scenario where you visit your fridge for food and drinks every time you feel hungry or thirsty. How would the code work for that?<\/p>\r\n
    \r\nlet hungry = true;\r\nlet thirsty = false;\r\nif (hungry || thirsty) {\r\n    alert("Go to the fridge and check what you have in there.");\r\n}\r\n<\/pre>\r\n
    Executing this code, as you also probably have guessed it, would give us the following result:<\/p>\r\n\"snippets\"\r\n
    Until now the examples we used came from close to real life scenarios, but a lot of the time you will be dealing with numbers in code. You have seen numbers previously in this series, but we did not talk too much about the comparison or the operations we could do with them. Now that we learned about if else statements, let’s see some more about numbers.<\/p>\r\n
    When we are dealing with if, and else if statements we are checking for trueness of a statement. But can we also make a meaningful if statement if all we have is numbers? For example, what if I want to get an umbrella if there is more than 50% chance of rain, can we achieve that with code? Yes we can, and here is how it would go.<\/p>\r\n
    \r\nlet chanceOfRain = 70;\r\nif (chanceOfRain >= 50) {\r\n    alert("Get an umbrella.");\r\n}\r\n<\/pre>\r\n\"\"\r\n
    When we are dealing with numbers, we need a way to convert it to some kind of trueness or falseness for the if statement to work. There are multiple ways we can achieve that depending on our use case.<\/p>\r\n
    For example, we can check if two numbers are exactly equal to each other with three equal signs like this:<\/p>\r\n
    \r\nlet a = 10;\r\nlet b = 10;\r\nif (a === b) {\r\n    alert("They are the same.");\r\n}\r\n<\/pre>\r\n
    This would give us the alert that says \u201cThey are the same.\u201d.<\/p>\r\n
    We can also check for not being equals with the following code:<\/p>\r\n
    \r\nlet a = 10;\r\nlet b = 5;\r\nif (a !== b) {\r\n    alert("They are not the same thing!");\r\n}\r\n<\/pre>\r\n
    Running the code above will give us the alert that says \u201cThey are not the same thing!\u201d.<\/p>\r\n
    We can also check for specifically which one is greater, greater equal, smaller or smaller equal. You can find a summary of the signs for your convenience.<\/p>\r\n
    \r\n\/\/ === checks for equality\r\n\/\/ !== checks for not equality\r\n\/\/ > greater than\r\n\/\/ >= greater than or equal to\r\n\/\/ < smaller than\r\n\/\/ <= smaller than or equal to\r\n<\/pre>\r\n
    Lets also see couple more of them for extra practice and code exposure. Here are couple of example codes that will all display the alert they have inside the if statements:<\/p>\r\n
    Greater than:<\/p>\r\n
    \r\nlet a = 10;\r\nlet b = 5;\r\nif (a > b) {\r\n    alert("a is greater than b");\r\n}\r\n<\/pre>\r\n
    Greater than or equal to:<\/p>\r\n\r\nlet a = 10;\r\nlet b = 5;\r\nif (a >= b) {\r\n    alert(“a is greater than or equal to b”);\r\n}\r\n[\/code]\r\n
    Another example to greater than or equal to:<\/p>\r\n
    \r\nlet a = 10;\r\nlet b = 10;\r\nif (a >= b) {\r\n    alert("a is greater than or equal to b");\r\n}\r\n<\/pre>\r\n
    Smaller than:<\/p>\r\n
    \r\nlet a = 5;\r\nlet b = 10;\r\nif (a < b) {\r\n    alert("a is smaller than b");\r\n}\r\n<\/pre>\r\n
    Smaller than or equal to:<\/p>\r\n
    \r\nlet a = 5;\r\nlet b = 10;\r\nif (a <= b) {\r\n    alert("a is smaller than or equal to b");\r\n}\r\n<\/pre>\r\n
    Another example to smaller than or equal to:<\/p>\r\n
    \r\nlet a = 10;\r\nlet b = 10;\r\nif (a <= b) {\r\n    alert("a is smaller than or equal to b");\r\n}\r\n<\/pre>\r\n
    Using a combination of these comparison or equality signs, we can create complex codes that can adapt to different conditions.<\/p>\r\n
    Arithmetic operations<\/h2>\r\n\r\n
    When we are dealing with numbers another thing we want to perform is arithmetic operations. Most of the arithmetic operations should be pretty familiar but there are also programming specific arithmetic operators that might be less familiar.<\/p>\r\n
    Here is a summary of the arithmetic operations we use in JavaScript with their meaning for your convenience:<\/p>\r\n
    \r\n\/\/ * multiplication\r\n\/\/ \/ division\r\n\/\/ + addition\r\n\/\/ - subtraction\r\n\/\/ % modulo operation, gives us the remainder after division\r\n\/\/ ** exponentiation\r\n<\/pre>\r\n
    The first four will work as you expect:<\/p>\r\n
    \r\nlet a = 12;\r\nlet b = 5;\r\nlet c = a * b;\r\n\/\/ c will be 60\r\nc = a \/ b;\r\n\/\/ c will now be 2.4\r\nc = a + b;\r\n\/\/ c will now be 17\r\nc = a - b;\r\n\/\/ c will now be 7\r\n<\/pre>\r\n
    The modulo operation will give us the remainder after dividing the first number to the second number. If we continue with the previous a, b and c code:<\/p>\r\n
    \r\nc = a % b;\r\n\/\/ c will now be 2\r\nc = 18 % 5;\r\n\/\/ c will now have the value of 3\r\n\/\/ because 18 divided by 5 will give us the remainder of 3\r\n<\/pre>\r\n
    The exponent operator performs exponentiation in JavaScript. It is represented with two asterisks sign and takes the first element to the power of second element.<\/p>\r\n
    \r\nc = 2 ** 3;\r\n\/\/ c will now have the value of 8\r\n\/\/ because 2 * 2 * 2 equals 8\r\n<\/pre>\r\n
    This was a relatively long tutorial, and you made it! We have upgraded our coding setup and learned quite a lot in this tutorial. In the next tutorial, we will continue with more ways to control the flow of our code!<\/p><\/strong>\r\n","protected":false},"excerpt":{"rendered":"This is part 4 of the JavaScript blog post series that will take you from beginner to advanced. By the end of this series you […]","protected":false},"author":8,"featured_media":18985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5,488,1],"tags":[],"class_list":["post-18983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-javascript-course","category-other"],"acf":{"faq":null,"seria_wpisow":"JavaScript Course From Beginner to Advanced in 10 blog posts","tytul_w_serii":"Snippets and control structures","":"","naglowek_spisu_tresci":"","spis-tresci-lista":null},"_links":{"self":[{"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/posts\/18983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/comments?post=18983"}],"version-history":[{"count":15,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/posts\/18983\/revisions"}],"predecessor-version":[{"id":19259,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/posts\/18983\/revisions\/19259"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/media\/18985"}],"wp:attachment":[{"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/media?parent=18983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/categories?post=18983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/firmbee.com\/wp-json\/wp\/v2\/tags?post=18983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}