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

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('[e-mail]', '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('[e-mail]', 'rockman', 'xxx-xxxxxx');

เป็นยังไงครับ ใน 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']);

เราสามารถใช้ 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 ไว้เบาๆ เพียงเท่านี้ก่อน ขอให้ติดตามและสนุกกับการเรียนรู้กันต่อไปนะครับ

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

• Object Literal Syntax Extensions in ES6
• Enhanced Object Literals in ES6