Reformat first four ES6 challenge instructions
This commit is contained in:
Brendan Sweeny
@ -36,25 +36,21 @@
|
||||
},
|
||||
{
|
||||
"id": "587d7b87367417b2b2512b3f",
|
||||
"title": "Problems with the var keyword",
|
||||
"title": "Explore Problems with the var Keyword",
|
||||
"description": [
|
||||
"One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error.",
|
||||
"<code>var camper = 'James'; </code>",
|
||||
"<code>var camper = 'David'; </code>",
|
||||
"<code>console.log(camper); </code>",
|
||||
"<code>// logs 'David'</code>",
|
||||
"In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidently overwrite a variable what you did not intend to overwrite. Without an error warning, searching and fixing bugs becomes more difficult.",
|
||||
"Another problem with the var keyword is that it is hoisted to the top of your code when it compiles. This means that you can use a variable before you declare it.",
|
||||
"<code>console.log(camper); </code>",
|
||||
"<code>var camper = 'David'; </code>",
|
||||
"<code>// logs undefined</code>",
|
||||
"The code runs in the following order: the variable camper is declared as undefined, camper is logged, and then David is assigned to camper. This code will run without an error.",
|
||||
"A new keyword was introduced in ES6 to solve the problems with the var keyword, called let. With the let keyword, all the examples we just saw will cause an error to appear. We can no longer overwrite variables or use a variable before we declare it. Some modern browsers requires you to add \"use strict\" to the top of your code before you can able to use the new features in ES6",
|
||||
"Let's try using the let keyword;",
|
||||
"Instructions",
|
||||
"Fix the code so it only uses the let keyword and make the errors go away.",
|
||||
"Note",
|
||||
"Remember to add \"use strict\" to the top of your code."
|
||||
"One of the biggest problems with declaring variables with the <code>var</code> keyword is that you can overwrite variable declarations without an error.",
|
||||
"<blockquote>var camper = 'James';<br>var camper = 'David';<br>console.log(camper);<br>// logs 'David'</blockquote>",
|
||||
"In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidently overwrite a variable that you did not intend to overwrite. Because this behaviour does not throw an error, searching and fixing bugs becomes more difficult.",
|
||||
"Another problem with the <code>var</code> keyword is that it is hoisted to the top of your code when it compiles. This means that you can use a variable before you declare it.",
|
||||
"<blockquote>console.log(camper);<br>var camper = 'David';<br>// logs undefined</blockquote>",
|
||||
"The code runs in the following order:",
|
||||
"<ol><li>The variable <code>camper</code> is declared as undefined.</li><li>The value of <code>camper</code> is logged.</li><li>David is assigned to <code>camper</code>.</li></ol>",
|
||||
"This code will run without an error.",
|
||||
"A new keyword called <code>let</code> was introduced in ES6 to solve the problems with the <code>var</code> keyword. With the <code>let</code> keyword, all the examples we just saw will cause an error to appear. We can no longer overwrite variables or use a variable before we declare it. Some modern browsers require you to add <code>\"use strict\";</code> to the top of your code before you can use the new features of ES6.",
|
||||
"Let's try using the <code>let</code> keyword.",
|
||||
"<hr>",
|
||||
"Fix the code so that it only uses the <code>let</code> keyword and makes the errors go away.",
|
||||
"<strong>Note</strong><br>Remember to add <code>\"use strict\";</code> to the top of your code."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var favorite = redNosedReindeer + \" is Santa's favorite reindeer.\";",
|
||||
@ -71,68 +67,31 @@
|
||||
},
|
||||
{
|
||||
"id": "587d7b87367417b2b2512b40",
|
||||
"title": "Scopes and the var keyword",
|
||||
"title": "Compare Scopes of the var and let Keywords",
|
||||
"description": [
|
||||
"When you declare a variable with the var keyword, it is declared globally, or locally if inside a function.",
|
||||
"The let keywords behaves in the same way, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression; its scope is limited to that block, statement, or expression.",
|
||||
"When you declare a variable with the <code>var</code> keyword, it is declared globally, or locally if declared inside a function.",
|
||||
"The <code>let</code> keyword behaves similarly, but with some extra features. When you declare a variable with the <code>let</code> keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.",
|
||||
"For example:",
|
||||
"<code>var numArray = [];</code>",
|
||||
"<code>for( var i = 0; i < 3; i++){</code>",
|
||||
"<code> numArray.push(i);</code>",
|
||||
"<code>}</code>",
|
||||
"<code>console.log(numArray)</code>",
|
||||
"<code>// returns [ 0, 1, 2 ]</code>",
|
||||
"<code>console.log(i) </code>",
|
||||
"<code>// returns 3</code>",
|
||||
"With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similiar to the following:",
|
||||
"<code>var numArray = [];</code>",
|
||||
"<code>var i ;</code>",
|
||||
"<code>for( i = 0; i < 3; i++){</code>",
|
||||
"<code> numArray.push(i);</code>",
|
||||
"<code>}</code>",
|
||||
"<code>console.log(numArray)</code>",
|
||||
"<code>// returns [ 0, 1, 2 ]</code>",
|
||||
"<code>console.log(i) </code>",
|
||||
"<code>// returns 3</code>",
|
||||
"This behavior will cause problems when you create a function, and store it for later uses, inside the for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.",
|
||||
"<code>var printNumTwo;</code>",
|
||||
"<code>for( var i = 0; i < 3; i++){</code>",
|
||||
"<code> if(i === 2){</code>",
|
||||
"<code> printNumTwo = function(){</code>",
|
||||
"<code> return i;</code>",
|
||||
"<code> }</code>",
|
||||
"<code> }</code>",
|
||||
"<code>}</code>",
|
||||
"<code>console.log(printNumTwo())</code>",
|
||||
"<code>// returns 3</code>",
|
||||
"As you can see, printNumTwo() prints 3 and not 2. This because the value to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in for loop. The let keyword does not follow this behavior;",
|
||||
"<code>'use strict'</code>",
|
||||
"<code>let printNumTwo;</code>",
|
||||
"<code>for( let i = 0; i < 3; i++){</code>",
|
||||
"<code> if(i === 2){</code>",
|
||||
"<code> printNumTwo = function(){</code>",
|
||||
"<code> return i;</code>",
|
||||
"<code> }</code>",
|
||||
"<code> }</code>",
|
||||
"<code>}</code>",
|
||||
"<code>console.log(printNumTwo())</code>",
|
||||
"<code>// returns 2</code>",
|
||||
"<code>console.log(i)</code>",
|
||||
"<code>// returns \"i is not defined\"</code>",
|
||||
"i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() was able to print the correct value because within the loop let create 3 different i varibles with their own values.",
|
||||
"Instructions",
|
||||
"Fix the code so each camper shows their correct index when they are called.",
|
||||
"Note",
|
||||
"Remember to add \"use strict\" to the top of your code."
|
||||
"<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"With the <code>var</code> keyword, <code>i</code> is declared globally. So when <code>i++</code> is executed, it updates the global variable. This code is similiar to the following:",
|
||||
"<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"This behavior will cause problems when you create a function and store it for later use inside the for loop that uses the <code>i</code> variable. This is because the stored function will always refer to the value of the updated global <code>i</code> variable.",
|
||||
"<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if(i === 2){<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
|
||||
"As you can see, <code>printNumTwo()</code> prints 3 and not 2. This is because the value assigned to <code>i</code> was updated and the <code>printNumTwo()</code> returns the global <code>i</code> and not the value <code>i</code> had when the function was created in the for loop. The <code>let</code> keyword does not follow this behavior:",
|
||||
"<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
|
||||
"<code>i</code> is not defined because it was not declared in the global scope. It is only declared within the for loop statement. <code>printNumTwo()</code> returned the correct value because three different <code>i</code> variables with unique values (0, 1, and 2) were created by the <code>let</code> keyword within the loop statement.",
|
||||
"<hr>",
|
||||
"Fix the code so that each camper returns their correct index when they are called.",
|
||||
"<strong>Note</strong><br>Remember to add <code>\"use strict\";</code> to the top of your code."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var newCampers = [{camper: \"Wil\"}, {camper: \"Sam\"},{camper: \"Dav\"}];",
|
||||
"var newCampers = [{camper: \"Wil\"}, {camper: \"Sam\"}, {camper: \"Dav\"}];",
|
||||
"// only change code below this line",
|
||||
"for( var i = 0; i < newCampers.length; i++){",
|
||||
"for (var i = 0; i < newCampers.length; i++) {",
|
||||
"// only change code above this line",
|
||||
" newCampers[i].roleCall = function(){",
|
||||
" return \"Camper # \" + (i + 1) + \" has arrived.\";",
|
||||
" };",
|
||||
" newCampers[i].roleCall = function() {",
|
||||
" return \"Camper # \" + (i + 1) + \" has arrived.\";",
|
||||
" };",
|
||||
"}",
|
||||
"// test your code",
|
||||
"console.log(newCampers[0].roleCall());",
|
||||
@ -140,9 +99,9 @@
|
||||
"console.log(newCampers[2].roleCall());"
|
||||
],
|
||||
"tests": [
|
||||
"assert(newCampers[0].roleCall() === \"Camper # 1 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the first camper\");",
|
||||
"assert(newCampers[1].roleCall() === \"Camper # 2 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the second camper\");",
|
||||
"assert(newCampers[2].roleCall() === \"Camper # 3 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the third camper\");"
|
||||
"assert(newCampers[0].roleCall() === \"Camper # 1 has arrived.\", 'message: <code>newCampers[0].call()</code> should call the index of the first camper');",
|
||||
"assert(newCampers[1].roleCall() === \"Camper # 2 has arrived.\", 'message: <code>newCampers[1].call()</code> should call the index of the second camper');",
|
||||
"assert(newCampers[2].roleCall() === \"Camper # 3 has arrived.\", 'message: <code>newCampers[2].call()</code> should call the index of the third camper');"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1,
|
||||
@ -150,32 +109,28 @@
|
||||
},
|
||||
{
|
||||
"id": "587d7b87367417b2b2512b41",
|
||||
"title": "Using the const keyword",
|
||||
"title": "Use the const Keyword",
|
||||
"description": [
|
||||
"let is not the only new way to declared variables. In ES6, you can also declare variables using the const keyword.",
|
||||
"const has all the awesome features that let has, with the added bonus that variables declared using const are read-only; they are a constant value. Which means once a variable is assigned with const, it cannot be reassigned.",
|
||||
"<code>\"use strict\"</code>",
|
||||
"<code>const FAV_PET = \"Cats\";</code>",
|
||||
"<code>FAV_PET = \"Dogs\"; // returns error</code>",
|
||||
"<code>console.log(FAV_PET);</code>",
|
||||
"As you can see, trying to reassign a constant variable will throw an error. You should always name variables you don't want to reassign using the const keyword. This helps when you accidentally reassign a variable you did not intend to reassign. A common practice is to name your constants in all upper-cases and with an underscore to separate words.",
|
||||
"Instructions",
|
||||
"Change the follow code so all variables are declared using let or const. Use let when you want the variable to change, and const when you don't. Also rename const variable to conform to common practices.",
|
||||
"Note",
|
||||
"Don't forget to use strict mode."
|
||||
"<code>let</code> is not the only new way to declare variables. In ES6, you can also declare variables using the <code>const</code> keyword.",
|
||||
"<code>const</code> has all the awesome features that <code>let</code> has, with the added bonus that variables declared using <code>const</code> are read-only. They are a constant value, which means that once a variable is assigned with <code>const</code>, it cannot be reassigned.",
|
||||
"<blockquote>\"use strict\"<br>const FAV_PET = \"Cats\";<br>FAV_PET = \"Dogs\"; // returns error</blockquote>",
|
||||
"As you can see, trying to reassign a variable declared with <code>const</code> will throw an error. You should always name variables you don't want to reassign using the <code>const</code> keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice is to name your constants in all upper-cases and with an underscore to separate words (e.g. <code>EXAMPLE_VARIABLE</code>).",
|
||||
"<hr>",
|
||||
"Change the code so that all variables are declared using <code>let</code> or <code>const</code>. Use <code>let</code> when you want the variable to change, and <code>const</code> when you want the variable to remain constant. Also, rename variables declared with <code>const</code> to conform to common practices.",
|
||||
"<strong>Note</strong><br>Don't forget to add <code>\"use strict\";</code> to the top of your code."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"// change 'var' to 'let' or 'const'",
|
||||
"// rename constant variables",
|
||||
"var pi = 3.14;",
|
||||
"var radius = 10;",
|
||||
"var calulateCircumference = function(r){",
|
||||
" var diameter = 2 * r;",
|
||||
" var result = pi * diameter;",
|
||||
" return result",
|
||||
"}",
|
||||
"var calulateCircumference = function(r) {",
|
||||
" var diameter = 2 * r;",
|
||||
" var result = pi * diameter;",
|
||||
" return result;",
|
||||
"};",
|
||||
"// Test your code",
|
||||
"console.log(calulateCircumference(radius))"
|
||||
"console.log(calulateCircumference(radius));"
|
||||
],
|
||||
"tests": [
|
||||
"// Test user replaced all var keyword",
|
||||
@ -189,29 +144,25 @@
|
||||
},
|
||||
{
|
||||
"id": "587d7b87367417b2b2512b42",
|
||||
"title": "An Immutable Object a const does not make",
|
||||
"title": "Mutate an Array Declared with const",
|
||||
"description": [
|
||||
"const has many use-cases in modern JavaScript",
|
||||
"Some developers prefer to assign all their variables as const by default, unless they know they need to reassign the value. Only in that case, they use let.",
|
||||
"But, it is to be kept in mind that objects (arrays, or functions too) assigned to a variable using const are not immutable. It only prevents reassignment of the variable. You cannot use the variable and assignment operator to point to a new value.",
|
||||
"<code>\"use strict\"</code>",
|
||||
"<code>const s = [ 5, 6, 7 ]</code>",
|
||||
"<code>s = [1, 2, 3]; // throws error, trying to assign a const</code>",
|
||||
"<code>s[7] = 45; // works just as normally as it would with a regular array s, defined with var</code>",
|
||||
"As you can see you can mutate the object itself. s still points to the array. The array s itself is not immutable, just that you cannot use the variable s to point to a different array using the assignment operator",
|
||||
"To make an object immutable, you can use Object.freeze().",
|
||||
"Instructions",
|
||||
"An array is defined as <code>const s = [5, 7, 2]</code>. Change the array to <code>[2, 5, 7]</code>.",
|
||||
"Note",
|
||||
"Don't forget to use strict mode."
|
||||
"The <code>const</code> declaration has many use-cases in modern JavaScript.",
|
||||
"Some developers prefer to assign all their variables using <code>const</code> by default, unless they know they will need to reassign the value. Only in that case, they use <code>let</code>.",
|
||||
"However, it is important to understand that objects (including arrays and functions) assigned to a variable using <code>const</code> are still mutable. Using the <code>const</code> declaration only prevents reassignment of the variable identifier.",
|
||||
"<blockquote>\"use strict\";<br>const s = [5, 6, 7];<br>s = [1, 2, 3]; // throws error, trying to assign a const<br>s[7] = 45; // works just as it would with an array declared with var</blockquote>",
|
||||
"As you can see, you can mutate the object (<code>[5, 6, 7]</code>) itself and the variable identifier (<code>s</code>) will still point to the altered array. Like all arrays, the array assigned to <code>s</code> is mutable, but because <code>const</code> was used, you cannot use the variable identifier, <code>s</code>, to point to a different array using the assignment operator.",
|
||||
"To make an object immutable, you can use <code>Object.freeze()</code>.",
|
||||
"<hr>",
|
||||
"An array is delcared as <code>const s = [5, 7, 2]</code>. Change the array to <code>[2, 5, 7]</code>.",
|
||||
"<strong>Note</strong><br>Don't forget to add <code>\"use strict\";</code> to the top of your code."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"const s = [ 5, 7, 2 ];",
|
||||
"// change code below this line",
|
||||
"s = [2, 5, 7]",
|
||||
"s = [2, 5, 7];",
|
||||
"// change code above this line",
|
||||
"// Test your code",
|
||||
"console.log(s)"
|
||||
"console.log(s);"
|
||||
],
|
||||
"tests": [
|
||||
"// Test user did not replace const keyword",
|
||||
@ -250,7 +201,7 @@
|
||||
"challengeSeed": [
|
||||
"// change code below this line",
|
||||
"var magic = function() {",
|
||||
" return new Date()",
|
||||
" return new Date();",
|
||||
"}",
|
||||
"// change code above this line",
|
||||
"// test your code",
|
||||
|
||||
Reference in New Issue
Block a user