Merge pull request #13414 from robbawebba/fix/reformat-es6-challenges
Reformat ES6 Challenge Descriptionspull/13475/head
Samuel Plumppu
GitHub
commit
5658256715
|
|
@ -406,29 +406,27 @@
|
|||
},
|
||||
{
|
||||
"id": "587d7b89367417b2b2512b4a",
|
||||
"title": "Nested Object Destructuring",
|
||||
"title": "Use Destructuring Assignment with Nested Objects",
|
||||
"description": [
|
||||
"We can similarly destructure nested objects",
|
||||
"We can similarly destructure <em>nested</em> objects into variables.",
|
||||
"Consider the following code:",
|
||||
"<code>const a = { start: { x: 5, y: 6}, end: { x: 6, y: -9 }};</code>",
|
||||
"<code>const { start : { x: startX, y: startY }} = a;</code>",
|
||||
"<code>console.log(startX, startY); // 5, 6</code>",
|
||||
"It pulls from the first nested object. Rest of the syntax is as it was for simple object destructuring.",
|
||||
"Instructions.",
|
||||
"Use destructuring to obtain the max of tomorrow, which should be same as forecast.tomorrow.max"
|
||||
"<blockquote>const a = {<br> start: { x: 5, y: 6},<br> end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
|
||||
"In the example above, the variable <code>start</code> is assigned the value of <code>a.start</code>, which is also an object.",
|
||||
"<hr>",
|
||||
"Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorrow</code> and assign it to <code>maxOfTomorrow</code>."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"const forecast = {",
|
||||
" today: { min: 72, max: 83},",
|
||||
" tomorrow: {min: 73.3, max: 84.6}",
|
||||
"}",
|
||||
"/* Alter code below this line */",
|
||||
"const max_of_tomorrow = undefined; // change this",
|
||||
"/* Alter code above this line */",
|
||||
"console.log(max_of_tomorrow); // should be 84.6 destructuring"
|
||||
" today: { min: 72, max: 83 },",
|
||||
" tomorrow: { min: 73.3, max: 84.6 }",
|
||||
"};",
|
||||
"// change code below this line",
|
||||
"const maxOfTomorrow = undefined; // change this line",
|
||||
"// change code above this line",
|
||||
"console.log(maxOfTomorrow); // should be 84.6"
|
||||
],
|
||||
"tests": [
|
||||
"// Test max_of_tomorrow to be 84.6",
|
||||
"// Test maxOfTomorrow to be 84.6",
|
||||
"// Test destructuring was used"
|
||||
],
|
||||
"type": "waypoint",
|
||||
|
|
@ -438,25 +436,24 @@
|
|||
},
|
||||
{
|
||||
"id": "587d7b89367417b2b2512b4b",
|
||||
"title": "Array Destructuring",
|
||||
"title": "Use Destructuring Assignment with Arrays",
|
||||
"description": [
|
||||
"We can also destructure arrays as easily as objects.",
|
||||
"One key difference between spread operator and array destructuring is that, spread operators unpack all contents of array.",
|
||||
"Consequently, you cannot pick and choose which element or set of elements you would want to assign to variables.",
|
||||
"ES6 makes destructuring arrays as easy as destructuring objects.",
|
||||
"One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick and choose which elements or you want to assign to variables.",
|
||||
"Destruring an array lets us do exactly that:",
|
||||
"<code>const [a, b] = [1, 2, 3, 4, 5, 7];</code>",
|
||||
"<code>console.log(a, b); // 1, 2</code>",
|
||||
"The variable a assumes first value, and b takes the second value from the array.",
|
||||
"You can also destructure in a way, that you can pick up values from any other array index position. You simply have to use commas (,).",
|
||||
"Instructions.",
|
||||
"Use destructuring to swap the variables a, b. Swapping is an operation, after which, a gets the value stored in b, and b receives the value stored in a"
|
||||
"<blockquote>const [a, b] = [1, 2, 3, 4, 5, 6];<br>console.log(a, b); // 1, 2</blockquote>",
|
||||
"The variable <code>a</code> is assigned the first value of the array, and <code>b</code> is assigned the second value of the array.",
|
||||
"We can also access the value at any index in an array with destructuring by using commas to reach the desired index:",
|
||||
"<blockquote>const [a, b,,, c] = [1, 2, 3, 4, 5, 6];<br>console.log(a, b, c); // 1, 2, 5 </blockquote>",
|
||||
"<hr>",
|
||||
"Use destructuring assignment to swap the values of <code>a</code> and <code>b</code> so that <code>a</code> receives the value stored in <code>b</code>, and <code>b</code> receives the value stored in <code>a</code>."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"let a = 8, b = 6;",
|
||||
"/* Alter code below this line */",
|
||||
"// change code below this line",
|
||||
"a = b;",
|
||||
"b = a;",
|
||||
"/* Alter code above this line */",
|
||||
"// change code above this line",
|
||||
"console.log(a); // should be 6",
|
||||
"console.log(b); // should be 8"
|
||||
],
|
||||
|
|
@ -472,23 +469,21 @@
|
|||
},
|
||||
{
|
||||
"id": "587d7b8a367417b2b2512b4c",
|
||||
"title": "Array Destructuring with Rest Operator",
|
||||
"title": "Use Destructuring Assignment with the Rest Operator",
|
||||
"description": [
|
||||
"There are situations with destructuring an array, where we might want to collect the rest of the elements into a separate array.",
|
||||
"Something similar to Array.prototype.slice(), as shown below:",
|
||||
"<code>const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];</code>",
|
||||
"<code>console.log(a, b); // 1, 2</code>",
|
||||
"<code>console.log(arr); // [3, 4, 5, 7]</code>",
|
||||
"The variable a assumes first value, and b takes the second value from the array. After that, because of rest operator's presence, arr gets rest of the values in the form of an array.",
|
||||
"Note that the rest element has to be the last element in the array. As in, you cannot use rest operator to catch a subarray that leaves out last element of the original array.",
|
||||
"Instructions.",
|
||||
"Use destructuring with rest operator to perform an effective Array.prototype.slice() so that variable arr is sub-array of original array source, with first two elements ommitted."
|
||||
"In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.",
|
||||
"The result is similar to <code>Array.prototype.slice()</code>, as shown below:",
|
||||
"<blockquote>const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];<br>console.log(a, b); // 1, 2<br>console.log(arr); // [3, 4, 5, 7]</blockquote>",
|
||||
"Variables <code>a</code> and <code>b</code> take the first and second values from the array. After that, because of rest operator's presence, <code>arr</code> gets rest of the values in the form of an array.",
|
||||
"The rest element only works correctly as the last variable in the list. As in, you cannot use the rest operator to catch a subarray that leaves out last element of the original array.",
|
||||
"<hr>",
|
||||
"Use destructuring assignment with the rest operator to perform an effective <code>Array.prototype.slice()</code> so that <code>arr</code> is a sub-array of the original array <code>source</code> with the first two elements ommitted."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"const source = [1,2,3,4,5,6,7,8,9,10];",
|
||||
"/* Alter code below this line */",
|
||||
"const arr = source ; // change this",
|
||||
"/* Alter code above this line */",
|
||||
"// change code below this line",
|
||||
"const arr = source; // change this",
|
||||
"// change code below this line",
|
||||
"console.log(arr); // should be [3,4,5,6,7,8,9,10]",
|
||||
"console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];"
|
||||
],
|
||||
|
|
@ -505,33 +500,30 @@
|
|||
},
|
||||
{
|
||||
"id": "587d7b8a367417b2b2512b4d",
|
||||
"title": "Destructuring Function Parameters",
|
||||
"title": "Use Destructuring Assignment on Function Parameters",
|
||||
"description": [
|
||||
"In some cases, you can destructure the object in the function argument itself.",
|
||||
"Consider the code below",
|
||||
"<code>const profileUpdate = (profileData) => {</code>",
|
||||
"<code> const { name, age, sex, nationality, location } = profileData;</code>",
|
||||
"<code> // do something with these variables</code>",
|
||||
"<code>}</code>",
|
||||
"This effectively destructure the object sent into the function. However, this can also be done in-place.",
|
||||
"const profileUpdate = ({ name, age, sex, nationality, location }) => {/* do something with these fields */}",
|
||||
"This removes some extra linees and mainly a syntactic sugar.",
|
||||
"This also has the added benefit of not having to send an entire object into a function; rather only those fields are copied that are needed inside the function.",
|
||||
"Instructions.",
|
||||
"Use destructuring within function argument to send only the max and min inside the function"
|
||||
"In some cases, you can destructure the object in a function argument itself.",
|
||||
"Consider the code below:",
|
||||
"<blockquote>const profileUpdate = (profileData) => {<br> const { name, age, nationality, location } = profileData;<br> // do something with these variables<br>}</blockquote>",
|
||||
"This effectively destructures the object sent into the function. This can also be done in-place:",
|
||||
"<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br> /* do something with these fields */<br>}</blockquote>",
|
||||
"This removes some extra lines and makes our code look neat.",
|
||||
"This has the added benefit of not having to manipulate an entire object in a function; only the fields that are needed are copied inside the function.",
|
||||
"<hr>",
|
||||
"Use destructuring assignment within the argument to the function <code>half</code> to send only <code>max</code> and <code>min</code> inside the function."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"const stats = {",
|
||||
" max: 56.78,",
|
||||
" standard_deviation: 4.34,",
|
||||
" median: 34.54,",
|
||||
" mode: 23.87,",
|
||||
" min: -0.75,",
|
||||
" average: 35.85",
|
||||
"}",
|
||||
"/* Alter code below this line */",
|
||||
" max: 56.78,",
|
||||
" standard_deviation: 4.34,",
|
||||
" median: 34.54,",
|
||||
" mode: 23.87,",
|
||||
" min: -0.75,",
|
||||
" average: 35.85",
|
||||
"};",
|
||||
"// change code below this line",
|
||||
"const half = (stats) => ((stats.max + stats.min) / 2.0); // use function argument destructurung",
|
||||
"/* Alter code above this line */",
|
||||
"// change code above this line",
|
||||
"console.log(stats); // should be object",
|
||||
"console.log(half(stats)); // should be 28.015"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue