分割代入（Destructuring）でコードを劇的にシンプルにする

by

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
blue

Reactや実務ではほぼ必須

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

分割代入のメリット

  1. コードが短くなる
  2. 可読性が上がる
  3. モダンJavaScriptらしい書き方になる
  4. React / Node / API処理でよく使われる

まとめ

分割代入は

const { name, age } = user

このように書くだけで
オブジェクトから値を取り出すことができます。

モダンJavaScriptでは非常によく使われる基本テクニックなので
ぜひ日常のコードに取り入れてみてください。

コメントする