JavaScript
Object
ลบ property
เรียนรู้การใช้ `delete` operator ลบ property ออกจาก object ทั้งแบบ dot และ bracket notation — เข้าใจความต่างระหว่าง delete กับ assign undefined ผ่าน `in` operator และฝึกใช้งานจริงผ่าน lab ครบทุก pattern
ลบ property ด้วย `delete` — key และ value หายไปจาก object จริง ๆ
`delete` operator ใช้ลบ property ออกจาก object — เขียน `delete object.key` หรือ `delete object["key"]` หลัง `delete` แล้ว property จะหายไปจาก object จริง ๆ — ต่างจากการ assign `undefined` ซึ่งแค่เปลี่ยนค่าแต่ property ยังอยู่
`delete settings.sound` — `sound` key หายไปจาก object ทันที
const settings = { theme: "dark", sound: true, volume: 80 };
// ลบ property ด้วย dot notation
delete settings.sound;
// หลังลบ — property หายไปจาก object
console.log(settings.sound); // undefined
console.log("sound" in settings); // false ← key หายไปจริง ๆ
console.log(settings);
// { theme: "dark", volume: 80 }bracket notation มีประโยชน์เมื่อชื่อ key มาจากตัวแปร หรือมีอักขระพิเศษ
const user = { name: "สมชาย", role: "admin", tempKey: "remove-me" };
// ลบด้วย bracket notation
delete user["tempKey"];
console.log("tempKey" in user); // false
// bracket + ตัวแปร — ลบ property ที่ key มาจากตัวแปร
const fieldToRemove = "role";
delete user[fieldToRemove];
console.log("role" in user); // false
console.log(user);
// { name: "สมชาย" }`delete` คืน `true` เมื่อลบสำเร็จ หรือเมื่อ property ไม่มีอยู่ — ใช้ return value นี้ยืนยันผลการลบได้
const product = { name: "เมาส์", price: 590 };
// delete property ที่มีอยู่ → คืน true
console.log(delete product.price); // true
// delete property ที่ไม่มีอยู่ → ก็คืน true เช่นกัน (ไม่ error)
console.log(delete product.color); // true
// delete property ของ built-in หรือ configurable: false → ทำอะไรไม่ได้
// console.log(delete Math.PI); // false (แต่ไม่ common)- `delete obj.key` (dot) หรือ `delete obj["key"]` (bracket) — ลบ property ทิ้ง
- หลังลบ key หายไป — `"key" in obj` จะคืน `false`
- `delete` คืน `true` ถ้าลบสำเร็จ (`false` เฉพาะ property ที่ลบไม่ได้ เช่น built-in ที่ configurable: false)
- ลบ property ที่ไม่มีอยู่ไม่ throw error — ปลอดภัยที่จะเรียก
- `delete` ใช้ได้กับ property ของ object เท่านั้น — ใช้กับตัวแปรธรรมดาไม่ได้
ใช้ `in` operator เช็กก่อนลบและยืนยันหลังลบ
`in` operator ใช้ตรวจสอบว่า key หนึ่งมีอยู่ใน object หรือไม่ — เขียน `"key" in object` แล้วได้ `true` หรือ `false` การใช้ `in` ร่วมกับ `delete` ทำให้เขียนโค้ดที่ปลอดภัยขึ้น — เช็กก่อนลบป้องกันการลบ property ที่ไม่มีอยู่ (ถึงแม้จะไม่ error ก็ตาม) และยืนยันได้ว่า property หายไปแล้วหลังลบ
ใช้ `if` ตรวจสอบก่อน `delete` — pattern นี้สำคัญเมื่อข้อมูลอาจมาจาก API หรือ user input
const session = { username: "guest", token: "abc123", cache: { page: 1, filter: "pending" } };
// เช็กก่อนลบ — ปลอดภัยเมื่อไม่แน่ใจว่ามี key นี้หรือไม่
if ("cache" in session) {
delete session.cache;
console.log("ลบ cache สำเร็จ");
} else {
console.log("ไม่มี cache ให้ลบ");
}
console.log("cache" in session); // false — หายไปแล้วเช็กหลังลบด้วย `in` — ยืนยันว่าลบสำเร็จ และ property ที่ควรอยู่ยังอยู่
const form = { email: "test@mail.com", tempToken: "one-time-abc", draft: true };
// ลบข้อมูลชั่วคราวที่ไม่ต้องการแล้ว
delete form.tempToken;
delete form.draft;
// ยืนยันหลังลบ — property ที่ถูกลบจะหายไป
console.log("tempToken" in form); // false — ถูกลบแล้ว
console.log("draft" in form); // false — ถูกลบแล้ว
// property ที่ไม่ได้ลบ — ยังอยู่
console.log("email" in form); // true- **เช็กก่อน:** `if ("key" in obj)` — ป้องกันการลบซ้ำหรือลบ key ที่ไม่มี
- **ลบ:** `delete obj.key` — เฉพาะเมื่อ key มีอยู่
- **ยืนยันหลังลบ:** `"key" in obj` → `false` — key หายไปแล้ว
- **ยืนยันของที่อยู่:** `"key" in obj` → `true` — key ยังอยู่ใน object
- ใช้ `console.log` แสดงผลลัพธ์เพื่อให้เห็นชัดว่าเกิดอะไรขึ้น
ข้อควรรู้และข้อผิดพลาดที่พบบ่อย — delete vs undefined, const object, และขอบเขตการใช้งาน
`delete` กับ `obj.key = undefined` ดูคล้ายกันแต่ต่างกันมาก — `delete` ลบทั้ง key และ value ส่วน assign `undefined` แค่เปลี่ยนค่าแต่ key ยังอยู่ `in` operator เป็นตัวตัดสิน
`delete` = key หายไป, assign `undefined` = key ยังอยู่ — `in` operator บอกความต่างได้
const data1 = { name: "A", temp: 123 };
const data2 = { name: "B", temp: 456 };
// delete — ลบ key จริง ๆ
delete data1.temp;
console.log("temp" in data1); // false ← key หายไป
// assign undefined — key ยังอยู่ แค่ค่าเปลี่ยน
data2.temp = undefined;
console.log("temp" in data2); // true ← key ยังอยู่!
// ใช้ delete เมื่ออยากลบ key ให้หายไป
// ใช้ assign undefined เมื่อแค่เคลียร์ค่า แต่ key ต้องอยู่- **`delete obj.key`:** ลบ key ออกจาก object — `"key" in obj` → `false`
- **`obj.key = undefined`:** เปลี่ยนค่าเป็น `undefined` — `"key" in obj` → `true` (key ยังอยู่)
- **ใช้ `delete`:** เมื่อมั่นใจว่าไม่ต้องการ property นั้นอีกเลย (cleanup, remove temp data)
- **ใช้ assign `undefined`:** เมื่ออยากให้ property ยังอยู่ใน object แต่ยังไม่มีค่า
**`const` object — ลบ property ได้** เช่นเดียวกับการเพิ่มและอัปเดต `const` ป้องกันแค่การเปลี่ยน reference (เปลี่ยนว่าตัวแปรชี้ไป object อื่น) แต่แก้ไขเนื้อใน object ได้เต็มที่
`const` object ยังลบ property ได้ — `const` ล็อกแค่ reference ไม่ได้ล็อกเนื้อหาภายใน
const car = { brand: "Toyota", model: "Camry", year: 2025 };
delete car.year; // ✅ ลบ property ได้
delete car.model; // ✅ ลบ property ได้
// car = { brand: "Honda" }; // ❌ TypeError — เปลี่ยนค่า const ไม่ได้
console.log(car);
// { brand: "Toyota" }**การลบ property ที่ไม่มีอยู่** — `delete` จะคืน `true` และไม่เกิด error จึงเขียนโค้ดลบซ้ำหรือลบ key ที่ไม่แน่ใจว่ามีอยู่ได้อย่างปลอดภัย **ข้อจำกัด:** `delete` ใช้ได้เฉพาะกับ property ของ object เท่านั้น — ใช้กับตัวแปรธรรมดา (variable), function parameter, หรือ function name ไม่ได้
`delete` property ที่ไม่มีอยู่ = ปลอดภัย ไม่ error เหมาะกับโค้ดที่ทำงานกับข้อมูลที่ไม่แน่นอน
const data = { count: 0 };
// ลบ property ที่ไม่มีอยู่ — ปลอดภัย
delete data.total; // true, ไม่ error
delete data.nothing; // true, ไม่ error
console.log(data); // { count: 0 } — ไม่เปลี่ยนแปลง
// แต่ delete ใช้กับตัวแปรธรรมดาไม่ได้:
// var x = 10;
// delete x; // false — ใช้กับตัวแปรธรรมดาไม่ได้ผล- **ลบ property ที่ไม่มีอยู่:** `true` — ไม่ error, ปลอดภัยที่จะเรียก
- **`const` object ลบ property ได้:** `const` ป้องกันการ reassign เท่านั้น
- **`delete` กับตัวแปรธรรมดา:** ไม่ได้ผล — ใช้กับ object property เท่านั้น