Reduce complexity of the 'scopes with var and let' challenge

pull/13143/head
Brendan Sweeny 2017-02-04 12:00:05 -07:00
parent 7f48b58001
commit 54434beebc
1 changed files with 17 additions and 17 deletions

View File

@ -75,33 +75,33 @@
"<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.",
"This behavior will cause problems if you were to create a function and store it for later use inside a 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."
"Fix the code so that <code>i</code> declared in the if statement is a separate variable than <code>i</code> declared in the first line of the function. Be certain not to use the <code>var</code> keyword anywhere in your code.",
"<strong>Note</strong><br>Remember to add <code>\"use strict\";</code> to the top of your code.",
"This exercise is designed to illustrate the difference between how <code>var</code> and <code>let</code> keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion."
],
"challengeSeed": [
"var newCampers = [{camper: \"Wil\"}, {camper: \"Sam\"}, {camper: \"Dav\"}];",
"// only change code below this line",
"for (var i = 0; i < newCampers.length; i++) {",
"// only change code above this line",
" newCampers[i].roleCall = function() {",
" return \"Camper # \" + (i + 1) + \" has arrived.\";",
" };",
"function checkScope() {",
" var i = \"function scope\";",
" if (true) {",
" i = \"block scope\";",
" console.log(\"Block scope i is: \", i);",
" }",
" console.log(\"Function scope i is: \", i);",
" return i;",
"}",
"// test your code",
"console.log(newCampers[0].roleCall());",
"console.log(newCampers[1].roleCall());",
"console.log(newCampers[2].roleCall());"
"// only change the code above this line",
"checkScope();"
],
"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[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');"
"// TEMPORARILY COMMENTED OUT: assert(!/var/g.test(code) && /let/g.test(code), 'message: The <code>var</code> keyword should be replaced with <code>let</code>. (This test is temporarily disabled)');",
"assert(code.match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'message: The variable <code>i</code> declared in the if statement should equal \"block scope\".');",
"assert(checkScope() === \"function scope\", 'message: <code>checkScope()</code> should return \"function scope\"');"
],
"type": "waypoint",
"challengeType": 1,