ภาพหน้าปก: ตอนที่ 11: Objects พื้นฐาน

1. 🎯 ตอนที่ 11: Objects พื้นฐาน (กล่องสารพัดนึกแห่ง JavaScript)

สวัสดีครับน้องๆ นักพัฒนาทุกคน! จิบกาแฟให้ตื่นตัวแล้วมาลุยกันต่อครับ ในตอนที่แล้วเราได้ทำความรู้จักกับ Array หรือ “ขบวนรถไฟเก็บข้อมูล” กันไปแล้ว ซึ่งเหมาะมากกับการเก็บของที่เหมือนๆ กันและเรียงลำดับเป็นแถว

แต่ชีวิตจริงของโปรแกรมเมอร์ไม่ได้มีแค่ข้อมูลแบบนั้นสิครับ วันนี้พี่จะพาไปรู้จักกับโครงสร้างข้อมูลที่ “ทรงพลังที่สุดและสำคัญที่สุด” ในจักรวาล JavaScript นั่นก็คือ Object (อ็อบเจกต์) ครับ รับรองว่าถ้าน้องๆ เข้าใจเรื่องนี้ การเขียน JavaScript จะสนุกขึ้นอีกเป็นกองเลย!

2. 📖 เปิดฉาก (The Hook)

น้องๆ ลองจินตนาการดูนะครับ สมมติว่าเรากำลังเขียนเกมหรือทำระบบจัดการข้อมูลลูกค้า แล้วเราต้องการเก็บข้อมูลของ “รถยนต์” 1 คัน ถ้าเราใช้ตัวแปรธรรมดา เราก็คงต้องประกาศแบบนี้: let carMake = "Toyota"; let carModel = "Camry"; let carYear = 2023; พอมีรถ 10 คัน ตัวแปรคงล้นหน้าจอจนตาลายแน่ๆ!

งั้นลองใช้ Array ไหม? let car = ["Toyota", "Camry", 2023]; ดูสั้นลงนะ แต่ปัญหาคือ… พอเราจะดึงเลข 2023 ออกมา เราต้องจำให้ได้ว่ามันอยู่ที่ car ซึ่งถ้าข้อมูลมีเป็นร้อยๆ ช่อง ใครจะไปจำไหวว่า Index ไหนคืออะไร?

นี่แหละครับคือจุดที่ Object ขี่ม้าขาวมาช่วย! Object จะเปลี่ยนจากการจำ “ตัวเลข Index” มาเป็นการใช้ “ชื่อป้ายแปะ (Label)” แทน ทำให้เราสามารถรวมข้อมูลทุกอย่างที่เกี่ยวกับรถคันนี้ไว้ในกล่องใบเดียว แล้วแปะป้ายบอกชัดเจนเลยว่า อันนี้คือยี่ห้อ อันนี้คือรุ่น!

3. 🧠 แก่นวิชา (Core Concepts)

ใน JavaScript, Object เป็นคอลเลกชันของข้อมูลที่ไม่มีลำดับ (Unordered collection) ซึ่งเก็บอยู่ในรูปแบบของ คู่ชื่อและค่า (Name/Value pairs หรือ Key-Value pairs)

  • Key (ชื่อป้ายแปะ): ต้องเป็น String (ข้อความ) เสมอ
  • Value (ข้อมูลที่เก็บ): เป็นอะไรก็ได้ในโลก JavaScript! ไม่ว่าจะเป็น String, Number, Boolean, Array, หรือแม้แต่ Object ซ้อน Object ก็ยังได้ และถ้า Value นั้นบังเอิญเป็นฟังก์ชัน เราจะเรียกมันเท่ๆ ว่า Method (เมธอด) ครับ

วิธีการสร้าง Object เราสามารถสร้าง Object ได้หลายวิธี แต่วิธีที่ฮิตและคูลที่สุดคือการใช้ Object Literal หรือการเปิด-ปิดด้วยวงเล็บปีกกา { ... } นั่นเองครับ

วิธีการเข้าถึงข้อมูล (Property Access) เมื่อสร้างเสร็จแล้ว เราจะดึงข้อมูลออกมาใช้ได้ 2 ท่าหลักๆ คือ:

  1. Dot notation (.): ท่ามาตรฐานที่ใช้บ่อยที่สุด พิมพ์ชื่อง่ายๆ เหมือนเรียกเพื่อน เช่น car.make
  2. Bracket notation ([]): ท่าประยุกต์ ใช้ครอบด้วยวงเล็บเหลี่ยมและเครื่องหมายคำพูด เช่น car["make"] ท่านี้ดูพิมพ์ยากกว่าแต่มันมีความยืดหยุ่นสูงมากครับ (เดี๋ยวพี่จะบอกในเคล็ดลับ)
แผนภาพแสดงโครงสร้างของ Object และการเข้าถึงข้อมูลด้วย Dot Notation เทียบกับ Bracket Notation

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

เรามาลองสร้างและใช้งาน Object ในชีวิตจริงกันเลยครับ!

// 📦 1. การสร้าง Object ด้วย Literal Notation
const developer = {
    name: "Wisit",          // Key เป็น string ส่วน Value เป็น string
    age: 30,                // Value เป็น number
    skills: ["JS", "CSS"],  // Value เป็น array ก็ได้นะ!
    isWorking: true,        // Value เป็น boolean
    sayHello: function() {  // Value เป็น function (เราเรียกว่า Method)
        console.log("สวัสดีครับบบ!");
    }
};

// 🔍 2. การอ่านข้อมูล (Getting Properties)
// ท่าที่ 1: Dot Notation (คลาสสิกและอ่านง่าย)
console.log(developer.name); // ผลลัพธ์: "Wisit"

// ท่าที่ 2: Bracket Notation (ยืดหยุ่นกว่า)
console.log(developer["age"]); // ผลลัพธ์: 30

// เรียกใช้ Method ของ Object
developer.sayHello(); // ผลลัพธ์: "สวัสดีครับบบ!"

// ✏️ 3. การอัปเดตและเพิ่มข้อมูลใหม่ (Setting Properties)
developer.age = 31; // เปลี่ยนอายุใหม่ (Happy Birthday!)
developer.company = "WP Solution"; // สร้าง Property ใหม่ขึ้นมาดื้อๆ เลยก็ได้!

// 🗑️ 4. การลบข้อมูล (Deleting Properties)
delete developer.isWorking; // ลบคุณสมบัตินี้ทิ้งไปเลย
console.log(developer.isWorking); // ผลลัพธ์: undefined (เพราะโดนลบไปแล้ว)

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

ในฐานะโปรแกรมเมอร์ที่ผ่านสมรภูมิมาเยอะ พี่ขอฝาก “หลุมพรางและเทคนิคชั้นเซียน” เกี่ยวกับ Object ไว้ดังนี้ครับ:

  1. 💡 ทำไมต้องมี Bracket Notation ([]) ในเมื่อ Dot (.) ก็ใช้ง่ายกว่า? Dot notation จะใช้ได้ก็ต่อเมื่อชื่อ Key ของเราเป็น “คำที่ถูกต้องตามหลักตัวแปร” (Valid Identifier) เท่านั้นครับ (ไม่มีเว้นวรรค ไม่ขึ้นต้นด้วยตัวเลข) แต่สมมติว่าเรามี Key ชื่อแปลกๆ เช่น มีการเว้นวรรค หรือเราต้องการให้ชื่อ Key เปลี่ยนไปตามตัวแปร เรา “ต้อง” ใช้ Bracket Notation เท่านั้นครับ!

    const data = { "first name": "John" };
// console.log(data.first name); // พังแน่ๆ! Syntax Error
console.log(data["first name"]); // รอดตัวไป ได้ "John"

// พลังที่แท้จริงคือการใช้คู่กับตัวแปร (Dynamic keys)
let propToRead = "age";
console.log(developer[propToRead]); // เหมือนสั่ง developer["age"] ดึงค่า 31 ออกมาได้!

  2. ⚠️ ตัวแปร const กับ Object ความลับที่หลายคนพลาด! น้องๆ อาจจะสงสัยว่า “พี่ครับ ผมประกาศ const developer ไปแล้ว ทำไมผมยังแก้ไข developer.age = 31 ได้อีกล่ะ? const มันห้ามแก้ไม่ใช่เหรอ?” คำตอบคือ: ใน JavaScript, Object ทำงานแบบอ้างอิงตำแหน่ง (Pass by Reference) การใช้ const กับ Object เป็นการล็อกแค่ “ตัวกล่อง” (ไม่ให้ชี้ไปที่กล่องใบใหม่) แต่ไม่ได้ล็อก “ของที่อยู่ข้างในกล่อง” ครับ! ดังนั้นเราจึงสามารถเพิ่ม ลด หรือแก้ Property ของ Object ที่ประกาศด้วย const ได้อย่างอิสระเลยครับ

  3. 👻 ของที่ไม่มีอยู่จริง คือความว่างเปล่า (undefined) ถ้าเราเผลอใช้ Dot notation เรียกหา Property ที่เราไม่เคยสร้างมาก่อนใน Object ตัว JavaScript จะไม่ด่าเราให้โปรแกรมพังนะครับ แต่มันจะส่งค่า undefined กลับมาให้แบบเงียบๆ ดังนั้นเวลาดึงข้อมูลไปใช้ ต้องระวังเช็คค่า undefined ให้ดีครับ!

6. 🏁 บทสรุป (To be continued…)

เห็นไหมครับว่า Object คือหัวใจสำคัญที่ทำให้เราสามารถจำลอง “สิ่งต่างๆ ในโลกแห่งความจริง” เข้ามาอยู่ในโค้ดของเราได้อย่างสวยงามและเป็นระเบียบ ทั้งการเก็บข้อมูล (Properties) และพฤติกรรม (Methods) ไว้ด้วยกัน

แต่เมื่อเรามี Object ที่ซับซ้อนขึ้น มี Property ซ้อนกันลึกๆ หรือต้องการดึงข้อมูลหลายๆ ตัวออกมาใช้งานพร้อมกัน การมานั่งพิมพ์ obj.name, obj.age ทีละบรรทัดก็อาจจะเมื่อยมือได้… ในตอนหน้า พี่จะพาไปดูเวทมนตร์ของ ES6 ที่ชื่อว่า “Object Destructuring” ซึ่งจะช่วยให้เราแกะกล่อง Object ได้อย่างหรูหราและประหยัดโค้ดสุดๆ

เตรียมแก้วกาแฟไว้ให้พร้อม แล้วพบกันตอนหน้าครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Automation หรือ Web Application ให้กับโรงงานของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและติดตั้งระบบแบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p