{"id":2199,"date":"2020-04-06T15:02:55","date_gmt":"2020-04-06T15:02:55","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=2199"},"modified":"2022-07-02T02:35:52","modified_gmt":"2022-07-02T02:35:52","slug":"javascript-5-fcc-21","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/javascript-5-fcc-21\/","title":{"rendered":"JavaScript 5 – FCC 20"},"content":{"rendered":"\n
\"\"
Photo by David Streit<\/a>.<\/figcaption><\/figure>\n\n\n\n

Understanding Loops <\/h2>\n\n\n\n

Loops allow you to run the same code block multiple times until a desired result is reached. They are a kind of short hand, so that you don’t have to write the same code block over and over again. With a loop, you’re basically saying: when this condition is true, do this thing over and over again until the condition is not true. Here’s a diagram to help illustrate what we mean: <\/p>\n\n\n\n

\"\"
Loop flow chart.<\/figcaption><\/figure>\n\n\n\n

There are several common loop statements that we’ll look at, including the while<\/code> loop, the for<\/code> loop and the do-while<\/code> loop. <\/p>\n\n\n\n

The best way to get a handle on this is to look at some examples, so stick with us if this feels a little abstract right now. <\/p>\n\n\n\n

while<\/code> loop<\/h3>\n\n\n\n

The first loop we will look at is a while<\/code> loop. Let’s start out by breaking down the basic syntax of a while <\/code>statement. <\/p>\n\n\n\n

while(condition){\n  \/\/code block to be executed\n}<\/pre>\n\n\n\n
Just like in the diagram above, we’ll start by evaluating the condition<\/code>. The condition<\/code> is a boolean statement, so it will either be true<\/code> or false<\/code>. If the statement is true<\/code>, the code in the body (the bit between the two curly braces) will be executed; if the statement is false<\/code> the loop terminates and the code in the body isn’t executed. The loop will repeat (or iterate) over and over again until the condition is false. At that point, the loop will terminate, and you’ll move on to the next bit of code. <\/p>\n\n\n\n
Here’s an example with some code: <\/p>\n\n\n\n
var loopArray = [];\nvar b = 0;\n\nwhile(b < 5) {\n  loopArray.push(b);\n  b++;\n}<\/pre>\n\n\n\n
This is telling us that we start with an empty array called loopArray<\/code> and a variable b<\/code> that has the value of 0<\/code>. The condition<\/code> in the while<\/code> loop asks if b<\/code> is less than 5<\/code>. If that’s true, we will execute the body of the loop, which tells us to push the current value of b<\/code> into the array (loopArray.push(b)<\/code>). Then, the value of b<\/code> will be incremented (b++<\/code>).1<\/a> <\/p>\n\n\n\n
This is where things get… loopy. We will continue to execute that code, as long as the condition returns a value of true<\/code>, or, in other words, as long as b<\/code> is less than 5<\/code>. <\/p>\n\n\n\n
Once b<\/code> equals 5<\/code>, the loop will terminate and we will move on to whatever bit of code is next. When the while<\/code> loop is complete, loopArray<\/code> will be [0, 1, 2, 3, 4]<\/code>.   <\/p>\n\n\n\n
It can some times be a bit tricky to visualize what’s happening in a loop so you might find it helpful to draw a quick chart. The idea here is that you’ll start with three columns, one for the array, the variable value, and the condition statement.  Fill it in with what we know about the loop:<\/p>\n\n\n\n
What is in the loopArray?<\/td>What is the value of the variable?<\/td> State of the Condition<\/td><\/tr>
loopArray<\/code><\/td>b<\/code><\/td>b < 5<\/code><\/td><\/tr>
We start with an empt array: []<\/td>0<\/td> 0 is less than 5: true! <\/td><\/tr><\/tbody><\/table>
This is how we can start a variable table… keep going on your own!<\/figcaption><\/figure>\n\n\n\n
On each iteration, you’ll evaluate the condition<\/code> in the third column of the chart, then you’ll execute the body by adding a new value to the array in the first column, and then update the value of the variable b<\/code> in the middle column. Once finished we can clearly see where the loop terminates and what the array contains when that happens. This might seem a little tedious, but it can actually be a really helpful way to visualize what’s happening inside a loop<\/code> statement! <\/p>\n\n\n\n
loopArray<\/code><\/td>b<\/code><\/td>b < 5<\/code><\/td><\/tr>
[]<\/code><\/td>0<\/code><\/td>true<\/code><\/td><\/tr>
[0]<\/code><\/td>1<\/code><\/td>true<\/code><\/td><\/tr>
[0, 1]<\/code><\/td>2<\/code><\/td>true<\/code><\/td><\/tr>
[0, 1, 2]<\/code><\/td>3<\/code><\/td>true<\/code><\/td><\/tr>
[0, 1, 2, 3]<\/code><\/td>4<\/code><\/td>true<\/code><\/td><\/tr>
[0, 1, 2, 3, 4]<\/code><\/td>5<\/code><\/td>false<\/code><\/td><\/tr><\/tbody><\/table>
A complete variable table.<\/figcaption><\/figure>\n\n\n\n
do... while<\/code> loop<\/h3>\n\n\n\n
This loop is very similar to the the while<\/code> loop, but instead of first checking to see if the condition<\/code> is met before you execute the code block, you’ll execute the code block first–just the first time<\/strong>–and then check the condition to decide if you should continue to execute the code block.  It’s basically saying do<\/strong><\/em> the code block first. Here’s an example: <\/p>\n\n\n\n
var ourArray = [];\nvar b = 0;\ndo {\n  ourArray.push(b);\n  b++;\n} while (b < 5);<\/pre>\n\n\n\n
Let’s break that down. We start off with an empty array called ourArray<\/code> and a variable b<\/code> that has the value of 0<\/code>. The first thing we’re going to do is execute the code block; we’ll push b (which has the value of 0<\/code>) into ourArray<\/code> and then we will increment it by 1. That means that now b = 1<\/code>. <\/p>\n\n\n\n
You’ll notice that we are always going to execute the code block– at least once– with a do... while<\/code> loop. By executing the code block, our array has been updated and the value for b<\/code> has changed. This is different than a regular while<\/code> loop because with a regular while<\/code> loop we will only execute the code block if the condition is true, so it’s possible, if the condition is false, that we will never execute the code block.  With a do... while<\/code> loop we will always execute it once. <\/p>\n\n\n\n
So we start off by executing the code block, but what next? Now, we will evaluate the condition<\/code> and ask if it is true<\/code> or false<\/code>. Remember, our value for b<\/code> was updated, so now we’re going to ask if b<\/code> (which has a value of 1<\/code>) is less than 5<\/code>. That is true, so we will execute the code block a second time, and repeat the process of checking the condition<\/code> and executing the code block until the condition<\/code> is no longer true (when b<\/code> has the value of 5<\/code>). When we’re finished, ourArray will have [0, 1, 2, 3, 4]<\/code>.  <\/p>\n\n\n\n
Again, the benefit of the do... while<\/code> loop is that it gives you the opportunity to execute the code block once before iterating through the loop. <\/p>\n\n\n\n
for<\/code> loop<\/h3>\n\n\n\n
A for<\/code> loop will feel familiar after you get comfortable with a while<\/code> loop. A for<\/code> loop will run for<\/em> a set amount of time and we will pass it three specific instructions. Free Code Camp refers to them as the initialization<\/code>, the condition<\/code>, and the final-expression<\/code>. <\/p>\n\n\n\n
The initialization<\/code> is basically the set up for the loop; it’s where we might set the variable before the loop starts. <\/p>\n\n\n\n
The condition<\/code> statement tells you what needs to be true in order for the loop to run. If the condition<\/code> is true, the code block will be executed, but it the condition<\/code> is false, the loop will be terminated. Just like before, we will revaluate the condition<\/code> each time the loop runs. <\/p>\n\n\n\n
The final-expression<\/code> is usually used to increment or decrement the loop count; you might also see it called an update statement. The final-expression<\/code> should be executed at the end of each loop, before you check the condition<\/code> statement again. <\/p>\n\n\n\n
It’s easiest to understand this with an example.  Here’s the syntax of a for<\/code> loop: <\/p>\n\n\n\n
for (initialization; condition; final-expression){\n\/\/code block to be executed\n}<\/pre>\n\n\n\n
The initialization<\/code>, condition<\/code>, and final-expression<\/code> are separated by semicolons inside the parenthesis. Aside from that, the for<\/code> loop looks similar to the while<\/code> loop. Here’s an example with code: <\/p>\n\n\n\n
var ourArray = [];<\/code>\n <\/code>\nfor (var i = 0; i < 3; i++) { <\/code>\n   ourArray.push(i); <\/code>\n}<\/code><\/pre>\n\n\n\n
What we’re seeing is an empty array called ourArray<\/code>. The initialization<\/code> statement in the for<\/code> loop introduces the variable i<\/code> and sets it to 0<\/code>, then the condition<\/code> statement reads that i<\/code> has to be less than 3<\/code> in order for the code block to execute.  Since it is true that 0<\/code> is less than 3<\/code> we will execute the code block, which asks us to  push the value of i<\/code> into the array. Next the final-expression<\/code> asks us to increment i<\/code> by  1<\/code>. We’ll repeat the for<\/code> statement, but this time i<\/code> will equal 1<\/code>. We will continue to repeat this loop process until  i < 3<\/code> is no longer true. When we are finished, the array will contain [0, 1, 2]<\/code>.<\/p>\n\n\n\n
Iterating through an Array<\/h2>\n\n\n\n
In the examples we have been looking at so far, we have been adding values to empty arrays. But often we’ll want to iterate through the contents of the array– or, in other words, we will want to access the array elements one at a time. The for<\/code> loop can help us with that task. Let’s look at an example and then we will unpack it: <\/p>\n\n\n\n
var arr = [7, 6, 5, 4, 3];\nfor (var a = 0; a < arr.length; a++) {\n  console.log(arr[a]);\n}<\/pre>\n\n\n\n
This is a very common for<\/code> loop so it’s a good idea to know what’s going on inside it. <\/p>\n\n\n\n
First we have an array with five values– simple enough! Then, we have our for<\/code> loop. Inside, it’s saying that var a = 0<\/code> (that’s our initialization<\/code>), then we have the condition<\/code> that we have to evaluate: a < arr.length<\/code>. It’s been a minute since we’ve seen something that looks like arr.length<\/code>, so let’s unpack it: arr.length<\/code> is the length of the array, or the number of values in it. In other words, the condition is checking if  the value for a<\/code> is less than the length of the array. We’ve got five values in the array so a<\/code> has to be less than 5. So at this point we have to ask ourselves if 0 < 5<\/code>, and it is– so then we can execute the code block.  <\/p>\n\n\n\n
The code block is asking us to look at the contents of the array and log whatever value is indexed at a<\/code>. We’ve already established that a = 0<\/code>, so we will log the value of the array at index 0<\/code>2<\/a> so the value that we will log is 7<\/code> (the first value in the array). <\/p>\n\n\n\n
Next we need to address the final-expression<\/code> statement, which asks us to add one to a<\/code>. When we do that, we update the value of a<\/code> to 1<\/code>. Now we’ll go through the condition again (1 < 5<\/code> is still true), and execute the code block again (it will return a value of 6<\/code>)3<\/a> and so on, until the condition is no longer true; in other words, until a<\/code> is no longer less than the length of the array.  Eventually, we will log the entire array (arr = [7, 6, 5, 4, 3]<\/code>) which could be really useful if we weren’t sure what was in the array. <\/p>\n\n\n\n
Sometimes you may want to iterate through the loop backwards (i.e.  back to front) instead of forwards. This is another common use of loops that you will encounter.  Let’s look at an example: <\/p>\n\n\n\n
var ourArray = [];<\/code>\n\nfor (var i = 0; i < 3; i++) {<\/code>\nourArray.push(i);<\/code>\n}<\/code><\/pre>\n\n\n\n
You will see that the initialization statement says that var i = 0<\/code> and the looping condition says that i < 3<\/code>. We can build out a variable table to help visualize this– here’s what it looks like when finished: <\/p>\n\n\n\n
ourArray<\/td>i<\/code><\/td>i < 3<\/code><\/td><\/tr>
[]<\/code><\/td>0<\/code><\/td>true<\/td><\/tr>
[0]<\/code><\/td>1<\/code><\/td>true<\/td><\/tr>
[0, 1]<\/code><\/td>2<\/code><\/td>true<\/td><\/tr>
[0, 1, 2]<\/code><\/td>3<\/code><\/td>false<\/td><\/tr><\/tbody><\/table>
A complete variable table.<\/figcaption><\/figure>\n\n\n\n
Each row on the table corresponds to an iteration of the loop: so when we start the loop the array is empty, i is 0<\/code>, and the conditional statement is true, so we’ll execute the code block by pushing 0<\/code> to the array and then incrementing i<\/code> by 1<\/code>. Now we can start the loop over again, and move through the table. <\/p>\n\n\n\n
If you look at the “i<\/code>” column on the table you can see that the order that we added our elements into the array was (0, 1, 2<\/code>), but if we’re trying to iterate through the loop backwards we will want to add them like this: (2 , 1, 0<\/code>) . If we look at the “i<\/code>” column in the variable table from last row to first, we recognize the order we actually wanted. So, we can use the same loop body (pushing i<\/code> into the array each iteration), except we’ll start with i = 3<\/code> and continued through until i = 0<\/code>, then we would have achieved our goal! Let’s look at how we can achieve that: 
<\/p>\n\n\n\n
var ourArray = [];\n  for (var i = 3; i = 0; i--) {\n  ourArray.push(i);\n}<\/pre>\n\n\n\n
Notice how our initialization condition says that i<\/code> starts at 3<\/code> instead of 0<\/code>, our looping condition says to loop until i<\/code> is equal to   0<\/code>, and we are decrementing i<\/code> instead of incrementing it. This will ultimately give us an array in descending or backward order. <\/p>\n\n\n\n
Recursion<\/h2>\n\n\n\n
Recursion is a slightly advanced programming concept that turns up in our Free Code Camp lessons.  It can be a bit frustrating to grasp, but it’s really just a function that calls itself. <\/p>\n\n\n\n
You can replace for<\/code> loops with a recursive version of the same function, which can make your code easier to read. It’s important to note that the outcome will be the same if you’re using loops or using recursion– it’s really just a more elegant. <\/p>\n\n\n\n
To give you a hand with this concept, check out A Quick Intro to Recursion in JavaScript<\/a> by our friends at Free Code Camp. <\/p>\n\n\n\n
Random Number Generators<\/h2>\n\n\n\n
Next we are going to take a look at a handy JavaScript function that we can use to generate random fractions: Math.random()<\/code>.  <\/p>\n\n\n\n
If you run a value through Math.random()<\/code> you will get a random decimal value4<\/a> between 0<\/code> (inclusive) and 1<\/code> (exclusive), meaning that the value you get from Math.random()<\/code> might be as low as 0<\/code> but will never be as high as 1<\/code>.<\/p>\n\n\n\n
With a little bit of work you can even use the random number generator function to generate random integers5<\/a>.<\/p>\n\n\n\n
To get a random number greater than 1<\/code>, you can multiply the function by an integer6<\/a>. Here’s what that would look like: Math.random() * 10<\/code>. <\/p>\n\n\n\n
The result would be a random number with a decimal that could be anything between 0<\/code> and just under 10<\/code>.7<\/a><\/p>\n\n\n\n
To convert that number into an integer, we will use the Math.floor<\/code> function, which converts the value to an integer by rounding down to the closest integer. Here’s what it would all look like put together: Math.floor(Math.random() * 10)<\/code> <\/p>\n\n\n\n
So if Math.random() * 10<\/code> was equal to 8.2<\/code>, then Math.floor(Math.random() *10)<\/code> would be equal to 8. <\/p>\n\n\n\n
Generate a Random Number from a Range<\/h3>\n\n\n\n
Lastly, we can also generate a random number that falls within a specific range. This might look a little complicated at first, but stick with it! Here’s the formula: <\/p>\n\n\n\n
Math.floor(Math.random() * (max - min + 1)) + min<\/pre>\n\n\n\n
The easiest way to get a handle on this is to see it in action. We’ll use that formula in the body of a function to generate a random number between 2<\/code> and 15<\/code>. <\/p>\n\n\n\n
function randomRange(min, max) {\nreturn Math.floor(Math.random() * (max - min + 1)) + min\n}\nvar randomNum = randomRange(2, 15)<\/pre>\n\n\n\n
Okay, so here we have a function called randomRange<\/code> that has two parameters: a min<\/code> and a max<\/code>. We want our variable randomNum<\/code> to equal the output of randomRange<\/code> when we pass the arguments 2<\/code> and 15<\/code> through the function. This will generate a random number between 2 and 15.<\/p>\n\n\n\n
Let’s walk through the rest of the function step by step. First will fill in the formula with our min and max values. <\/p>\n\n\n\n
return Math.floor(Math.random() * (15 - 2 + 1)) + 2<\/pre>\n\n\n\n
We’ll start by solving the inner most parentheses first: (15 - 2 + 1)<\/code> is equal to 14<\/code>. Math.random<\/code> will generate a random decimal– let’s say it gives us .2<\/code>. We will multiply that by 14<\/code> which gives us 2.8<\/code>.  Next we’ll use Math.floor<\/code> to turn that into an integer by rounding down, so it becomes 2<\/code>. Lastly, we will add that value to our minimum (which also happens to be 2<\/code>) to complete the function, which gives us 4<\/code>. In other words, var randomNum = 4<\/code>. <\/p>\n\n\n\n
Parsing Strings to Integers<\/h2>\n\n\n\n
The parseInt()<\/code> function allows you to turn a string into a number.8<\/a> For example: var b = parseInt(\"0028\")<\/code> would give you the number 28<\/code>. Here’s another one: var b = parseInt(\"44\")<\/code>. This converts the string \"44<\/code>” to the number 44<\/code>. <\/p>\n\n\n\n
Why might we want to do this? Remember, we can only preform mathematical operations on numbers; we can’t perform them on strings, even if the string looks like a number.<\/p>\n\n\n\n
What would happen if we try to run a string that didn’t “look like” a number through the parseInt()<\/code>? It would return NaN<\/code>, which stands for “not a number.” So, parseInt(\"bananas\")<\/code> would return NaN<\/code>. <\/p>\n\n\n\n
You’ve actually already seen examples of the parseInt()<\/code> function without even realizing it : 5==\"5\"<\/code> is true because Javascript is automatically parsing the string \"5\"<\/code> into the number 5<\/code> for you! If you want you can even parse strings which represent numbers in various different bases (beyond base 10) by passing another argument to the parseInt()<\/code> function called a radix<\/code>, though that’s a bit advanced for what we’re covering here…<\/p>\n\n\n\n
The Conditional (Ternary) Operator<\/h2>\n\n\n\n
There is a special operator in Javascript called the conditional operator – or some times the ternary operator. Do you know what unary means? It means consisting of a single element. Binary? Consisting of two elements. What about ternary? If you guessed consisting of three elements you’re right! The ternary operator takes three elements and provides one result. Here’s the syntax for a ternary operator: <\/p>\n\n\n\n
condition ? val1 : val2 <\/pre>\n\n\n\n
It can be helpful to think of the ternary operator as related to the else if<\/code> statement, because it’s ultimately doing the same thing: it’s saying if a condition is true return val 1<\/code>, else if a condition is false return val 2<\/code>. <\/p>\n\n\n\n
The condition<\/code> of a ternary statement can be any boolean statement (something that returns a boolean value). If this sounds familiar to you, it’s most likely because the ternary operator is just a short way of saying this: <\/p>\n\n\n\n
if (condition) return val1;\nelse return val2;<\/pre>\n\n\n\n
You can actually nest multiple ternary statements together so that if the first condition is false, you’ll evaluate a second condition rather than just returning a value. Here’s what that might look like: <\/p>\n\n\n\n
function findGreaterOrEqual(a, b) { \nreturn (a === b) ? \"a and b are equal\" \n  : (a > b) ? \"a is greater\" \n  : \"b is greater\"; }<\/pre>\n\n\n\n
In this example we are asking if a is strictly equal to b. If it is, we return the value “a and b are equal.” If it’s not, we look at a second condition: is a greater than b? If it is, we return “a is greater.” It’s it’s not, we return “b is greater.” <\/p>\n\n\n\n
<\/p>\n
  1. Note: we can have multiple lines of code in the body of a loop statement! Just make sure that each line ends with a semicolon.↩<\/a><\/p><\/li>
  2. Remember, we start indexing arrays at zero instead of one, because computers count from zero↩<\/a><\/p><\/li>
  3. Again, when we’re indexing arrays, we start counting at zero. So when a = 1<\/code> we’re actually looking for the second value in the array, which is 6<\/code>.↩<\/a><\/p><\/li>
  4. Also called a float value↩<\/a><\/p><\/li>
  5. Quick math refresher: whole numbers are integers. Numbers with a decimal place are not integers. I know, it’s been a minute.↩<\/a><\/p><\/li>
  6.  This is called scaling.↩<\/a><\/p><\/li>
  7.  Why couldn’t it be 10<\/code>? Because Math.random generates a decimal value that is less than 1<\/code>.↩<\/a><\/p><\/li>
  8. Remember that strings and numbers are two different data types. Strings will always be in quotation marks.↩<\/a><\/p><\/li><\/ol><\/div>","protected":false},"excerpt":{"rendered":"
    Understanding Loops Loops allow you to run the same code block multiple times until a desired result is reached. They are a kind of short hand, so that you don’t have to write the same code block over and over again. With a loop, you’re basically saying: when this condition is true, do this thing … Continue reading JavaScript 5 – FCC 20<\/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-2199","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2199","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=2199"}],"version-history":[{"count":3,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2199\/revisions"}],"predecessor-version":[{"id":3693,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/2199\/revisions\/3693"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=2199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}