JavaScript: Object และข้อมูลแบบ Key-Value

JavaScript

EP8 ของชุด JavaScript คืออะไร? เริ่มต้นเขียนโปรแกรม เรียนรู้ Object, properties, methods, การเข้าถึงและแก้ไขข้อมูล การวนลูป Object และการทำงานร่วมกับ Array เพื่อสร้างข้อมูลสำหรับระบบจริง

EP8: จัดเก็บข้อมูลอย่างเป็นระบบด้วย Object

1. Object คืออะไร

const student = {
    name: 'Mali',
    age: 12,
    grade: 'ม.1'
};

console.log(student.name);
console.log(student.age);
console.log(student.grade);

// ผลลัพธ์:
// Mali
// 12
// ม.1

2. สร้าง Object และกำหนด Properties

const product = {
    id: 101,
    name: 'Wireless Mouse',
    price: 450,
    inStock: true,
    tags: ['computer', 'accessory'],
    supplier: {
        name: 'Tech Supply',
        country: 'Thailand'
    }
};

console.log(product.name);
console.log(product.tags[0]);
console.log(product.supplier.name);

// ผลลัพธ์:
// Wireless Mouse
// computer
// Tech Supply

3. เข้าถึงข้อมูลด้วย Dot Notation และ Bracket Notation

const customer = {
    name: 'Anan',
    'member level': 'Gold',
    city: 'Bangkok'
};

const propertyName = 'city';

console.log(customer.name);
console.log(customer['member level']);
console.log(customer[propertyName]);

// ผลลัพธ์:
// Anan
// Gold
// Bangkok

4. เพิ่ม แก้ไข และลบ Properties

const account = {
    username: 'mali12',
    points: 100
};

account.points = 150;
account.email = '[email protected]';
delete account.username;

console.log(account);
console.log(account.points);

// ผลลัพธ์:
// { points: 150, email: '[email protected]' }
// 150

5. ตรวจสอบว่ามี Property อยู่หรือไม่

const profile = {
    name: 'Niran',
    nickname: undefined
};

console.log(profile.name);
console.log(profile.email);
console.log('email' in profile);
console.log(Object.hasOwn(profile, 'name'));
console.log(Object.hasOwn(profile, 'nickname'));

// ผลลัพธ์:
// Niran
// undefined
// false
// true
// true

6. Methods: ฟังก์ชันภายใน Object

const cart = {
    items: [
        { name: 'Keyboard', price: 1200, quantity: 1 },
        { name: 'Mouse', price: 450, quantity: 2 }
    ],
    getTotal() {
        return this.items.reduce(
            (total, item) => total + item.price * item.quantity,
            0
        );
    }
};

console.log(cart.getTotal());

// ผลลัพธ์:
// 2100

7. วนลูปอ่าน Properties ด้วย Object.keys, values และ entries

const stock = {
    keyboard: 8,
    mouse: 12,
    monitor: 5
};

console.log(Object.keys(stock));
console.log(Object.values(stock));
console.log(Object.entries(stock));

for (const [name, quantity] of Object.entries(stock)) {
    console.log(`${name}: ${quantity} ชิ้น`);
}

// ผลลัพธ์:
// ['keyboard', 'mouse', 'monitor']
// [8, 12, 5]
// [['keyboard', 8], ['mouse', 12], ['monitor', 5]]
// keyboard: 8 ชิ้น
// mouse: 12 ชิ้น
// monitor: 5 ชิ้น

8. เปรียบเทียบ Object กับ Array

9. รวม Array กับ Object เพื่อจัดการรายการสินค้า

const products = [
    { id: 1, name: 'Keyboard', price: 1200, stock: 8 },
    { id: 2, name: 'Mouse', price: 450, stock: 0 },
    { id: 3, name: 'Monitor', price: 5200, stock: 5 },
    { id: 4, name: 'Webcam', price: 890, stock: 3 }
];

const availableProducts = products.filter(product => product.stock > 0);

const displayList = availableProducts.map(product => ({
    name: product.name,
    stock: product.stock
}));

const totalValue = availableProducts.reduce(
    (sum, product) => sum + product.price * product.stock,
    0
);

console.log(displayList);
console.log(totalValue);

// มูลค่าสต็อกรวม:
// 38270

10. คัดลอก Object ด้วย Spread Syntax

const originalUser = {
    name: 'Mali',
    role: 'member',
    active: true
};

const updatedUser = {
    ...originalUser,
    role: 'admin',
    city: 'Bangkok'
};

console.log(originalUser);
console.log(updatedUser);

// originalUser ยังคง role เป็น member
// updatedUser มี role เป็น admin และ city เป็น Bangkok

11. ใช้ Optional Chaining และ Nullish Coalescing

const order = {
    id: 5001,
    customer: {
        name: 'Anan'
    }
};

const customerName = order.customer?.name ?? 'ไม่ระบุชื่อ';
const shippingCity = order.shipping?.city ?? 'ยังไม่มีข้อมูลที่อยู่';

console.log(customerName);
console.log(shippingCity);

// ผลลัพธ์:
// Anan
// ยังไม่มีข้อมูลที่อยู่

const stockCount = 0;

console.log(stockCount || 10);
console.log(stockCount ?? 10);

// ผลลัพธ์:
// 10
// 0

12. Object กับ JSON ต่างกันอย่างไร

const user = {
    id: 101,
    name: 'Mali',
    active: true
};

const jsonText = JSON.stringify(user);
const parsedUser = JSON.parse(jsonText);

console.log(jsonText);
console.log(parsedUser.name);

// ผลลัพธ์:
// {"id":101,"name":"Mali","active":true}
// Mali

13. คำนวณคะแนนรวมจาก Object

const scores = {
    mathematics: 85,
    science: 92,
    english: 78,
    programming: 95
};

const values = Object.values(scores);
const total = values.reduce((sum, score) => sum + score, 0);
const average = values.length > 0 ? total / values.length : 0;

console.log('คะแนนรวม:', total);
console.log('ค่าเฉลี่ย:', average);
console.log('วิชาที่ได้คะแนนสูงสุด:', Object.entries(scores)
    .reduce((best, current) => current[1] > best[1] ? current : best)[0]);

// ผลลัพธ์:
// คะแนนรวม: 350
// ค่าเฉลี่ย: 87.5
// วิชาที่ได้คะแนนสูงสุด: programming

14. สรุปแนวคิดและข้อควรระวัง

15. แบบฝึกหัดท้ายบท

16. เตรียมพร้อมสำหรับ EP9