เวลาทำโปรเจกต์ JavaScript การสร้าง HTML element แบบ dynamic เป็นเรื่องปกติ ตามวิธีดั้งเดิม คุณอาจต้องใช้โค้ดหลายบรรทัดเพื่อสร้าง element แล้วตั้งค่า attribute ทีละตัว ดังตัวอย่างด้านล่าง:

const a = document.createElement('a')
a.setAttribute('class', 'foo bar')
a.setAttribute('id', 'id')
a.setAttribute('innerHTML', 'Hello World!')
a.setAttribute('href', 'https://www.google.com/')

วิธีนี้ใช้งานได้ก็จริง แต่การตั้งค่า attribute ทีละตัวนั้นน่าเบื่อ โดยเฉพาะเมื่อทำงานกับ codebase ขนาดใหญ่ และยังทำให้โค้ดบวมโดยไม่จำเป็น ซึ่งทำให้ codebase ดูแลรักษายากขึ้นและ debug ลำบากขึ้นด้วย

ในบทความนี้เราจะมาดูวิธีที่กระชับกว่าในการสร้าง HTML element พร้อมตั้งค่า attribute ในบรรทัดเดียว เพื่อให้โค้ดของคุณมีประสิทธิภาพและอ่านง่ายขึ้น

สร้าง HTML Element ในบรรทัดเดียวด้วย Object.assign()

เมธอด Object.assign() ของ JavaScript ช่วยให้คุณสร้าง HTML element และกำหนด property หลายตัวพร้อมกันได้ในครั้งเดียว ทำให้โค้ดกระชับขึ้นและลดการทำซ้ำจากการตั้งค่า attribute ทีละตัว

ทำได้แบบนี้:

Object.assign(document.createElement('a'), {
  id: 'id',
  class: 'whatever class',
  href: 'https://www.google.com/',
  innerHTML: 'This is a link'
});

ด้วย one-liner นี้ คุณกำลังสร้าง tag anchor (<a>) พร้อมตั้งค่า property id, class, href และ innerHTML ทั้งหมดในคราวเดียว นอกจากจะประหยัดเวลาแล้ว ยังทำให้โค้ดสะอาดและดูแลรักษาง่ายขึ้นด้วย

แจกแจงโค้ดทีละส่วน:

• Object.assign() คือเมธอดที่ copy property ทั้งหมดจาก source object หนึ่งตัวหรือหลายตัวไปยัง target object ในกรณีนี้ target คือ document.createElement('a') ซึ่งสร้าง anchor element ตัวใหม่ขึ้นมา
• ใน parameter ตัวที่สองของ Object.assign() เราส่ง object ที่บรรจุ attribute ที่ต้องการกำหนดให้กับ element เข้าไป
• key แต่ละตัวใน object จะตรงกับ attribute หรือ property ของ HTML (id, class, href ฯลฯ) ส่วน value คือค่าของ attribute นั้น

ข้อดีของการใช้ Object.assign()

• โค้ดสะอาดขึ้น: ตั้งค่า attribute หลายตัวได้ในบรรทัดเดียว ลดโค้ดซ้ำซ้อน
• ดูแลรักษาง่าย: วิธีนี้ทำให้โค้ดดูแลรักษาง่ายขึ้น เพราะ attribute ถูกตั้งค่าไว้ด้วยกัน จึงจัดการจากที่เดียวได้สะดวกกว่า
• อ่านง่ายขึ้น: เมื่อรวมการกำหนด attribute ไว้ด้วยกัน โค้ดจะอ่านง่ายขึ้นและใช้จำนวนบรรทัดน้อยลง

ควรใช้ Object.assign() เมื่อไหร่

แม้วิธีนี้จะใช้ได้กับเกือบทุกสถานการณ์ แต่มันมีประโยชน์เป็นพิเศษเมื่อ:

• คุณต้องสร้าง element หลายตัวแบบ dynamic โดยแต่ละตัวมี attribute ต่างกัน
• คุณอยากลดจำนวนบรรทัดของโค้ด โดยเฉพาะในโปรเจกต์ใหญ่ ๆ
• คุณอยากให้ element ที่คล้ายกันมีความสม่ำเสมอ ด้วยการกำหนด attribute เป็นชุดในครั้งเดียว

ทางเลือกอื่นสำหรับการสร้าง Element พร้อม Attribute ในบรรทัดเดียว

ใช้ Spread Operator กับ Destructuring

อีกวิธีในการสร้าง HTML element พร้อม attribute ในบรรทัดเดียวคือการใช้ความสามารถ spread operator และ destructuring ของ JavaScript

const attributes = {
  id: 'id',
  class: 'foo bar',
  href: 'https://www.google.com/',
  innerHTML: 'Hello World!'
};

const a = Object.assign(document.createElement('a'), {...attributes});

ในตัวอย่างนี้ เราเก็บ attribute ไว้ใน object (attributes) แล้วใช้ spread operator (...attributes) เพื่อกำหนด property ตอนสร้าง element วิธีนี้ยืดหยุ่นและทำให้นำชุด attribute เดิมกลับมาใช้กับ element อื่นได้ง่าย หรือจะปรับแต่ง attribute แบบ dynamic ก็ได้

ใช้ Custom Function
คุณยังสามารถสร้างฟังก์ชันสำหรับใช้ซ้ำเพื่อสร้าง element พร้อม attribute ในบรรทัดเดียวได้ด้วย

function createElement(tag, attributes) {
  return Object.assign(document.createElement(tag), attributes);
}

const a = createElement('a', {
  id: 'id',
  class: 'foo bar',
  href: 'https://www.google.com/',
  innerHTML: 'Hello World!'
});

ในตัวอย่างนี้ createElement() รับ argument สองตัว: ชื่อ tag (เช่น 'a', 'div' ฯลฯ) และ object ที่บรรจุ attribute ที่ต้องการ ฟังก์ชันนี้นำไปใช้ซ้ำได้ทั่วทั้งโค้ดของคุณ ทำให้โค้ดเป็น module มากขึ้นและแก้ไขได้ง่าย

สรุป

การตั้งค่า attribute ทีละตัวบน HTML element นั้นกินเวลาและทำให้เกิดโค้ดซ้ำซ้อน การใช้ Object.assign() ช่วยให้คุณสร้าง HTML element พร้อมกำหนด attribute หลายตัวได้ในบรรทัดเดียว ทำให้โค้ดอ่านง่ายและดูแลรักษาง่ายขึ้น นอกจากนี้วิธีอื่น ๆ อย่างการใช้ spread operator หรือ custom function ก็ช่วยให้โค้ดกระชับและมีประสิทธิภาพมากขึ้นเช่นกัน

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

---

คำถามที่พบบ่อย

1. Object.assign() ใน JavaScript คืออะไร?
Object.assign() คือเมธอดที่ copy property แบบ enumerable ทั้งหมดจาก source object หนึ่งตัวหรือหลายตัวไปยัง target object นิยมใช้สำหรับ merge object หรือตั้งค่า property บน object แบบกระชับ

2. สร้าง HTML element พร้อม attribute หลายตัวในบรรทัดเดียวได้ไหม?
ได้ ด้วย Object.assign() หรือวิธีทำนองเดียวกัน คุณสามารถสร้าง HTML element พร้อมกำหนด attribute หลายตัวได้ในบรรทัดเดียว

3. การใช้ Object.assign() ตั้งค่า attribute ของ HTML มีข้อดีอะไรบ้าง?

การใช้ Object.assign() ทำให้โค้ดสะอาดขึ้น อ่านง่ายขึ้น และดูแลรักษาง่ายขึ้น ลดความจำเป็นในการตั้งค่า attribute ทีละตัว โดยรวมทุกอย่างไว้ในบรรทัดเดียว

4. ใช้ Object.assign() ร่วมกับฟีเจอร์อื่นของ JavaScript อย่าง spread operator ได้ไหม?
ได้แน่นอน! คุณสามารถใช้ Object.assign() ร่วมกับ spread operator หรือแม้แต่ destructuring เพื่อให้โค้ดอ่านง่ายและนำกลับมาใช้ซ้ำได้ดียิ่งขึ้น

5. มีทางเลือกอื่นนอกจาก Object.assign() สำหรับตั้งค่า attribute ในบรรทัดเดียวไหม?
ทางเลือกอื่น ๆ ได้แก่ การใช้ spread operator, destructuring หรือการสร้าง custom function ที่ห่อ logic การตั้งค่า attribute ให้กับ element ไว้ข้างใน

---

การ optimize โค้ด JavaScript ของคุณด้วยเมธอดอย่าง Object.assign() จะช่วยยกระดับกระบวนการพัฒนา ทำให้ทำงานได้มีประสิทธิภาพขึ้นและลดโค้ด boilerplate แนวทางนี้สอดคล้องกับ best practice สมัยใหม่ และช่วยให้แอปพลิเคชัน JavaScript ของคุณ scale ได้และดูแลรักษาได้ในระยะยาว