當我們使用 JavaScript 開發應用程式時，幾乎每天都會處理大量的物件（Object）資料。
無論是設定 API 請求、建立表單資料、設計元件的 props，這些物件常常需要由變數組成：
const name = '小明';
const age = 18;
const user = {
name: name,
age: age,
};在這種情況下，name: name 的寫法既重複又冗長。JavaScript ES6 引入的「Object Shorthand」語法，讓我們可以這樣寫：
const user = {
name,
age,
};是不是清爽很多？這種寫法不僅更簡潔，也讓你更容易專注在資料結構本身。
什麼是 Object Shorthand？
Object Shorthand（物件縮寫）是一種當物件的屬性名稱與變數名稱相同時，可以省略重複書寫的語法。
一般語法 vs 縮寫語法
// 一般寫法
const title = '前端工程師';
const level = 2;
const job = {
title: title,
level: level,
};
// 縮寫語法
const job = {
title,
level,
};只要物件屬性的 key 名稱和變數名稱相同，就可以使用縮寫語法。
使用條件與注意事項
可以縮寫的條件
const email = 'test@example.com';
const profile = {
email, // ✅ 縮寫 OK，因為 key 名稱與變數一致
};不能縮寫的情況：key 與變數名稱不同
const myEmail = 'test@example.com';
const profile = {
email: myEmail, // ❌ 不能縮寫，key 與變數名稱不同
};注意：縮寫不適用於運算式或動態 key
const keyName = 'username';
const username = '小明';
const user = {
[keyName]: username, // ❌ 這是 Computed Property，不能縮寫
};方法縮寫（Method Shorthand）
除了屬性外，物件中的**方法（函式）**也可以縮寫，讓物件看起來更像「類別」定義。
一般寫法
const user = {
sayHi: function () {
console.log('Hi!');
},
};方法縮寫
const user = {
sayHi() {
console.log('Hi!');
},
};這種方式對於撰寫類別風格的程式碼很有幫助，也讓物件看起來更一致與簡潔。
在函式回傳物件時的應用
Object Shorthand 最常見的應用場景之一，就是在函式中回傳一個物件。
一般寫法
function createUser(name, age) {
return {
name: name,
age: age,
};
}縮寫寫法
function createUser(name, age) {
return {
name,
age,
};
}這在處理 API 請求、事件回傳資料、整理輸出格式時特別常用。
搭配解構賦值的開發實例
Object Shorthand 和「解構賦值（Destructuring）」常常一起使用，讓資料的提取與建立變得快速高效。
const person = {
name: '小明',
age: 18,
};
// 解構
const { name, age } = person;
// 建立新物件
const info = {
name,
age,
};這在撰寫 Redux 的 mapStateToProps、React 的元件 props 處理、Form 表單資料建構等非常實用。
其他應用情境
搭配 REST API 資料處理
const title = '文章標題';
const content = '內文內容';
fetch('/api/posts', {
method: 'POST',
body: JSON.stringify({ title, content }), // 👈 Object Shorthand
});搭配 React setState 更新
const [state, setState] = useState({ name: '', age: 0 });
function handleUpdate(name, age) {
setState({ name, age }); // 👈 Object Shorthand
}小測驗：你會用 Object Shorthand 嗎？
將下列程式碼改寫為使用 Object Shorthand：
const title = '全端工程師';
const salary = 90000;
const job = {
title: title,
salary: salary,
};✅ 答案：
const job = {
title,
salary,
};常見錯誤與陷阱
| 錯誤情境 | 錯誤範例 | 原因 |
|---|---|---|
| key 與變數名稱不同 | email: userEmail | 無法縮寫 |
| 動態 key | [key]: value | 不能縮寫 |
| 多層結構誤用 | info: { name } | 外層 info 不能簡寫為 info: { name }，除非 info 是變數 |
錯誤範例email: userEmail
原因無法縮寫
錯誤範例[key]: value
原因不能縮寫
錯誤範例info: { name }
原因外層 info 不能簡寫為 info: { name }，除非 info 是變數
結語：讓程式碼更現代、更易讀的秘密武器
Object Shorthand 是 JavaScript ES6 提供的一項超級實用的語法糖，能有效簡化物件建立的重複語法、提升開發效率。
✅ 快速複習：
- 變數名稱與 key 相同 → 可縮寫
- 方法定義 → 可使用縮寫語法
- 適合搭配函式回傳、API 建構、React props 處理
✨ 寫出乾淨、現代化的 JavaScript，從掌握 Object Shorthand 開始！