From 246ca16f3282d28d042e6d8299a39fc73893b35c Mon Sep 17 00:00:00 2001 From: moT01 Date: Fri, 7 Jun 2019 10:19:03 -0500 Subject: [PATCH] fix/es6-destructuring-reword+new-lesson --- curriculum/challenges/_meta/es6/meta.json | 4 + ...n-variables-from-nested-objects.english.md | 86 +++++++++------- ...o-assign-variables-from-objects.english.md | 89 ++++++++--------- ...-to-extract-values-from-objects.english.md | 98 +++++++++++++++++++ 4 files changed, 189 insertions(+), 88 deletions(-) create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.english.md diff --git a/curriculum/challenges/_meta/es6/meta.json b/curriculum/challenges/_meta/es6/meta.json index bf1040aff0..4070b7df75 100644 --- a/curriculum/challenges/_meta/es6/meta.json +++ b/curriculum/challenges/_meta/es6/meta.json @@ -48,6 +48,10 @@ "587d7b89367417b2b2512b48", "Use the Spread Operator to Evaluate Arrays In-Place" ], + [ + "5cfa550e84205a357704ccb6", + "Use Destructuring Assignment to Extract Values from Objects" + ], [ "587d7b89367417b2b2512b49", "Use Destructuring Assignment to Assign Variables from Objects" diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md index 13594ed29c..f1cb0b11f8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md @@ -6,24 +6,36 @@ challengeType: 1 ## Description
-We can similarly destructure nested objects into variables. -Consider the following code: +You can use the same principles from the previous two lessons to destructure values from nested objects. + +Using a similar object from previous examples: ```js -const a = { - start: { x: 5, y: 6 }, - end: { x: 6, y: -9 } +const user = { + johnDoe: { + 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 startX is assigned the value of a.start.x. +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; +``` +
## Instructions
-Use destructuring assignment to obtain max of forecast.tomorrow and assign it to maxOfTomorrow. +Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables lowToday and highToday the values of today.low and tomorrow.high from the LOCAL_FORECAST object.
## Tests @@ -31,41 +43,39 @@ Use destructuring assignment to obtain max of forecast.tomorr ```yml tests: - - text: maxOfTomorrow equals 84.6 - testString: assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, 'maxOfTomorrow equals 84.6'); - - text: nested destructuring was used - 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'); - + - text: You should remove the ES5 assignment syntax. + testString: assert(!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) && !code.match(/highToday = LOCAL_FORECAST\.today.high/g)) + - text: You should use destructuring to create the lowToday variable. + 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 highToday 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)); ``` ## Challenge Seed
-
```js const LOCAL_FORECAST = { - today: { min: 72, max: 83 }, - tomorrow: { min: 73.3, max: 84.6 } + yesterday: { low: 61, high: 75 }, + today: { low: 64, high: 77 }, + tomorrow: { low: 68, high: 80 } }; -function getMaxOfTmrw(forecast) { - "use strict"; - // change code below this line - const maxOfTomorrow = undefined; // change this line - // change code above this line - return maxOfTomorrow; -} +// change code below this line + +const lowToday = LOCAL_FORECAST.today.low; +const highToday = LOCAL_FORECAST.today.high; -console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6 +// change code above this line + +console.log(lowToday); // should be 64 +console.log(highToday); // should be 77 ```
- - -
## Solution @@ -73,18 +83,18 @@ console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6 ```js const LOCAL_FORECAST = { - today: { min: 72, max: 83 }, - tomorrow: { min: 73.3, max: 84.6 } + yesterday: { low: 61, high: 75 }, + today: { low: 64, high: 77 }, + tomorrow: { low: 68, high: 80 } }; -function getMaxOfTmrw(forecast) { - "use strict"; - // change code below this line - const {tomorrow : {max : maxOfTomorrow}} = forecast; // change this line - // change code above this line - return maxOfTomorrow; -} +// change code below this line + +const { today { low: lowToday, high: highToday }} = LOCAL_FORECAST; -console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6 +// change code above this line + +console.log(highToday); // should be 77 +console.log(highTomorrow); // should be 80 ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.english.md index b8d187bc55..838021ae76 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.english.md @@ -6,35 +6,27 @@ challengeType: 1 ## Description
-We saw earlier how spread operator can effectively spread, or unpack, the contents of the array. -We can do something similar with objects as well. Destructuring assignment is special syntax for neatly assigning values taken directly from an object to variables. -Consider the following ES5 code: +Destructuring allows you to assign a new variable name when extracting values by putting the new name after a colon when assigning the value. + +Using the same object from the last example: ```js -var voxel = { x: 3.6, y: 7.4, z: 6.54 }; -var x = voxel.x; // x = 3.6 -var y = voxel.y; // y = 7.4 -var z = voxel.z; // z = 6.54 +const user = { name: 'John Doe', age: 34 }; ``` -Here's the same assignment statement with ES6 destructuring syntax: +Here's how you can give new variable names in the assignment: ```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 voxel.x into a, voxel.y into b, and voxel.z into c, you have that freedom as well. - -```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 x and copy the value into a," and so on. +You may read it as "get the field name and copy the value into userName" and so on.
## Instructions
-Use destructuring to obtain the average temperature for tomorrow from the input object AVG_TEMPERATURES, and assign value with key tomorrow to tempOfTomorrow in line. +Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables highToday and highTomorrow the values of today and tomorrow from the HIGH_TEMPERATURES object.
## Tests @@ -42,62 +34,59 @@ Use destructuring to obtain the average temperature for tomorrow from the input ```yml tests: - - text: getTempOfTmrw(AVG_TEMPERATURES) should be 79 - testString: assert(getTempOfTmrw(AVG_TEMPERATURES) === 79); - - text: destructuring with reassignment was used - testString: getUserInput => assert(code.match(/{[\S\s]*\w+\s*:[\S\s]*\w+\s*}\s*=\s*(avgTemperatures|AVG_TEMPERATURES)/)); - - text: The key tomorrow was destructured from AVG_TEMPERATURES - testString: getUserInput => assert(code.match(/{[\S\s]*tomorrow\s*:\s*tempOfTomorrow[\S\s]*}\s*=\s*(avgTemperatures|AVG_TEMPERATURES)/)); - + - text: You should remove the ES5 assignment syntax. + testString: assert(!code.match(/highToday = HIGH_TEMPERATURES\.today/g) && !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g)) + - text: You should use destructuring to create the highToday variable. + testString: assert(code.match(/(var|const|let)\s*{\s*(today:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES/g)); + - text: You should use destructuring to create the highTomorrow variable. + testString: assert(code.match(/(var|const|let)\s*{\s*(tomorrow:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES/g)); ``` ## Challenge Seed
-
```js -const AVG_TEMPERATURES = { - today: 77.5, - tomorrow: 79 +const HIGH_TEMPERATURES = { + yesterday: 75, + today: 77, + tomorrow: 80 }; -function getTempOfTmrw(avgTemperatures) { - "use strict"; - // change code below this line - const tempOfTomorrow = undefined; // change this line - // change code above this line - return tempOfTomorrow; -} +// change code below this line + +const highToday = HIGH_TEMPERATURES.today; +const highTomorrow = HIGH_TEMPERATURES.tomorrow; -console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79 +// change code above this line + +console.log(yesterday) // should be not defined +console.log(highToday); // should be 77 +console.log(highTomorrow); // should be 80 ```
- - -
## Solution
```js -const AVG_TEMPERATURES = { - today: 77.5, - tomorrow: 79 +const HIGH_TEMPERATURES = { + yesterday: 75, + today: 77, + tomorrow: 80 }; -function getTempOfTmrw(avgTemperatures) { - "use strict"; - // change code below this line - const {tomorrow:tempOfTomorrow} = avgTemperatures; // change this line - // change code above this line - return tempOfTomorrow; -} +// change code below this line + +const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES; -console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79 +// change code above this line + +console.log(highToday); // should be 77 +console.log(highTomorrow); // should be 80 ```
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.english.md new file mode 100644 index 0000000000..d4403e8b11 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.english.md @@ -0,0 +1,98 @@ +--- +id: 5cfa550e84205a357704ccb6 +title: Use Destructuring Assignment to Extract Values from Objects +challengeType: 1 +--- + +## Description +
+Destructuring assignment 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 name and age variables will be created and assigned the values of their respective values from the user object. You can see how much cleaner this is. + +You can extract as many or few values from the object as you want. +
+ +## Instructions +
+Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables today and tomorrow the values of today and tomorrow from the HIGH_TEMPERATURES object. +
+ +## 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 today 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 tomorrow variable. + testString: assert(code.match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES/g)); +``` + +
+ +## Challenge 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 +``` + +
+
+ +## 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 +``` +