JavaScriptの分割代入（オブジェクト）入門｜プロパティを変数に取り出す方法

const user = {
  name: '田中太郎',
  age: 30,
  email: 'tanaka@example.com',
  city: '東京'
};

// 基本的な分割代入
const { name, age, email } = user;
console.log(name);
console.log(age);
console.log(email);

// 必要なプロパティだけ取り出せる（cityは取り出していない）
// 順番は関係ない（プロパティ名で対応する）
const { city, name: userName } = user;
console.log(city);
console.log(userName);

田中太郎
30
tanaka@example.com
東京
田中太郎

const product = {
  product_name: 'ノートパソコン',
  price: 98000
};

// リネーム：product_name を name という変数で受け取る
const { product_name: name2, price } = product;
console.log(name2);
console.log(price);

// デフォルト値
const config = { theme: 'dark' };
const { theme, language = 'ja', fontSize = 14 } = config;
console.log(theme);
console.log(language);   // 存在しないのでデフォルト値
console.log(fontSize);   // 存在しないのでデフォルト値

// リネームとデフォルト値の組み合わせ
const { color: textColor = 'black' } = config;
console.log(textColor);

ノートパソコン
98000
dark
ja
14
black

const response = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: '鈴木花子',
      address: {
        prefecture: '大阪府',
        city: '大阪市'
      }
    },
    token: 'abc123'
  }
};

// ネストした分割代入
const {
  status,
  data: {
    user: { name: userName2, address: { prefecture } },
    token
  }
} = response;

console.log(status);
console.log(userName2);
console.log(prefecture);
console.log(token);

200
鈴木花子
大阪府
abc123

// 関数の引数でオブジェクトを分割代入
function createUser({ name, age, role = '一般' }) {
  console.log(name + ' (' + age + '歳) - ' + role);
}

createUser({ name: '高橋', age: 25, role: '管理者' });
createUser({ name: '山田', age: 22 });

// オプション引数のパターン
function setupApp({ debug = false, port = 3000, host = 'localhost' } = {}) {
  console.log('サーバー起動: ' + host + ':' + port);
  console.log('デバッグモード:', debug);
}

setupApp({ port: 8080, debug: true });
setupApp();  // すべてデフォルト値

// 残余プロパティ（rest）
const { id, ...others } = { id: 1, name: '佐藤', age: 28, city: '福岡' };
console.log('ID:', id);
console.log('その他:', others);

高橋 (25歳) - 管理者
山田 (22歳) - 一般
サーバー起動: localhost:8080
デバッグモード: true
サーバー起動: localhost:3000
デバッグモード: false
ID: 1
その他: { name: '佐藤', age: 28, city: '福岡' }