Object Literals Enhancement

Object Literals Enhancement: สร้าง Object ให้ง่ายและกระชับขึ้น

ในบทเรียนก่อนหน้า เราได้เรียนรู้เกี่ยวกับ Destructuring Assignment ซึ่งช่วยให้การดึงข้อมูลจาก Object ง่ายขึ้น ในบทนี้ เราจะมาดู Object Literals Enhancement ซึ่งเป็นฟีเจอร์ที่ช่วยให้การสร้าง Object ใน JavaScript ง่ายและกระชับยิ่งขึ้นไปอีก

Object Literals Enhancement มี 3 ส่วนหลักที่เราจะพูดถึง:

Property Shorthand
Method Definition Shorthand
Computed Property Names

Property Shorthand

Property Shorthand ช่วยให้เราสร้าง Object ได้ง่ายขึ้นเมื่อ key ของ Object มีชื่อเดียวกับชื่อของตัวแปรที่เราต้องการนำมาใส่ใน Object

ตัวอย่าง:

const name = 'John';
const age = 30;

// แบบเดิม
const person = {
  name: name,
  age: age
};

// ใช้ Property Shorthand
const personShorthand = {
  name,
  age
};

console.log(person);       // Output: { name: 'John', age: 30 }
console.log(personShorthand); // Output: { name: 'John', age: 30 }

จากตัวอย่าง จะเห็นว่าเมื่อใช้ Property Shorthand เราไม่ต้องเขียน name: name ซ้ำ เพียงแค่เขียน name ก็พอ JavaScript จะเข้าใจว่าเราต้องการนำค่าจากตัวแปร name มาใส่ใน Object โดยให้ key ชื่อ name

ทำไมต้องใช้ Property Shorthand?

ลดความซ้ำซ้อน: ลดการเขียนโค้ดที่ซ้ำซ้อน ทำให้โค้ดสั้นลง
อ่านง่ายขึ้น: โค้ดที่สั้นลงมักจะอ่านง่ายและเข้าใจได้ง่ายขึ้น

Method Definition Shorthand

Method Definition Shorthand ช่วยให้เรากำหนด method (ฟังก์ชัน) ใน Object ได้ง่ายขึ้น โดยไม่ต้องใช้ keyword function

ตัวอย่าง:

const person = {
  name: 'John',
  age: 30,

  // แบบเดิม
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  },

  // ใช้ Method Definition Shorthand
  greetShorthand() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet();          // Output: Hello, my name is John
person.greetShorthand(); // Output: Hello, my name is John

จากตัวอย่าง จะเห็นว่าเมื่อใช้ Method Definition Shorthand เราสามารถเขียน greetShorthand() {} แทน greet: function() {} ได้เลย

ทำไมต้องใช้ Method Definition Shorthand?

ลดความซ้ำซ้อน: ลดการเขียน keyword function ทำให้โค้ดสั้นลง
อ่านง่ายขึ้น: โค้ดที่สั้นลงมักจะอ่านง่ายและเข้าใจได้ง่ายขึ้น

Computed Property Names

Computed Property Names ช่วยให้เรากำหนดชื่อ key ของ Object โดยใช้ expression ซึ่งจะถูกประมวลผลก่อนที่จะนำมาใช้เป็นชื่อ key

ตัวอย่าง:

const prefix = 'user';
let i = 1;

const user = {
  [`${prefix}${i++}`]: 'John',
  [`${prefix}${i++}`]: 'Jane',
  [`${prefix}${i++}`]: 'Peter'
};

console.log(user); // Output: { user1: 'John', user2: 'Jane', user3: 'Peter' }
console.log(user.user1); // Output: John

จากตัวอย่าง จะเห็นว่าเราใช้ template literals (`${prefix}${i++}`) ภายใน square brackets ([]) เพื่อกำหนดชื่อ key ของ Object แบบ dynamic ในแต่ละครั้งที่สร้าง property ใหม่ ค่าของ i จะเพิ่มขึ้น ทำให้ได้ key เป็น user1, user2 และ user3 ตามลำดับ

ตัวอย่างเพิ่มเติม:

const keyName = 'firstName';

const person = {
  [keyName]: 'John',
  ['last' + 'Name']: 'Doe'
};

console.log(person); // Output: { firstName: 'John', lastName: 'Doe' }

ในตัวอย่างนี้ เราใช้ตัวแปร keyName และ string concatenation เพื่อกำหนดชื่อ key ของ Object

ทำไมต้องใช้ Computed Property Names?

Dynamic Key Names: กำหนดชื่อ key ของ Object แบบ dynamic ตามเงื่อนไขหรือข้อมูลที่ได้จากการประมวลผล
ความยืดหยุ่น: เพิ่มความยืดหยุ่นในการสร้าง Object

สรุป

Object Literals Enhancement เป็นฟีเจอร์ที่มีประโยชน์อย่างมากในการสร้าง Object ใน JavaScript ช่วยให้โค้ดสั้นลง อ่านง่ายขึ้น และมีความยืดหยุ่นมากขึ้น

Property Shorthand: ใช้เมื่อชื่อ key ของ Object ตรงกับชื่อตัวแปร
Method Definition Shorthand: ใช้เมื่อกำหนด method ใน Object
Computed Property Names: ใช้เมื่อต้องการกำหนดชื่อ key ของ Object แบบ dynamic

ในบทเรียนถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน Array Methods เช่น map, filter และ reduce ซึ่งเป็นเครื่องมือสำคัญในการจัดการข้อมูลใน Array