Object

Property Shorthand คืออะไร

เวลาเรามีตัวแปรอยู่แล้ว และอยากใช้ค่าของตัวแปรนั้นเป็น value ใน object — ปกติต้องเขียน `{ key: variableName }` แต่ JavaScript มี syntax ที่เรียกว่า **Property Shorthand** ที่ช่วยลดการเขียนซ้ำ: เมื่อชื่อ key ตรงกับชื่อตัวแปรพอดี เขียนแค่ชื่อตัวแปรตัวเดียวก็พอ

const name = "สมชาย";
const age = 30;

// แบบปกติ — เขียน key: value ซ้ำ
const user1 = { name: name, age: age };

// Property shorthand — เขียนแค่ชื่อตัวแปร
const user2 = { name, age };

console.log(user1); // { name: "สมชาย", age: 30 }
console.log(user2); // { name: "สมชาย", age: 30 }

Object แบบเต็มและแบบ shorthand ได้ผลลัพธ์เหมือนกัน — shorthand ลดความซ้ำซ้อนเมื่อ key กับตัวแปรชื่อตรงกัน

หัวใจของ shorthand: **JavaScript เอาชื่อตัวแปรไปเป็น key โดยอัตโนมัติ และเอาค่าของตัวแปรไปเป็น value** — ไม่ต้องพิมพ์ `key: key` ซ้ำอีกต่อไป

ใช้ shorthand ผสมกับ property ปกติ

ในโค้ดจริง ไม่ใช่ทุก property ของ object จะมาจากตัวแปร — บาง property ใช้ค่าคงที่ (literal value) เช่น `status: "active"` หรือ `type: "admin"` shorthand ใช้ผสมกับ property แบบปกติใน object เดียวกันได้ — เลือกใช้ shorthand สำหรับ key ที่ชื่อตรงกับตัวแปร และใช้ full form สำหรับค่าคงที่หรือ key ที่ต้องการชื่ออื่น

const name = "สมหญิง";
const age = 25;

// shorthand สำหรับ name, age — full form สำหรับ role, status
const user = {
  name,              // shorthand (key: name, value: "สมหญิง")
  age,               // shorthand (key: age, value: 25)
  role: "member",    // full form — literal value
  status: "active",  // full form — literal value
};

console.log(user);
// { name: "สมหญิง", age: 25, role: "member", status: "active" }

• key ที่ชื่อตรงกับตัวแปร → ใช้ shorthand `{ name }`
• key ที่ชื่อต่างจากตัวแปร → ใช้ full form `{ label: name }`
• ค่าคงที่ (literal) → ใช้ full form `{ role: "admin" }`
• key ที่ต้องการชื่ออื่นหรือผลลัพธ์จากการคำนวณ → ใช้ full form

เมื่อ key กับ variable ชื่อไม่ตรงกัน

บางครั้งตัวแปรชื่อหนึ่ง แต่ใน object อยากให้ key เป็นอีกชื่อหนึ่ง เช่น ตัวแปรชื่อ `lastName` แต่อยากให้ key ใน object เป็น `familyName` กรณีนี้ **ใช้ shorthand ไม่ได้** — เพราะชื่อไม่ตรงกัน ต้องเขียน full form `{ familyName: lastName }` แต่ถ้ามีตัวแปรอื่นที่ชื่อตรง key ก็ใช้ shorthand ได้ — เลือกเป็นตัว ๆ ไป

const firstName = "สมชาย";   // ชื่อนี้ใช้ shorthand ได้
const lastName = "ใจดี";       // ชื่อนี้ใช้ shorthand ไม่ได้
                               // เพราะอยากให้ key เป็น familyName

const person = {
  firstName,              // shorthand — key กับตัวแปรชื่อตรงกัน
  familyName: lastName,   // full form — key ≠ ตัวแปร
  age: 30,                // full form — literal
};

console.log(person);
// { firstName: "สมชาย", familyName: "ใจดี", age: 30 }

กฎคือ: **shorthand ใช้ได้เฉพาะเมื่อชื่อ key ใน object ตรงกับชื่อตัวแปรพอดี ตัวพิมพ์เล็ก/ใหญ่ต้องตรงกันด้วย** (`name` กับ `Name` ถือว่าคนละชื่อกัน)

คำนวณก่อน แล้วสร้าง object ด้วย shorthand

รูปแบบที่เจอบ่อยในโค้ดจริง: คำนวณค่าหรือประมวลผลข้อมูลก่อน → เก็บผลลัพธ์ไว้ในตัวแปร → แล้วค่อยใช้ shorthand สร้าง object shorthand ช่วยให้ขั้นตอนสุดท้าย (สร้าง object) สั้นและอ่านง่าย — เพราะค่าทุกอย่างถูกเตรียมไว้ในตัวแปรแล้ว ใช้แค่ชื่อตัวแปรก็พอ

const price = 500;
const qty = 3;

// ขั้นที่ 1: คำนวณ — เก็บผลลัพธ์ในตัวแปร
const subtotal = price * qty;        // 1500
const tax = subtotal * 0.07;         // 105
const total = subtotal + tax;        // 1605

// ขั้นที่ 2: สร้าง object ด้วย shorthand
const receipt = { price, qty, subtotal, tax, total };
console.log(receipt);
// { price: 500, qty: 3, subtotal: 1500, tax: 105, total: 1605 }

วิธีนี้ต่อยอดได้กับทุกสถานการณ์: คำนวณอะไรก็ได้ก่อน เก็บในตัวแปร แล้ว shorthand รวมเข้า object โดยไม่ต้องพิมพ์ property ซ้ำ

shorthand ในฟังก์ชันที่ return object

shorthand เข้ากับฟังก์ชันที่ return object ได้ดีเป็นพิเศษ — เพราะ parameter ของฟังก์ชันก็คือตัวแปร และชื่อ parameter มักตรงกับ key ที่เราอยากให้มีใน object อยู่แล้ว

function createUser(name, email, age) {
  return {
    name,                          // shorthand — ใช้ parameter name
    email,                         // shorthand — ใช้ parameter email
    age,                           // shorthand — ใช้ parameter age
    role: "member",                // full form — literal
    createdAt: new Date().toISOString(),
  };
}

const user = createUser("สมชาย", "somchai@email.com", 30);
console.log(user);
// { name: "สมชาย", email: "somchai@email.com", age: 30,
//   role: "member", createdAt: "2025-..." }

• ลดการพิมพ์ซ้ำ — ไม่ต้องเขียน `{ name: name, email: email, ... }`
• อ่านง่าย — เห็นชื่อ parameter ก็รู้ว่า object หน้าตาเป็นยังไง
• เพิ่ม literal property ได้ เช่น `role`, `createdAt` — ผสมกันได้ตามต้องการ
• ใช้ได้ทั้ง function declaration, function expression และ arrow function

ข้อควรระวัง

กฎง่าย ๆ: **shorthand = ชื่อตัวแปรเท่านั้น ห้ามใส่นิพจน์ ห้ามเรียก method และตัวแปรต้องมีอยู่ก่อน** — ถ้าต้องการทำอะไรที่ซับซ้อนกว่าการอ้างอิงตัวแปรตรง ๆ ให้ใช้ full form

ทดลอง Property Shorthand อย่างอิสระ

Lab 1: สร้าง object ด้วย shorthand ล้วน ๆ

Lab 2: ผสม shorthand กับ literal property

Lab 3: เลือกใช้ shorthand เฉพาะ key ที่ชื่อตรงกับตัวแปร

Lab 4: คำนวณก่อน แล้วสร้าง object ด้วย shorthand

Lab 5: เลือกใช้ shorthand เฉพาะบางตัวแปรที่ต้องการ

Lab 6: ฟังก์ชันที่ return object ด้วย shorthand