DEV Community

iammen
iammen

Posted on • Edited on

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 3 Enhanced Object Literals)

#javascript #es5 #es6

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 3 Enhanced Object Literals)

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้เป็นตอนที่ 3 ในซี่รีย์ชุด 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ ครั้งนี้ เรามาลุยกันต่อในเรื่อง Object literals

ในบทความนี้เราจะมาเรียนรู้กันในเรื่อง Enhanced Object Literals ซึ่งเป็นเนื้อหาสำคัญอีกเรื่องหนึ่งใน ES6 ที่คุณควรรู้จักเอาไว้ มาลุยกันเลยครับ

Object ปะทะ JSON

รูปแบบการประกาศ object ใน JavaScript นั้นมีหน้าตาใก้ลเคียงกับรูปแบบการประกาศ JSON เอามากๆ ซึ่ง ณ ปัจจุบันคิดว่าคงจะไม่มีเว็บโปรแกรมเมอร์คนไหนไม่รู้จักเจ้า JSON นี้เป็นแน่

สำหรับท่านใดที่ยังไม่คุ้นเคยกับรูปแบบ JSON มาดูตัวอย่างกันก่อน

{ "make": "Japan", "model": "VIOS", "value": 1500 }
Enter fullscreen mode Exit fullscreen mode

ปัจจุบันกล่าวได้ว่า JSON เป็นรูปแบบที่นักพัฒนานิยมใช้ในการแลกเปลี่ยนข้อมูลกันไปมาระหว่าง application ฝั่ง frontend และฝั่ง backend เนื่องด้วยก็เพราะเหตุผลอย่างที่เห็นตามตัวอย่าง มันมีรูปแบบที่สั้นกระชับ ทำความเข้าใจง่าย จึงได้รับความนิยมมากนั่นเอง

รูปแบบการประกาศ Property

วิธีการประกาศ object ขึ้นมาใช้งานใน ES6 มีการปรับปรุงการใช้งานให้ง่ายและกระชับมากขึ้นกว่ารูปแบบการประกาศแบบ ES5 เราลองมาเปรียบเทียบกันดูว่าระหว่างทั้ง 2 แบบมีวิธีการใช้งานแตกต่างกันอย่างไร เริ่มกันที่แบบ ES5 ก่อน

// การกำหนคค่าให้กับ property ใน ES5 function makeUser(email, fullname, phone) { return { email: email, fullname: fullname, phone: phone }; } // เรียกใช้งานฟัง์ชั่น makeUser('test@gmail.com', 'rockman', 'xxx-xxxxxx');
Enter fullscreen mode Exit fullscreen mode

จากตัวอย่าง function ชื่อ markUser จะรับ parameter 3 ตัวคือ email, fullname และ phone และจะให้ผลลัพธ์เป็น object ซึ่งจะมี property ชื่อเดียวกับ parameter ที่รับค่ามา คือ emil, fullname และ phone เช่นกัน

ทีนี้ลองมาดูการใช้งานในแบบ ES6 กัน ว่าถ้าความต้องการแบบเดียวกันการเขียนจะแตกต่างกันอย่างไร

// การกำหนคค่าให้กับ property ใน ES6 function makeUser(email, fullname, phone) { return { email, fullname, phone }; } // เรียกใช้งานฟัง์ชั่น makeUser('test@gmail.com', 'rockman', 'xxx-xxxxxx');
Enter fullscreen mode Exit fullscreen mode

เป็นยังไงครับ ใน ES6 เราสามารถนำตัวแปรที่ใช้รับค่าที่ส่งให้มาเป็น property ของ object ได้เลยทันที เมื่อเปรียบเทียบกันทั้ง 2 แบบคงเห็นแล้วว่าการกำหนด property ให้กับ object ในแบบ ES6 นั้นทำให้เราเขียน code ได้สั้นลงกว่าแบบ ES5 พอสมควรเลย เพิ่มเวลาพักผ่อนเราขึ้นได้อีกนิส :)

Computed property keys

ก่อนอธิบายส่วนี้ผมขอทบทวนวิธีการเข้าถึง property ของ object กันก่อน อย่างที่คุณพอที่จะรู้กันอยู่แล้วว่า ถ้าต้องการเข้าถึงข้อมูลที่เก็บอยู่ใน property ของ object ใดๆ นั้น สามารถทำได้ 2 วิธีคือ

  1. ใช้เครื่องหมายจุด . (dot notation) เช่น ถ้าเราต้องการเข้าถึงข้อมูลที่เก็บใน property ที่ชื่อว่า name ของ object ที่ชื่อว่า myPet รูปแบบการใช้งานคือ myPet.name
  2. ใช้เครื่องหมายวงเล็บปีกกาสี่เหลี่ยม [ ] (square bracket notation) เช่น ถ้าเราต้องการเข้าถึงข้อมูลที่เก็บใน property ที่ชื่อว่า name ของ object ที่ชื่อว่า myPet รูปแบบการใช้งานจะเป็น myPet['name']

มาดูตัวอย่างทั้งหมดในโค้ดตัวอย่าง

// ประกาศ object myPet let myPet = { name: 'บราวน์', type: 'dog' }; // เข้าถึงข้อมูลโดยการใช้ dot notation console.log(myPet.name); // เข้าถึงข้อมูลโดยการใช้ square bracket notation console.log(myPet['name']);
Enter fullscreen mode Exit fullscreen mode

เราสามารถใช้ string literals และเครื่องหมายวงเล็บปีกกาสี่เหลี่ยม [ ] เพื่อประกาศ property ได้ โดยระหว่าง ES5 และ ES6 ก็มีความแตกต่างกันอีกเช่นเคย มาเริ่มที่ ES5 กันก่อน

var props = "name"; var obj = {}; obj[props] = "Foo"; console.log(obj.name);
Enter fullscreen mode Exit fullscreen mode

และต่อกันด้วยแบบ ES6

var props = "name"; const obj = { [props]: "Bar" } console.log(obj.name);
Enter fullscreen mode Exit fullscreen mode

จากตัวอย่างทั้ง 2 คงพอจะเห็นกันว่า ใน ES5 เราจะต้องทำการประกาศ obj object ก่อน จากนั้นจึงค่อยประกาศ property โดยใช้ string literals และกำหนดค่าข้อมูลลงไป

นอกจากนั้นแล้วเรายังสามารถใช้ string literals รวมกับ expression ภายในเครื่องหมายวงเล็บปีกกาสี่เหลี่ยม [ ] เพื่อประกาศ property ได้เช่นเดียวกัน มาลองดูตัวอย่างกัน

var props = "name"; var i = 0; const stringWithExpression = { [props + ++i]: "Foo", [props + ++i]: "Bar", [props + ++i]: "Haha" } console.log(stringWithExpression.name1); //"Foo" console.log(stringWithExpression.name2); //"Bar" console.log(stringWithExpression.name3); //"Haha"
Enter fullscreen mode Exit fullscreen mode

Method definition shorthand

การประกาศ method ของ object ใน ES6 ช่วยให้เราสามารถลดจำนวนการใช้งาน syntax ลง มาดูตัวอย่างจาก ES5 กันก่อน

// การประกาศ method ของ object ใน ES5 function getCar(make, model, value) { return { // เราใช้ syntax function และ : ในตอนประกาศ method depreciate: function() { this.value -= 1500; } }; }
Enter fullscreen mode Exit fullscreen mode

แล้วในแบบ ES6 ละเป็นแบบไหน

// การประกาศ method ของ object ใน ES6 function getCar(make, model, value) { return { // เราสามารถละ syntax function และ : ได้ในตอนประกาศ method depreciate() { this.value -= 1500; } }; }
Enter fullscreen mode Exit fullscreen mode

บทความนี้ขอเสนอเนื้อหาในเรื่อง Object literals ไว้เบาๆ เพียงเท่านี้ก่อน ขอให้ติดตามและสนุกกับการเรียนรู้กันต่อไปนะครับ

แหล่งข้อมูลที่นำมาอ้างอิง

Top comments (0)