JavaScriptのDestructuring(分割代入)

JavaScriptのDestructuringの構文が出てきたけど何をしているのかわからない、使い方がわからないという人向けにシンプルなコードのみを使って解説を行なっています。最後まで読み通せば Destructuringの基本的な使用方法を理解することができます。

Destructuringは日本語では分割代入と訳されています。

これまでの方法

Destructuringを利用しないこれまでの方法で動作確認を行います。

userオブジェクトを作成し、userのnameとemailプロパティをそれぞれnameとemailに割り当てます。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const name = user.name
const email = user.email

console.log(name)
console.log(email)

実行すると下記のように表示されます。

John Doe
john@example.com

Destructuringを使った方法

通常の方法

上記の例を元にDestructuringを利用してみます。user.nameやuser.emailに慣れていると最初は戸惑うかもしれませんが、{ }を使ってuserオブジェクト内のnameとemailプロパティをnameとemailに割り当てることができます。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { name, email } = user

console.log(name)
console.log(email)

実行すると先ほどと全く同じ結果になります。

John Doe
john@example.com

順番を変えた場合

nameとemailの順番を変えたらどうなるのかと疑問に思う人もいるかもしれません。実際に順番を変更してどのような変化があるか確認してみましょう。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { email, name } = user　// nameとemailの順番を変更

console.log(name)
console.log(email)

結果は先ほどと同じになることがわかります。今回の動作確認で割り当てる際の名前の順番は関係ないことがわかりました。

John Doe
john@example.com

割り当ての文字列を変更した場合

次に文字列を変更したらどうなるのかと疑問に思うかと思います。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { name, mail } = user　// emailではなくmailに変更

console.log(name)
console.log(mail)

結果は変更したmailはundefinedになり値が割り当てられません。今回の動作確認でuserオブジェクトのプロパティ名と同じ名前を付けなければならないということがわかります。

John Doe
undefined

割り当ての文字列を変更したい場合

先ほどの例ではuserのemailプロパティをmailで割り当てしようとすると割り当てができないことがわかりました。どうしても割り当ての文字列を変更したい場合は以下の方法で変更することができます。

const user = {
  name: 'John Doe',
  email: 'john@example.com'
}

const { email: mail, name } = user　// emailをmailとして割り当て

console.log(name)
console.log(mail)

実行するとemailではなくmailとして割り当てができることが分かりました。

John Doe
john@example.com

オブジェクトを直接割り当て

ここまでは一度userオブジェクトを作成してその後にdestructingを使っていましたが、userオブジェクトの作成を省いても下記のように記述することができます。

const { name, email } = { name: 'John Doe', email: 'john@example.com '}

console.log(name)
console.log(email)

実行した結果はこれまでと変わりません。

John Doe
john@example.com

関数が含まれている場合

JavaScriptでは関数もオブジェクトの中に含めることができるので関数を含めた場合の動作確認も行っておきましょう。

下記ではshowNameという関数を設定していますが、 destructingでの割り当ての方法は同じです。その代わり関数を実行する場合はshowName()のように()が必要です。

const user  = {
  name: 'John Doe',
  showName() {
    console.log('Name is ' + name )
  }
}

const { name, showName } = user

console.log(name)
showName()

実行すると下記のように表示され関数も問題なく処理できることがわかります。

John Doe
Name is John Doe

ここまで読み終えば実際にDestructuringの構文を見つけても戸惑うことなく何が行われているのか理解できるはずです。