เข้าใจ Object เข้าใจ JavaScript

ในโลกของ JavaScript, Object (อ็อบเจกต์) คือหัวใจและแก่นแท้ของภาษา ถ้าคุณเข้าใจการทำงานของ Object อย่างถ่องแท้ คุณก็แทบจะเข้าใจ JavaScript ทั้งหมดเลยทีเดียว บทความนี้จะพาคุณไปสำรวจ Object ตั้งแต่พื้นฐานจนถึงแนวคิดที่สำคัญ เพื่อให้คุณพร้อมที่จะพัฒนาเว็บแอปพลิเคชันที่มีประสิทธิภาพ

Object คืออะไร?

ลองจินตนาการถึง Object เหมือนกับ “สิ่งของ” หรือ “เอนทิตี” ที่มีอยู่จริงในโลกของเรา เช่น โทรศัพท์มือถือ รถยนต์ หรือแม้แต่ตัวบุคคล สิ่งของเหล่านี้มี คุณสมบัติ (Properties) และ พฤติกรรม (Behaviors)

• คุณสมบัติ (Properties): คือลักษณะหรือข้อมูลที่อธิบายถึงสิ่งนั้นๆ เช่น โทรศัพท์มือถือมีสี, รุ่น, ขนาดหน้าจอ, ความจุแบตเตอรี่ รถยนต์มีสี, ยี่ห้อ, รุ่น, เลขทะเบียน

• พฤติกรรม (Behaviors): คือสิ่งที่สิ่งนั้นๆ สามารถทำได้ หรือการกระทำที่เกี่ยวข้องกับสิ่งนั้นๆ เช่น โทรศัพท์มือถือสามารถโทรออก, ส่งข้อความ, ถ่ายรูป รถยนต์สามารถวิ่ง, จอด, เลี้ยว

ใน JavaScript, Object ก็ทำงานในลักษณะเดียวกัน โดยมี Key-Value Pairs (คู่ของคีย์และค่า) ที่ใช้แทนคุณสมบัติ และ Methods (เมธอด) ที่ใช้แทนพฤติกรรม

โครงสร้างพื้นฐานของ Object

Object ใน JavaScript ถูกสร้างขึ้นโดยใช้เครื่องหมายวงเล็บปีกกา {} และประกอบด้วย Key-Value Pairs ดังนี้:

const myPhone = {
  // Key   : Value
  brand: "Apple",
  model: "iPhone 15 Pro Max",
  color: "Titanium Blue",
  storageGB: 256,
  isWorking: true,

  // Method (Behavior)
  call: function(phoneNumber) {
    console.log(`Calling ${phoneNumber} from my ${this.brand} ${this.model}.`);
  },
  sendMessage: function(message) {
    console.log(`Sending message: "${message}"`);
  }
};

const myPhone = {
  // Key   : Value
  brand: "Apple",
  model: "iPhone 15 Pro Max",
  color: "Titanium Blue",
  storageGB: 256,
  isWorking: true,

  // Method (Behavior)
  call: function(phoneNumber) {
    console.log(`Calling ${phoneNumber} from my ${this.brand} ${this.model}.`);
  },
  sendMessage: function(message) {
    console.log(`Sending message: "${message}"`);
  }
};

จากตัวอย่าง:

brand, model, color, storageGB, isWorking คือ Properties ที่เก็บข้อมูลเกี่ยวกับโทรศัพท์

call และ sendMessage คือ Methods ที่เป็นฟังก์ชันที่สามารถกระทำบางอย่างได้

การเข้าถึงและเปลี่ยนแปลงข้อมูลใน Object

คุณสามารถเข้าถึงค่าของ Properties และเรียกใช้ Methods ของ Object ได้หลายวิธี:

1. Dot Notation (การใช้จุด) เป็นวิธีที่พบบ่อยและอ่านง่ายที่สุด

console.log(myPhone.brand); // Output: Apple
console.log(myPhone.storageGB); // Output: 256

myPhone.call("081-234-5678"); // Output: Calling 081-234-5678 from my Apple iPhone 15 Pro Max.

// เปลี่ยนแปลงค่า Property
myPhone.color = "Natural Titanium";
console.log(myPhone.color); // Output: Natural Titanium

console.log(myPhone.brand); // Output: Apple
console.log(myPhone.storageGB); // Output: 256

myPhone.call("081-234-5678"); // Output: Calling 081-234-5678 from my Apple iPhone 15 Pro Max.

// เปลี่ยนแปลงค่า Property
myPhone.color = "Natural Titanium";
console.log(myPhone.color); // Output: Natural Titanium

2. Bracket Notation (การใช้วงเล็บเหลี่ยม) มีประโยชน์เมื่อ Key เป็นตัวแปร หรือมีอักขระพิเศษ (เช่น เว้นวรรค)

const propertyName = "model";
console.log(myPhone[propertyName]); // Output: iPhone 15 Pro Max

const anotherProperty = "color";
console.log(myPhone[anotherProperty]); // Output: Natural Titanium

// ตัวอย่าง Key ที่มีเว้นวรรค (ไม่แนะนำให้ใช้บ่อย)
const car = {
  "number of wheels": 4
};
console.log(car["number of wheels"]); // Output: 4

const propertyName = "model";
console.log(myPhone[propertyName]); // Output: iPhone 15 Pro Max

const anotherProperty = "color";
console.log(myPhone[anotherProperty]); // Output: Natural Titanium

// ตัวอย่าง Key ที่มีเว้นวรรค (ไม่แนะนำให้ใช้บ่อย)
const car = {
  "number of wheels": 4
};
console.log(car["number of wheels"]); // Output: 4

this Keyword: อ้างอิงถึง Object ปัจจุบัน

ภายใน Method ของ Object, Keyword this จะอ้างอิงถึง Object ที่เป็นเจ้าของ Method นั้นๆ ทำให้คุณสามารถเข้าถึง Properties อื่นๆ ของ Object ได้

const myCar = {
  brand: "Toyota",
  model: "Camry",
  year: 2023,
  getInfo: function() {
    // 'this' อ้างถึง myCar
    console.log(`This car is a ${this.year} ${this.brand} ${this.model}.`);
  }
};

myCar.getInfo(); // Output: This car is a 2023 Toyota Camry.

const myCar = {
  brand: "Toyota",
  model: "Camry",
  year: 2023,
  getInfo: function() {
    // 'this' อ้างถึง myCar
    console.log(`This car is a ${this.year} ${this.brand} ${this.model}.`);
  }
};

myCar.getInfo(); // Output: This car is a 2023 Toyota Camry.

การเพิ่ม/ลบ Properties และ Methods

คุณสามารถเพิ่ม Properties หรือ Methods ใหม่ๆ ให้กับ Object ที่มีอยู่แล้ว หรือลบออกได้ตลอดเวลา

// เพิ่ม Property
myPhone.price = 49900;
console.log(myPhone.price); // Output: 49900

// เพิ่ม Method
myPhone.takePhoto = function() {
  console.log("Taking a beautiful photo!");
};
myPhone.takePhoto(); // Output: Taking a beautiful photo!

// ลบ Property
delete myPhone.storageGB;
console.log(myPhone.storageGB); // Output: undefined

// เพิ่ม Property
myPhone.price = 49900;
console.log(myPhone.price); // Output: 49900

// เพิ่ม Method
myPhone.takePhoto = function() {
  console.log("Taking a beautiful photo!");
};
myPhone.takePhoto(); // Output: Taking a beautiful photo!

// ลบ Property
delete myPhone.storageGB;
console.log(myPhone.storageGB); // Output: undefined

Object คือพื้นฐานของทุกสิ่งใน JavaScript

ทำไมถึงบอกว่าถ้าเข้าใจ Object จะเข้าใจ JavaScript? เพราะสิ่งต่างๆ ที่คุณใช้งานใน JavaScript ล้วนเป็น Object หรือมีพื้นฐานมาจาก Object ทั้งสิ้น:

• Arrays (อาร์เรย์): คือ Object ชนิดพิเศษที่มีการจัดเรียงข้อมูลตามลำดับ และมี Properties และ Methods สำหรับการจัดการข้อมูล (เช่น length, push(), pop())
• Functions (ฟังก์ชัน): ใน JavaScript, ฟังก์ชันก็เป็น Object ชนิดหนึ่ง! มันสามารถมี Properties และ Methods ได้ (แม้ว่าจะไม่ค่อยเห็นการใช้งานบ่อยนัก)
• DOM Elements: เมื่อคุณสร้างเว็บไซต์, ทุกๆ องค์ประกอบ HTML (เช่น <p>, <div>, <button>) ที่คุณเข้าถึงด้วย JavaScript คือ Object ที่มี Properties (เช่น id, className, innerHTML) และ Methods (เช่น addEventListener(), appendChild())
• Date, Math, RegExp: สิ่งเหล่านี้ก็คือ Object ที่มี Properties และ Methods ที่ช่วยให้เราทำงานกับวันที่, การคำนวณทางคณิตศาสตร์, หรือ Regular Expressions ได้

สรุป

Object คือแนวคิดหลักใน JavaScript ที่ช่วยให้คุณสามารถจัดระเบียบข้อมูลและฟังก์ชันที่เกี่ยวข้องเข้าด้วยกันเป็นหน่วยเดียว การเข้าใจ Object อย่างถ่องแท้จะเปิดประตูสู่การเขียนโค้ดที่มีโครงสร้าง, สามารถนำกลับมาใช้ใหม่ได้, และมีความซับซ้อนมากขึ้น

เริ่มต้นด้วยการฝึกสร้าง Object ง่ายๆ, เข้าถึง Properties และ Methods, และลองปรับเปลี่ยนค่าต่างๆ เมื่อคุณคุ้นเคยกับพื้นฐานเหล่านี้ คุณจะพบว่าแนวคิดของ Object แทรกซึมอยู่ในทุกๆ ส่วนของ JavaScript และจะช่วยให้คุณเข้าใจภาษาได้อย่างลึกซึ้งยิ่งขึ้น