はじめに
オブジェクトの分割代入を初めて学びましたので、使い方について記します。
オブジェクトにプロパティを使用した記述方法
const myprofile = {
name: "takaki",
age: 26,
};
const message1 = `私の名前は${myprofile.name}です。年齢は${myprofile.age}歳です。`;
console.log(message1);
console
私の名前はtakakiです。年齢は26歳です。
上記はオブジェクトに対し、プロパティを使用している一番見慣れている書き方ですね。
分割代入の記述方法
const myprofile = {
name: "takaki",
age: 26,
};
const { name, age } = myprofile; //オブジェクトの分割代入
const message2 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
console
私の名前はtakakiです。年齢は26歳です。
従来の書き方と違い、オブジェクトの部分を省いて記述することが可能となっています。
配列の分割代入
const myprofile = ["takaki", 26];//配列の分割代入
const message3 = `私の名前は${myprofile[0]}です。年齢は${myprofile[1]}歳です。`;
console.log(message3);
console
私の名前はtakakiです。年齢は26歳です。
配列の分割代入は変数に対し、配列を代入し出力することができます。呼び出し時には配列の要素番号を渡してあげることで呼び出すことができます。
配列の分割代入には下記のような書き方もあります。
const myprofile = ["takaki", 26];
const [name, age] = myprofile;
const message4 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message4);
console
私の名前はtakakiです。年齢は26歳です。
この記載方法では、配列で変数の値を受け取る流れになっています。注意する点は配列の中です。配列の中には好きな変数名を定義することが可能となっており、その変数名を使用して値を出力する記述方法になっております。
おわりに
分割代入の記述方法はReactでもよく記載される記述方法とされているようです。記述方法はたくさんありますが、全部しっかり覚えていきましょう。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！