logo 公式Webサイト

パワフルな
ブログ

JavaScriptオブジェクトの分割代入を簡単に理解!【js】

2024年3月14日

普段からjsを用いた制作や開発を行わない場合、分割代入ってなんだっけ?
となります。
名前は難しそうですが、とても簡単なので紹介させて頂きます。

何に使う?

基本的には取得したオブジェクトの更新などに使用することが多いです。
例えばJsonで取得したオブジェクトのプロパティを変数に保管して、その変数に対し違う値を代入してあげる、などといった感じですね。

分割代入って何?

オブジェクトに存在しているプロパティを変数に入れてあげる事です。

どうやる?

まずオブジェクトを用意してあげます。

const testObj = {
  name:"taro",
  age:25,
  job:"developer"
}

このように定義したオブジェクトのnameと、ageプロパティを変数として扱いたい、そうなったときに下記「分割代入」を用います

//先ほど定義したオブジェクト
const testObj = {
  name:"taro",
  age:25,
  job:"developer"
}
//name変数とage変数に各種プロパティの値が取得されます
const { name , age } = testObj;

この処理によって、name変数とage変数が用意され、その中には先ほど定義したオブジェクト(testObj)のnameプロパティとageプロパティの値が代入されています。
追加したnama変数=nameプロパティの値
追加したage変数=ageプロパティの値
といったイメージになります。

入れる変数の名前をプロパティの名前と違うものにしたい!

あまりこういうケースに遭遇したことがないのですが、違う変数として代入することも可能です。
取得したいプロパティ名:代入したい変数名
といったイメージです。

//先ほど定義したオブジェクト
const testObj = {
  name:"taro",
  age:25,
  job:"developer"
}

const { name:nameVar , age:ageVar } = testObj;

console.log(nameVar,ageVar);
//taro 25と出力されます

これで任意の変数名に入れたいプロパティの値を入れることができました!
あとは、その変数の内容をどうするのかはあなた次第となります!