10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 3 Enhanced Object Literals)
Tags: javascript, es5, es6
Published: 2021-05-25 03:04:10

---
title: 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 3 Enhanced Object Literals)
published: true
description: 
tags: javascript, es5, es6
//cover_image: https://direct_url_to_image.jpg
---

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

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา `JavaScript` ทุกท่าน บทความนี้เป็นตอนที่ 3 ในซี่รีย์ชุด [10 เรื่องของ ES6 ที่คุณควรรู้ไว้](https://dev.to/iammen/10-es6-1-default-function-parameter-2ej) ครั้งนี้ เรามาลุยกันต่อในเรื่อง Object literals

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

### Object ปะทะ JSON

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

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

```json
{
    "make": "Japan",
    "model": "VIOS",
    "value": 1500
}
```

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


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

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

```javascript
// การกำหนคค่าให้กับ 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` กัน ว่าถ้าความต้องการแบบเดียวกันการเขียนจะแตกต่างกันอย่างไร

```javascript
// การกำหนคค่าให้กับ 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 วิธีคือ

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

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

```javascript
// ประกาศ 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` กันก่อน

```javascript
var props = "name";
var obj = {};
obj[props] = "Foo";

console.log(obj.name);
```

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

```javascript
var props = "name";
const obj = {
  [props]: "Bar"
}

console.log(obj.name);
```

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

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

```javascript
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` กันก่อน

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

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

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

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



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

- [Object Literal Syntax Extensions in ES6](https://www.javascripttutorial.net/es6/object-literal-extensions)
- [Enhanced Object Literals in ES6](https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d)