JavaScriptでは**分割代入（Destructuring）**を使うことでオブジェクトや配列から値を簡単に取り出すことができます。
このテクニックを使うと
- コードが短くなる
- 可読性が上がる
- 実務コードがモダンになる
というメリットがあります。
従来の書き方
例えば次のオブジェクトがあるとします。
const user = {
name: "Taro",
age: 30,
country: "Japan"
}従来はこのように書きます。
const name = user.name
const age = user.age
const country = user.country変数が増えると少し面倒です。
分割代入を使う
そこで使うのが Destructuring です。
const { name, age, country } = userこれだけで
name
age
countryの3つの変数が作られます。
コードがかなりスッキリします。
変数名を変更する
分割代入では変数名を変更することも可能です。
const { name: userName, age: userAge } = user結果
userName = "Taro"
userAge = 30デフォルト値を設定
値が存在しない場合のデフォルト値も設定できます。
const { name, age, city = "Tokyo" } = user結果
city = "Tokyo"配列でも使える
配列でも使えます。
const colors = ["red", "blue", "green"]
const [first, second] = colors
console.log(first)
console.log(second)結果
red
blueReactや実務ではほぼ必須
Reactやフロントエンドではかなり使われます。
const user = {
id: 1,
name: "Taro",
email: "test@test.com"
}
function showUser({ name, email }) {
console.log(name)
console.log(email)
}
showUser(user)引数で直接分割することもできます。
ネストしたオブジェクト
ネストしたオブジェクトにも対応できます。
const user = {
profile: {
name: "Taro",
age: 30
}
}
const {
profile: { name, age }
} = user分割代入のメリット
- コードが短くなる
- 可読性が上がる
- モダンJavaScriptらしい書き方になる
- React / Node / API処理でよく使われる
まとめ
分割代入は
const { name, age } = userこのように書くだけでオブジェクトから値を取り出すことができます。
モダンJavaScriptでは非常によく使われる基本テクニックなので
ぜひ日常のコードに取り入れてみてください。