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

フリーコードキャンプ

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

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

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

Introduction to the ES6 Challengesの中の、

Use Destructuring Assignment to Assign Variables from Objects

です。

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

まずは本文から。

Destructuring allows you to assign a new variable name when extracting values. You can do this by putting the new name after a colon when assigning the value.

Using the same object from the last example:

const user = { name: ‘John Doe’, age: 34 };

Here’s how you can give new variable names in the assignment:

const { name: userName, age: userAge } = user;
// userName = ‘John Doe’, userAge = 34

You may read it as “get the value of user.name and assign it to a new variable named userName” and so on.

 


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.


Passed

 

 

解説していきます。

今回は構造化を使って新しい変数名をつける方法についてです。

例をみてみましょう。

前回と同じオブジェクトを用意します。

const user = { name: ‘John Doe’, age: 34 };

これに対して、構造化を使って新しい変数名をつける書き方は以下のようになります。

const { name: userName, age: userAge } = user;
// userName = ‘John Doe’, userAge = 34

このコードを読み解くと、

「user.nameの値を取得し、userNameという名前の新しい変数に割り当てる」

「user.ageの値を取得し、userAgeという名前の新しい変数に割り当てる」

といった感じです。

 

では課題を見てみましょう。

既存のコードを構造化割り当てを使って書き直せという内容ですね。

例と見比べて書いていけばできますね。

文法なので覚えるしかないです。

 

答えはこうです。

const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};
// Only change code below this line
const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
// Only change code above this line

 

という事で今回は構造化を使って新しい変数名をつける方法について学びました。

では次回!
 

タイトルとURLをコピーしました