JavaScriptの分割代入・オブジェクトからプロパティを取り出す編

2021/4/8 JavaScript, プログラミング

以前　、【随時更新】JavaScriptの分割代入を具体的事例を交えてしっかりと覚えるというブログ記事を書きましたが、再び分割代入についてシンプルな例を交えてブログに記しておきたいと思います！

JavaScriptの分割代入・オブジェクトからプロパティを取り出してすっきりさせる

実際のコードを見てみましょう！

const user = {
  name:'kosuge',
  from:'埼玉'
}

const getUserData = ({name,from})=>{
  console.log(`名前は${name}`)
  console.log(`出身は${from}`)
}

getUserData(user)

このように記述すると、以下のような結果がconsoleパネルに記述されます！

名前はkosuge
出身は埼玉

ここで注目したいのがgetUserData関数の引数部分です。

旧来のJavaScriptでは、おそらく引数にそのままuseオブジェクトに相当する値を入れて、関数内でプロパティを取り出し、別変数に代入するという記述方法をしていたかと思います。

const user = {
  name:'kosuge',
  from:'埼玉'
}

const getUserData = (user)=>{
  console.log(`名前は${user.name}`)
  console.log(`出身は${user.from}`)
}

getUserData(user)

ですが、 JavaScriptの分割代入を使えば、記述を省略しすっきりさせることができるわけですね！

オブジェクトの構造がわかっていれば使うことができる記述方法になります！