JavaScript Objects และการจัดการข้อมูล

JavaScript

EP13 เรียนรู้ JavaScript Object ตั้งแต่การสร้างและอ่านคุณสมบัติ การเพิ่มและลบข้อมูล การใช้ Destructuring และ Spread Syntax ไปจนถึง Optional Chaining และการจัดการข้อมูลซ้อนอย่างปลอดภัย

EP13: JavaScript Objects และการจัดการข้อมูล

1. Object คืออะไร

const user = {
    id: 101,
    name: 'มิน',
    age: 18,
    active: true
};

console.log(user);
console.log(user.name);
console.log(user.age);

2. การอ่านคุณสมบัติด้วย Dot Notation

const product = {
    name: 'คีย์บอร์ด',
    price: 890,
    inStock: true
};

console.log(product.name);
console.log(product.price);
console.log(product.inStock);

3. Bracket Notation สำหรับชื่อคุณสมบัติแบบไดนามิก

const product = {
    name: 'คีย์บอร์ด',
    price: 890,
    'stock-count': 15,
    category: 'อุปกรณ์คอมพิวเตอร์'
};

const selectedField = 'price';

console.log(product['stock-count']);
console.log(product[selectedField]);
console.log(product['category']);

4. เพิ่ม แก้ไข และลบคุณสมบัติ

const user = {
    name: 'มิน',
    age: 18
};

// เพิ่มคุณสมบัติ
user.email = '[email protected]';

// แก้ไขค่าเดิม
user.age = 19;

// เพิ่มคุณสมบัติด้วย Bracket Notation
user['member-level'] = 'gold';

// ลบคุณสมบัติ
 delete user.email;

console.log(user);

5. Destructuring ดึงคุณสมบัติออกมาใช้งาน

const user = {
    id: 101,
    name: 'มิน',
    age: 18,
    city: 'อุตรดิตถ์'
};

const { name, age } = user;

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

const user = {
    name: 'มิน',
    age: 18
};

const {
    name: displayName,
    city = 'ไม่ระบุเมือง',
    age: userAge = 0
} = user;

console.log(displayName);
console.log(city);
console.log(userAge);

6. Spread Syntax คัดลอกและรวม Object

const originalUser = {
    id: 101,
    name: 'มิน',
    role: 'member'
};

const updatedUser = {
    ...originalUser,
    role: 'admin',
    active: true
};

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

6.1 อัปเดตข้อมูลโดยไม่แก้ Object ต้นฉบับ

const product = {
    id: 1,
    name: 'สมุด',
    price: 25,
    inStock: true
};

const discountedProduct = {
    ...product,
    price: 20
};

console.log(product.price);
console.log(discountedProduct.price);

7. Shallow Copy กับข้อมูลที่ซ้อนกัน

const original = {
    name: 'มิน',
    address: {
        city: 'อุตรดิตถ์'
    }
};

const copy = { ...original };

copy.name = 'ฟ้า';
copy.address.city = 'เชียงใหม่';

console.log(original.name);
console.log(original.address.city);
console.log(copy.name);
console.log(copy.address.city);

7.1 คัดลอกข้อมูลซ้อนระดับที่ต้องการ

const original = {
    name: 'มิน',
    address: {
        city: 'อุตรดิตถ์',
        postalCode: '53000'
    }
};

const copy = {
    ...original,
    address: {
        ...original.address,
        city: 'เชียงใหม่'
    }
};

console.log(original.address.city);
console.log(copy.address.city);

8. Object.keys(), Object.values() และ Object.entries()

const scores = {
    math: 90,
    science: 85,
    english: 92
};

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

for (const [subject, score] of Object.entries(scores)) {
    console.log(`${subject}: ${score}`);
}

9. Optional Chaining ป้องกันการเข้าถึงข้อมูลที่ไม่มีอยู่

const userA = {
    name: 'มิน',
    profile: {
        city: 'อุตรดิตถ์'
    }
};

const userB = {
    name: 'ฟ้า',
    profile: null
};

console.log(userA.profile?.city);
console.log(userB.profile?.city);
console.log(userB.contact?.email);

10. Nullish Coalescing กำหนดค่าเริ่มต้นให้ข้อมูล

const settings = {
    volume: 0,
    enabled: false,
    theme: ''
};

const volumeA = settings.volume ?? 50;
const volumeB = settings.volume || 50;
const enabled = settings.enabled ?? true;
const theme = settings.theme ?? 'light';

console.log(volumeA);
console.log(volumeB);
console.log(enabled);
console.log(theme);

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

const product = {
    id: 101,
    name: 'สมุด',
    price: 25
};

const jsonText = JSON.stringify(product);
console.log(jsonText);

const parsedProduct = JSON.parse(jsonText);
console.log(parsedProduct.name);
console.log(parsedProduct.price);

function parseJsonSafely(text) {
    try {
        return {
            success: true,
            data: JSON.parse(text)
        };
    } catch (error) {
        return {
            success: false,
            message: 'ข้อมูล JSON ไม่ถูกต้อง'
        };
    }
}

console.log(parseJsonSafely('{"name":"มิน"}'));
console.log(parseJsonSafely('{invalid json}'));

12. ตัวอย่างประยุกต์: อัปเดตโปรไฟล์สมาชิก

const member = {
    id: 501,
    name: 'มิน',
    email: '[email protected]',
    profile: {
        city: 'อุตรดิตถ์',
        phone: null
    },
    preferences: {
        newsletter: false
    }
};

const { id, name, email } = member;
const city = member.profile?.city ?? 'ไม่ระบุเมือง';
const phone = member.profile?.phone ?? 'ไม่ระบุเบอร์โทร';
const newsletterEnabled = member.preferences?.newsletter ?? true;

const updatedMember = {
    ...member,
    profile: {
        ...member.profile,
        city: 'เชียงใหม่'
    }
};

console.log({ id, name, email, city, phone, newsletterEnabled });
console.log(member.profile.city);
console.log(updatedMember.profile.city);

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

โจทย์ที่ 1: อ่านคุณสมบัติ

โจทย์ที่ 2: ใช้ชื่อคุณสมบัติจากตัวแปร

โจทย์ที่ 3: สร้าง Object ใหม่

โจทย์ที่ 4: อ่านข้อมูลที่อาจไม่มีอยู่

โจทย์ที่ 5: แสดงชื่อคุณสมบัติและค่า

14. เฉลยแบบฝึกหัด

const student = {
    name: 'ฟ้า',
    age: 12,
    score: 95
};
console.log(student.name, student.score);

const field = 'price';
const product = {
    name: 'กระเป๋า',
    price: 199
};
console.log(product[field]);

const discountedProduct = {
    ...product,
    price: 99
};
console.log(product.price);
console.log(discountedProduct.price);

const user = {
    profile: null
};
const city = user.profile?.city ?? 'ไม่ระบุเมือง';
console.log(city);

const scores = {
    math: 90,
    science: 85,
    english: 92
};
for (const [subject, score] of Object.entries(scores)) {
    console.log(`${subject}: ${score}`);
}

EP14: JavaScript Functions และการออกแบบฟังก์ชันที่นำกลับมาใช้ได้