freeCodeCamp/use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md at 9886cf7ca2f9e99c97ab9530295926b064840abd

gaspersic/freeCodeCamp

Fork 0

Files

.github

api-server

client

config

curriculum

challenges

_meta

arabic

chinese

english

01-responsive-web-design

02-javascript-algorithms-and-data-structures

basic-algorithm-scripting

basic-data-structures

basic-javascript

debugging

es6

compare-scopes-of-the-var-and-let-keywords.english.md

complete-a-promise-with-resolve-and-reject.english.md

create-a-javascript-promise.english.md

create-a-module-script.english.md

create-an-export-fallback-with-export-default.english.md

create-strings-using-template-literals.english.md

declare-a-read-only-variable-with-the-const-keyword.english.md

explore-differences-between-the-var-and-let-keywords.english.md

handle-a-fulfilled-promise-with-then.english.md

handle-a-rejected-promise-with-catch.english.md

import-a-default-export.english.md

mutate-an-array-declared-with-const.english.md

prevent-object-mutation.english.md

reuse-javascript-code-using-import.english.md

set-default-parameters-for-your-functions.english.md

use--to-import-everything-from-a-file.english.md

use-arrow-functions-to-write-concise-anonymous-functions.english.md

use-class-syntax-to-define-a-constructor-function.english.md

use-destructuring-assignment-to-assign-variables-from-arrays.english.md

use-destructuring-assignment-to-assign-variables-from-nested-objects.english.md

use-destructuring-assignment-to-assign-variables-from-objects.english.md

use-destructuring-assignment-to-extract-values-from-objects.english.md

use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.english.md

use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.english.md

use-export-to-share-a-code-block.english.md

use-getters-and-setters-to-control-access-to-an-object.english.md

use-the-rest-parameter-with-function-parameters.english.md

use-the-spread-operator-to-evaluate-arrays-in-place.english.md

write-arrow-functions-with-parameters.english.md

write-concise-declarative-functions-with-es6.english.md

write-concise-object-literal-declarations-using-object-property-shorthand.english.md

functional-programming

intermediate-algorithm-scripting

javascript-algorithms-and-data-structures-projects

object-oriented-programming

regular-expressions

03-front-end-libraries

04-data-visualization

05-apis-and-microservices

06-information-security-and-quality-assurance

08-coding-interview-prep

09-certificates

portuguese

russian

spanish

schema

test

.babelrc

.editorconfig

.npmignore

.travis.yml

CHANGELOG.md

LICENSE.md

commitizen.config.js

commitlint.config.js

create-challenge-bundle.js

getChallenges.js

gulpfile.js

index.js

lib.js

md-translation.js

package-entry.js

package-lock.json

package.json

utils.js

docs

search-indexing

tools

utils

.editorconfig

.eslintignore

.eslintrc.json

.gitattributes

.gitignore

.gitpod.yml

.node-inspectorrc

.prettierignore

.prettierrc

.snyk

.travis.yml

.vcmrc

CODE_OF_CONDUCT.md

CONTRIBUTING.md

Dockerfile.tests

LICENSE.md

README.md

SECURITY.md

change_volumes_owner.sh

docker-compose-shared.yml

docker-compose.tests.yml

docker-compose.yml

lerna.json

libcimp_index_js.patch

package-lock.json

package.json

patch_npm_and_install.sh

sample.env

Randell Dawson 568f00e02a fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558 )

2019-08-05 22:14:37 +05:30

2.7 KiB

Raw Blame History

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
587d7b89367417b2b2512b4a	Use Destructuring Assignment to Assign Variables from Nested Objects	1	301214

Description

You can use the same principles from the previous two lessons to destructure values from nested objects.

Using an object similar to previous examples:

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@freeCodeCamp.com'
  }
};

Here's how to extract the values of object properties and assign them to variables with the same name:

const { johnDoe: { age, email }} = user;

And here's how you can assign an object properties' values to variables with different names:

const { johnDoe: { age: userAge, email: userEmail }} = user;

Instructions

Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables lowToday and highToday the values of today.low and today.high from the LOCAL_FORECAST object.

Tests

tests:
  - 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 <code>lowToday</code> 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(;|\s+|\/\/)/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(;|\s+|\/\/)/g));

Challenge Seed

const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
};

// change code below this line
  
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

Solution

const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
};

// change code below this line
  
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

2.7 KiB Raw Blame History