gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix/es6-destructuring-reword+new-lesson

Browse Source
This commit is contained in:
moT01 2019-06-07 10:19:03 -05:00 committed by Kristofer Koishigawa
parent 89b96e8c52
commit 246ca16f32
4 changed files with 189 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/_meta/es6/meta.json
View File

@ -48,6 +48,10 @@
"587d7b89367417b2b2512b48", "587d7b89367417b2b2512b48",
"Use the Spread Operator to Evaluate Arrays In-Place" "Use the Spread Operator to Evaluate Arrays In-Place"
], ],
[
"5cfa550e84205a357704ccb6",
"Use Destructuring Assignment to Extract Values from Objects"
],
[ [
"587d7b89367417b2b2512b49", "587d7b89367417b2b2512b49",
"Use Destructuring Assignment to Assign Variables from Objects" "Use Destructuring Assignment to Assign Variables from Objects"

82
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md
View File

@ -6,24 +6,36 @@ challengeType: 1
## Description ## Description
<section id='description'> <section id='description'>
We can similarly destructure <em>nested</em> objects into variables. You can use the same principles from the previous two lessons to destructure values from nested objects.
Consider the following code:
Using a similar object from previous examples:
```js ```js
const a = { const user = {
start: { x: 5, y: 6 }, johnDoe: {
end: { x: 6, y: -9 } age: 34,
email: 'johnDoe@freeCodeCamp.com'
}
}; };
const { start: { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6
``` ```
In the example above, the variable <code>startX</code> is assigned the value of <code>a.start.x</code>. Here's how to extract the values into variables with the same name as they have in the object:
```js
const { johnDoe: { age, email }} = user;
```
And here's how you can assign new variable names when destructuring a nested object like this:
```js
const { johnDoe: { age: userAge, email: userEmail }} = user;
```
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorrow</code> and assign it to <code>maxOfTomorrow</code>. Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables <code>lowToday</code> and <code>highToday</code> the values of <code>today.low</code> and <code>tomorrow.high</code> from the <code>LOCAL_FORECAST</code> object.
</section> </section>
## Tests ## Tests
@ -31,41 +43,39 @@ Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorr
```yml ```yml
tests: tests:
- text: <code>maxOfTomorrow</code> equals <code>84.6</code> - text: You should remove the ES5 assignment syntax.
testString: assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, '<code>maxOfTomorrow</code> equals <code>84.6</code>'); testString: assert(!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) && !code.match(/highToday = LOCAL_FORECAST\.today.high/g))
- text: nested destructuring was used - text: You should use destructuring to create the <code>lowToday</code> variable.
testString: getUserInput => assert(getUserInput('index').match(/\{\s*tomorrow\s*:\s*\{\s*max\s*:\s*maxOfTomorrow\s*\}\s*\}\s*=\s*forecast/g),'nested destructuring was used'); testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST/g));
- text: You should use destructuring to create the <code>highToday</code> variable.
testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST/g));
``` ```
</section> </section>
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='js-seed'> <div id='js-seed'>
```js ```js
const LOCAL_FORECAST = { const LOCAL_FORECAST = {
today: { min: 72, max: 83 }, yesterday: { low: 61, high: 75 },
tomorrow: { min: 73.3, max: 84.6 } today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
}; };
function getMaxOfTmrw(forecast) {
"use strict";
// change code below this line // change code below this line
const maxOfTomorrow = undefined; // change this line
// change code above this line
return maxOfTomorrow;
}
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6 const lowToday = LOCAL_FORECAST.today.low;
const highToday = LOCAL_FORECAST.today.high;
// change code above this line
console.log(lowToday); // should be 64
console.log(highToday); // should be 77
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
@ -73,18 +83,18 @@ console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
```js ```js
const LOCAL_FORECAST = { const LOCAL_FORECAST = {
today: { min: 72, max: 83 }, yesterday: { low: 61, high: 75 },
tomorrow: { min: 73.3, max: 84.6 } today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
}; };
function getMaxOfTmrw(forecast) {
"use strict";
// change code below this line // change code below this line
const {tomorrow : {max : maxOfTomorrow}} = forecast; // change this line
// change code above this line
return maxOfTomorrow;
}
console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6 const { today { low: lowToday, high: highToday }} = LOCAL_FORECAST;
// change code above this line
console.log(highToday); // should be 77
console.log(highTomorrow); // should be 80
``` ```
</section> </section>

85
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.english.md
View File

@ -6,35 +6,27 @@ challengeType: 1
## Description ## Description
<section id='description'> <section id='description'>
We saw earlier how spread operator can effectively spread, or unpack, the contents of the array. Destructuring allows you to assign a new variable name when extracting values by putting the new name after a colon when assigning the value.
We can do something similar with objects as well. <dfn>Destructuring assignment</dfn> is special syntax for neatly assigning values taken directly from an object to variables.
Consider the following ES5 code: Using the same object from the last example:
```js ```js
var voxel = { x: 3.6, y: 7.4, z: 6.54 }; const user = { name: 'John Doe', age: 34 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54
``` ```
Here's the same assignment statement with ES6 destructuring syntax: Here's how you can give new variable names in the assignment:
```js ```js
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54 const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34
``` ```
If instead you want to store the values of <code>voxel.x</code> into <code>a</code>, <code>voxel.y</code> into <code>b</code>, and <code>voxel.z</code> into <code>c</code>, you have that freedom as well. You may read it as "get the field <code>name</code> and copy the value into <code>userName</code>" and so on.
```js
const { x: a, y: b, z: c } = voxel; // a = 3.6, b = 7.4, c = 6.54
```
You may read it as "get the field <code>x</code> and copy the value into <code>a</code>," and so on.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Use destructuring to obtain the average temperature for tomorrow from the input object <code>AVG_TEMPERATURES</code>, and assign value with key <code>tomorrow</code> to <code>tempOfTomorrow</code> in line. Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables <code>highToday</code> and <code>highTomorrow</code> the values of <code>today</code> and <code>tomorrow</code> from the <code>HIGH_TEMPERATURES</code> object.
</section> </section>
## Tests ## Tests
@ -42,62 +34,59 @@ Use destructuring to obtain the average temperature for tomorrow from the input
```yml ```yml
tests: tests:
- text: <code>getTempOfTmrw(AVG_TEMPERATURES)</code> should be <code>79</code> - text: You should remove the ES5 assignment syntax.
testString: assert(getTempOfTmrw(AVG_TEMPERATURES) === 79); testString: assert(!code.match(/highToday = HIGH_TEMPERATURES\.today/g) && !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g))
- text: destructuring with reassignment was used - text: You should use destructuring to create the <code>highToday</code> variable.
testString: getUserInput => assert(code.match(/{[\S\s]*\w+\s*:[\S\s]*\w+\s*}\s*=\s*(avgTemperatures|AVG_TEMPERATURES)/)); testString: assert(code.match(/(var|const|let)\s*{\s*(today:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES/g));
- text: The key <code>tomorrow</code> was destructured from <code>AVG_TEMPERATURES</code> - text: You should use destructuring to create the <code>highTomorrow</code> variable.
testString: getUserInput => assert(code.match(/{[\S\s]*tomorrow\s*:\s*tempOfTomorrow[\S\s]*}\s*=\s*(avgTemperatures|AVG_TEMPERATURES)/)); testString: assert(code.match(/(var|const|let)\s*{\s*(tomorrow:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES/g));
``` ```
</section> </section>
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='js-seed'> <div id='js-seed'>
```js ```js
const AVG_TEMPERATURES = { const HIGH_TEMPERATURES = {
today: 77.5, yesterday: 75,
tomorrow: 79 today: 77,
tomorrow: 80
}; };
function getTempOfTmrw(avgTemperatures) {
"use strict";
// change code below this line // change code below this line
const tempOfTomorrow = undefined; // change this line
// change code above this line
return tempOfTomorrow;
}
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79 const highToday = HIGH_TEMPERATURES.today;
const highTomorrow = HIGH_TEMPERATURES.tomorrow;
// change code above this line
console.log(yesterday) // should be not defined
console.log(highToday); // should be 77
console.log(highTomorrow); // should be 80
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
const AVG_TEMPERATURES = { const HIGH_TEMPERATURES = {
today: 77.5, yesterday: 75,
tomorrow: 79 today: 77,
tomorrow: 80
}; };
function getTempOfTmrw(avgTemperatures) {
"use strict";
// change code below this line // change code below this line
const {tomorrow:tempOfTomorrow} = avgTemperatures; // change this line
// change code above this line
return tempOfTomorrow;
}
console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79 const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
// change code above this line
console.log(highToday); // should be 77
console.log(highTomorrow); // should be 80
``` ```
</section> </section>

98
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.english.md Normal file
View File

@ -0,0 +1,98 @@
---
id: 5cfa550e84205a357704ccb6
title: Use Destructuring Assignment to Extract Values from Objects
challengeType: 1
---
## Description
<section id='description'>
<dfn>Destructuring assignment</dfn> is special syntax introduced in ES6, for neatly assigning values taken directly from an object.
Consider the following ES5 code:
```js
const user = { name: 'John Doe', age: 34 };
const name = user.name; // name = 'John Doe'
const age = user.age; // age = 34
```
Here's an equivalent assignment statement using the ES6 destructuring syntax:
```js
const { name, age } = user;
// name = 'John Doe', age = 34
```
Here, the <code>name</code> and <code>age</code> variables will be created and assigned the values of their respective values from the <code>user</code> object. You can see how much cleaner this is.
You can extract as many or few values from the object as you want.
</section>
## Instructions
<section id='instructions'>
Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables <code>today</code> and <code>tomorrow</code> the values of <code>today</code> and <code>tomorrow</code> from the <code>HIGH_TEMPERATURES</code> object.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should remove the ES5 assignment syntax.
testString: assert(!code.match(/today = HIGH_TEMPERATURES\.today/g) && !code.match(/tomorrow = HIGH_TEMPERATURES\.tomorrow/g))
- text: You should use destructuring to create the <code>today</code> variable.
testString: assert(code.match(/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES/g));
- text: You should use destructuring to create the <code>tomorrow</code> variable.
testString: assert(code.match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES/g));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
// change code below this line
const today = HIGH_TEMPERATURES.today;
const tomorrow = HIGH_TEMPERATURES.tomorrow;
// change code above this line
console.log(yesterday) // should be not defined
console.log(today); // should be 77
console.log(tomorrow); // should be 80
```
</div>
</section>
## Solution
<section id='solution'>
```js
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
// change code below this line
const { today, tomorrow } = HIGH_TEMPERATURES;
// change code above this line
console.log(yesterday) // should be not defined
console.log(today); // should be 77
console.log(tomorrow); // should be 80
```
</section>