ワンランク上のJavaScriptエンジニアになった気がするTip

はじめに

JavaScript初心者の僕が脱初心者を目指して身に付けた知見を随時更新する記事第一弾です。

JavaScript初心者の同志は一緒に勉強しましょう。

オブジェクトを展開して変数に定義する方法

JavaScript初学者の皆さん、下記のような記述を目にしたことはありますか？

const { name, age } = person

僕も、この{}なんやねん！

ググろうにも、なんてググったらいいかわからない。。

って思って避けてた矢先、先輩エンジニアの方にコードレビューで指摘されたので、

いい機会なので学び直してみました。

これってつまりこういうことなんです。

const person = {
  name: 'hogehoge',
  age: 22
}

上記のようなオブジェクトがあったとして、

nameの値を持った変数とageの値を持った変数をそれぞれ定義したいとします。

そんな時、我々初学者は、下記のようにコードを書くと思います。

const name = person.name
const age = person.age

でも違うんです。

ワンランク上のJavaScriptエンジニアになるためにはこう書きましょう。

const { name, person } = person

。。いかがでしょう！このスマートな記述！

なんだか自分ができるエンジニアになったような気がしてきませんか？

これができると何がすごいの？って感じかもしれませんが、いろんなところで真価を発揮します。

例えば、Reactで親コンポーネントから子コンポーネントにpropsで値を渡す時、

親コンポーネントで以下のようにnameをいう値を渡したとします。

const app  = () => {
  return {
    <div>
      <Person name="hogehoge" />
    </div>
  }
}

親コンポーネントから受け取った値を、子コンポーネントで描画します。

const Person = (props) => {
  return {
    <div>
      <p>私の名前は、{ props.name }です。</p>
    </div>
  }
}

子コンポーネントで受け取ったpropsは、オブジェクトで値が渡ってきます。

今回のコードでのpropsの実態は、下記の通りです。

const props = {
  name: "hogehoge"
}

つまり、今回紹介したワンランク上のJavaScriptエンジニアになるためのTipsを使うことで子コンポーネントもすっきりと書くことができます。

const Person = ({ name }) => {
  return {
    <div>
      <p>私の名前は、{ name }です。</p>
    </div>
  }
}

どうでしょう。

これだけでできるエンジニアっぽくないですか。。？（気がするだけ）

おわりに

色々できるJavaScript最高。