JavaScriptのDestructuring Assignment(分割代入)をマスター!
JavaScriptのDestructuring Assignment(分割代入)の構文(const {name, email} = user)が出てきたけど何をしているのかわからない、使い方がわからないという人向けにシンプルなコードのみを使って分割代入について解説を行なっています。最後まで読み通せば Destructuring Assignment(分割代入)の基本的な使用方法を理解することができます。
Destructuring Assignmentは日本語では分割代入と訳されています。
目次
これまでの方法
Destructuring Assignmentを利用しないこれまでの方法で動作確認を行います。
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 Assignmentを使った方法
通常の方法
上記の例を元にDestructuring Assignmentを利用してみます。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
取り出す値が少ない場合
オブジェクトのプロパティの数とDestructuring Assignmentを利用して取り出す数が異なっても問題ありません。userオブジェクトの中から必要なプロパティの値のみ取り出すことができます。
const user = {
name: 'John Doe',
email: 'john@example.com',
password: 'abcdefg'
}
const { name, email } = user
console.log(name)
console.log(email)
順番を変えた場合
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 assginmentを使っていましたが、userオブジェクトの作成を省いても下記のように記述することができます。
const { name, email } = { name: 'John Doe', email: 'john@example.com ', password: 'abcdefg'}
console.log(name)
console.log(email)
実行した結果はこれまでと変わりません。
John Doe
john@example.com
関数が含まれている場合
JavaScriptでは関数もオブジェクトの中に含めることができるので関数を含めた場合の動作確認も行っておきましょう。
下記ではshowNameという関数を設定していますが、 destructing assignmentでの割り当ての方法は同じです。その代わり関数を実行する場合は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
restオブジェクトを利用
オブジェクトの一部のプロパティのみ指定して割り当て、それ以外のプロパティを…restとして割り当てることができます。
const user = {
name: 'John Doe',
email: 'john@example.com',
age: 20,
};
const { name, ...rest } = user;
console.log(name);
console.log(rest);
実行するとnameで指定したプロパティとそれ以外のプロパティの値が下記のように表示されます。
John Doe
{ email: 'john@example.com', age: 20 }
…restで指定したrestは任意の名前を設定することができるので…aaaなどの名前を設定することも可能です。
配列の展開
下記のように配列の中のにユーザに関する複数の情報が含まれており、その中からemailだ割り当てたい場合には下記のように行うことができます。
const users = [
{
name: 'John Doe',
email: 'john@example.com',
age: 20,
},
{
name: 'Jane Doe',
email: 'jane@example.com',
age: 19,
},
];
for (let { email } of users) {
console.log(email);
}
実行するとメールアドレスのみ表示することができました。
john@example.com
jane@example.com
emailのみではなくnameも割り当てたい場合は下記のように実行することができます。
for (let { name, email } of users) {
console.log(`${name}のメールアドレスは${email}`);
}
John Doeのメールアドレスはjohn@example.com
Jane Doeのメールアドレスはjane@example.com
ネスト化したオブジェクトでの利用
ネスト化したオブジェクトでの利用方法を確認します。下記のようなオブジェクトがある場合にaddressの情報を取得したい場合は下記のように行えることはこれまでの動作確認から理解できると思います。
const user = {
name: 'John Doe',
email: 'john@example.com',
age: 20,
address: {
zipcode: '92101',
state: 'CA',
city: 'San Diego',
},
};
const { address } = user;
console.log(address);
実行するとaddressの情報を取得することができます。
{ zipcode: '92101', state: 'CA', city: 'San Diego' }
addressの中のcityのみ取得したい場合は下記のよう記述することができます。
const {
address: { city },
} = user;
console.log(city);
実行するとcityのみ取り出すことができました。
San Diego
nameプロパティも一緒に取り出したい場合は以下のように記述できます。
const {
name,
address: { city },
} = user;
console.log(`${name}は${city}に住んでいます`);
実行の結果は下記の通りです。
John DoeはSan Diegoに住んでいます
Destructuringを利用しない場合は下記のように記述できます。
console.log(user.address.city);
//結果
San Diego
ここまで読み終えば実際にDestructuring Assignmentの構文を見つけても戸惑うことなく何が行われているのか理解できるはずです。