【JavaScript・初学者】Reactでよく使われる頻出記法 / 分割代入について

はじめに

Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は分割代入について少し調べました。

通常の代入について

例えばあるオブジェクトがあったとして、それぞれのプロパティを変数に代入するには、このようにプロパティごとに変数を定義してあげる必要があります。

const student = {
  id: "1",
  name: "michael",
  age: 18
};

const id = student.id;
const name = student.name;
const age = student.age;

console.log(id); 
console.log(name);
console.log(age);

この場合、studentオブジェクトのプロパティが一つ増える度に、constで変数を定義しなければならなくなります。少し面倒ですね。

const student = {
  id: "1",
  name: "michael",
  age: 18,
  hobby: "baseball"
};

const id = student.id;
const name = student.name;
const age = student.age;
const hobby = student.baseball;

console.log(id); 
console.log(name);
console.log(age);
console.log(hobby);

分割代入

分割代入を使うことでよりスッキリ書くことができます。また、代入するプロパティごとに変数を宣言する必要がないので、通常の代入よりもスマートに書くことができます。
注意としては、プロパティと分割代入の変数名は合わせてあげる必要があります。

const student = {
  id: "1",
  name: "michael",
  age: 18,
  hobby: "baseball"
};

const { id,name,age,hobby } = student

console.log(id); 
console.log(name);
console.log(age);
console.log(hobby);

分割代入の特徴

初期値の設定

const student = {
  id: "1",
  name: "michael",
  age: 18,
  hobby: "baseball"
};

const { id,name,age,hobby = "" } = student

console.log(id); 
console.log(name);
console.log(age);
console.log(hobby);

分割代入の変数名を変更

先ほどプロパティと分割代入の変数名は合わせてあげる必要があると書きましたが、分割代入の宣言時に変数名を変更することもできます。

const student = {
  id: "1",
  name: "michael",
  age: 18,
  hobby: "baseball"
};

// 分割代入でidをnumberに名称変更
const {id: number,name,age} = student;

console.log(id); // エラーになる
console.log(number); // "1"と出力される
console.log(name);
console.log(age); 
console.log(hobby);

ネスト構造への分割代入

ネスト構造にも分割代入が使えます。ネストした改装分だけ{}で変数を囲みます。

const continent = {
  name: "北アメリカ",
  us: {
    name: "アメリカ合衆国",
    capitalCity: "ワシントンD.C.",
  },
};

const {
  us: { name, capitalCity },
} = continent;

console.log(name);
console.log(capitalCity);