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
}
ปัจจุบันกล่าวได้ว่า 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');
จากตัวอย่าง 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');
เป็นยังไงครับ ใน ES6 เราสามารถนำตัวแปรที่ใช้รับค่าที่ส่งให้มาเป็น property ของ object ได้เลยทันที เมื่อเปรียบเทียบกันทั้ง 2 แบบคงเห็นแล้วว่าการกำหนด property ให้กับ object ในแบบ ES6 นั้นทำให้เราเขียน code ได้สั้นลงกว่าแบบ ES5 พอสมควรเลย เพิ่มเวลาพักผ่อนเราขึ้นได้อีกนิส :)
Computed property keys
ก่อนอธิบายส่วนี้ผมขอทบทวนวิธีการเข้าถึง property ของ object กันก่อน อย่างที่คุณพอที่จะรู้กันอยู่แล้วว่า ถ้าต้องการเข้าถึงข้อมูลที่เก็บอยู่ใน property ของ object ใดๆ นั้น สามารถทำได้ 2 วิธีคือ
- ใช้เครื่องหมายจุด
.(dot notation) เช่น ถ้าเราต้องการเข้าถึงข้อมูลที่เก็บใน property ที่ชื่อว่า name ของ object ที่ชื่อว่า myPet รูปแบบการใช้งานคือ myPet.name - ใช้เครื่องหมายวงเล็บปีกกาสี่เหลี่ยม
[ ](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']);
เราสามารถใช้ string literals และเครื่องหมายวงเล็บปีกกาสี่เหลี่ยม [ ] เพื่อประกาศ property ได้ โดยระหว่าง ES5 และ ES6 ก็มีความแตกต่างกันอีกเช่นเคย มาเริ่มที่ ES5 กันก่อน
var props = "name";
var obj = {};
obj[props] = "Foo";
console.log(obj.name);
และต่อกันด้วยแบบ ES6
var props = "name";
const obj = {
[props]: "Bar"
}
console.log(obj.name);
จากตัวอย่างทั้ง 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"
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;
}
};
}
แล้วในแบบ ES6 ละเป็นแบบไหน
// การประกาศ method ของ object ใน ES6
function getCar(make, model, value) {
return {
// เราสามารถละ syntax function และ : ได้ในตอนประกาศ method
depreciate() {
this.value -= 1500;
}
};
}
บทความนี้ขอเสนอเนื้อหาในเรื่อง Object literals ไว้เบาๆ เพียงเท่านี้ก่อน ขอให้ติดตามและสนุกกับการเรียนรู้กันต่อไปนะครับ
Top comments (0)