【Use Destructuring Assignment to Assign Variables from Nested Objects】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第122弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Use Destructuring Assignment to Assign Variables from Nested Objects

です。

さっそく見ていきましょう。

まずは本文から。

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;

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.


 

解説していきます。

今回はネストされたオブジェクトから値を抽出する方法についてです。

例として、前回のようなオブジェクトを用意します。

const user = {
  johnDoe: {
    age: 34,
    email: ‘johnDoe@freeCodeCamp.com’
  }
};
オブジェクトプロパティの値を抽出し、それらを同じ名前の変数に割り当てる場合はこのように書きます。
const { johnDoe: { age, email }} = user;
次に、オブジェクトプロパティの値を異なる名前の変数に割り当てる場合はこう書きます。
const { johnDoe: { age: userAge, email: userEmail }} = user;
シンプルにネストしているだけなので感覚的にわかりやすいですね。
では課題を見てみましょう。
構造化を使って書き直せという内容です。
例を見ながら書けば特に問題なくできるかと思います。
答えはこうです。
const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
};
// Only change code below this line
const {today : {low : lowToday , high :highToday}} = LOCAL_FORECAST;
// Only change code above this line
という事で今回はネストされたオブジェクトを構造化を使って変数に割り当てる方法について学びました。
では次回!
タイトルとURLをコピーしました