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

フリーコードキャンプ

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

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

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

Introduction to the ES6 Challengesの中の、

Use Destructuring Assignment to Extract Values from Objects

です。

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

まずは本文から。

Destructuring assignment is special syntax introduced in ES6, for neatly assigning values taken directly from an object.

Consider the following ES5 code:

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:

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.

 


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.


 

 

解説していきます。

今回は構造化割り当てについてです。

構造化割り当てとは、オブジェクトから直接取得した値を適切に割り当てるために、ES6で導入された特別な構文です。

例をみてみましょう。

es5ではこのように書くコードがあります。

const user = { name: ‘John Doe’, age: 34 };
const name = user.name; // name = ‘John Doe’
const age = user.age; // age = 34
これを構造化割り当てを使って書くと、
const { name, age } = user;
// name = ‘John Doe’, age = 34
と書く事ができます。一つ一つ変数に割り当てる必要がなくなっていて、
とってもシンプルになりましたね!
これは、オブジェクトから必要な数だけ抽出することができます。
では課題を見ていきましょう。
構造化割り当てを使って書き直せという課題です。
例の通りやればできますね。
答えはこうです。
const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};
// Only change code below this line
const {today , tomorrow} = HIGH_TEMPERATURES;
// Only change code above this line
という事で今回は構造化割り当てについてでした。
では次回!
タイトルとURLをコピーしました