10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 1 Default Function Parameter)
Tags: javascript, es5, es6
Published: 2021-05-17 01:16:55

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

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้คงเป็นบทความแรกในซี่รีย์ชุด `10 เรื่องของ ES6 ที่คุณควรรู้ไว้` ซึ่งผมคิดว่าถ้าคุณต้องการเป็น `JavaScript` developer ควรรู้ 10 เรื่องนี้เป็นพื้นฐานไว้ ซึ่งมันมีอะไรกันบ้างมาดูกันเลยครับ

1. [Default Function Parameters](https://dev.to/iammen/10-es6-1-default-function-parameter-2ej)
2. [Template Literals](https://dev.to/iammen/10-es6-2-template-literals-298h)
3. [Enhanced Object Literals](https://dev.to/iammen/10-es6-3-enhanced-object-literals-7a8)
4. Arrow Functions
5. Modules
6. Destructuring Assignment
7. Promises
8. Generator
9. Block-Scoped Constructs Let and Const
10. Classes

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



### เริ่มด้วย Default function parameter คืออะไร?

default function parameter คือการที่เรากำหนดค่าเริ่มต้นให้กับ parameter ที่เราต้องการจะส่งให้กับ function  

ประโยชน์ของการกำหนดค่าเริ่มต้นที่พบเจอกันบ่อยๆ ก็คือ ในบางครั้งเราเกิดอยากที่จะกำหนดค่าเริ่มต้นให้กับ parameter บางตัวก่อนที่จะนำพวกมันมาให้งานภายในส่วน code ที่เราเขียนไว้ภายใน function ต่ออีกที ซึ่งเจ้า default function parameter นี่ละ ที่จะเป็นพระเอกในงานนี้



### ถ้าไม่กำหนดค่าเริ่มต้นให้กับ parameter ละจะได้มั้ย?

ถ้า parameter ที่ส่งผ่านมาให้กับ function ไม่มีการกำหนดค่าใดๆ ให้กับมัน เจ้า `JavaScript` ก็จะจัดการกำหนดค่าเริ่มต้นให้กับ parameter นั้นให้เป็น `undefined` โดยอัตโนมัติทันที เพียงเท่านี้ก็สิ้นเรื่องใช่มั้ยครับ 555 แต่!!! คุณควรตรวจสอบการทำงานภายใน function ของคุณอีกครั้ง เพราะมีหลายครั้งที่ผมเองก็ต้องมานั่งไล่แก้ปัญหาเพราะเจ้า `undefined` นี่ละ

```javascript
function calcOT(hours, rate) {
  	// แสดงค่าข้อมูลที่เก็บไวัในตัวแปร hours และ rate
  	console.log(hours);
  	console.log(rate);
 
    return hours * rate;
}

// แสดงค่าผลลพธ์ที่ได้จากการเรียกใช้งาน function calcOT
console.log(calcOT());
```


### การกำหนดค่า default function parameter ก่อนยุค ES6

สำหรับท่านใดที่เคยใช้งาน `JavaScript` มาแล้วสักระยะหนึ่งคงคุ้นตากับการกำหนดค่าเริ่มต้นให้กับ parameter ที่ส่งผ่านมาให้กับ function แบบในตัวอย่างต่อไปนี้นะครับ มาดูกัน

```javascript
function calcOT(hours, rate) {
  	// กำหนดค่าเริ่มต้นให้กับตัวแปร hours
    var hours = (typeof hours !== 'undefined') ? hours : 1;
  
  	// กำหนดค่าเริ่มต้นให้กับตัวแปร rate
    var rate = (typeof rate !== 'undefined') ? rate : 200;
 
    return hours * rate;
}

// พิมพ์ output ที่ได้จากการเรียกใช้งาน function
console.log(calcOT(10)); // 2000
```

จากตัวอย่างเป็น function ชื่อ *calcOT* ซึ่งใช้สำหรับการคำนวณเงินโอทีแบบง่ายๆ ซึ่งเจ้า function นี้จะต้องการ parameter อยู่ 2 ตัวคือ 

- *hours* แทนจำนวนชั่วโมงทำงาน
- *rate* แทนอัตราค่าโอที 

จากนั้น code ภายใน function จะมีการทำงานหลักๆ อยู่ 2 อย่างคือ

1. กำหนดค่าเริ่มต้นให้กับตัวแปรภายใน function 2 ตัวคือ hours และ rate (ถึงแม้ผมจะใช้ชื่อเดียวกัน แต่จริงๆ แล้วมันเก็บข้อมูลคนละที่กันนะครับ)
2. ส่งค่าผลคูณของ hours และ rate ออกไป

> function นี้ดูไม่ซับซ้อนอะไรใช่มั้ยครับ แต่ลองนึกดูนะ ถ้าเราไม่มีการกำหนดค่าเริ่มต้นอะไรเลยให้กับตัวแปรทั้งสอง คุณคิดว่าผลลัพธ์ที่คุณจะได้จาก function นี้จะเป็นอย่างไร มันจะได้ผลลัพธ์อย่างที่เราต้องการกันจริงๆ มั้ย คำตอบของคำถามนี้ไม่มีเฉลยให้ภายในบทความนี้นะครับ ไปทดลองดูกันเองแล้วกัน

ยังมีอีกวิธีนะครับที่เราเอามาใช้ในการกำหนดค่าเริ่มต้น ซึ่งเป็นใช้เครื่องหมาย `||` แทนการตรวจสอบข้อมูล `undefined` มาดูตัวอย่างกัน

```javascript
function calcOT(hours, rate) {
  // กำหนดค่าเริ่มต้นให้กับตัวแปร hours
  var hours =  hours || 1;
  
  // กำหนดค่าเริ่มต้นให้กับตัวแปร rate
  var rate = rate || 200;
  
  return hours * rate;
}

// เรียกใช้งาน function
alert(calcOT(5)); // 1000
```



### การกำหนดค่า default function parameter สไตล์ ES6

สำหรับ ES6 เราสามารถกำหนคค่าเริ่มต้นให้กับ parameter ได้เลยแบบในตัวอย่างนี้

```javascript
function calcOT(hours = 1, rate = 200) {
  return hours * rate;
}

// เรียกใช้งาน function
alert(calcOT(10)); // 2000
```

คุณสามารถลดการเขียน code ไปได้พอสมควรเลยนะ เป็นไงความสามารถนี้เริ่มดูดีหรือยังครับ :)



### ค่าที่กำหนดให้เป็นค่าเริ่มต้นสามารถเป็นอะไรได้บ้าง?

คุณสามารถใช้ค่าข้อมูล, ตัวแปร หรือ function กำหนดเป็นค่าเริ่มต้นให้กับ parameter ได้ ซึ่งตัวอย่างที่ผ่านมาคงเห็นการกำหนดค่าเริ่มต้นด้วยวิธีกำหนดค่าข้อมูลลงไปตรงๆ กันแล้ว มาดูตัวอย่างการกำหนดค่าเริ่มต้นโดยใช้ function กันบ้างดีกว่า ลุยเลย

```javascript
function callYourHero(hero = myHero()) {
    return thing;
}

function myHero() {
    return 'Superman';
}

// เรียกใช้งาน function callYourHero
console.log(callYourHero()); // Superman
```

ตัวอย่างข้างบนเป็นการกำหนด function ชื่อ `myHero` ให้เป็นค่าเริ่มต้นของ parameter ชื่อ `hero` ของ function ชื่อ `callYourHero` เมื่อเราเรียก `callYourHero` ทำงาน parameter ชื่อ hero ก็จะได้ค่า "Superman" ไปเก็บไว้ จากนั้นจึงส่งค่าคืนกลับไปส่วนที่เรียกใช้มัน ผลลัพธ์ของการทำงานจึงเป็นการแสดงคำว่า "Superman" นั่นเอง

แต่เราไม่สามารถกำหนด function ที่อยู่ในส่วน body ของอีก function หนึ่งเป็นค่าเริ่มต้นได้

```javascript
function callSomething(thing = something()) {
   function something() { return 'some thing'; }
}

console.log(callSomething()); // เกิด error ไปลองดูข้อความผิดพลาดอีกที
```



### การใช้ลำดับก่อนหลังของ parameter ในการกำหนดค่าเริ่มต้น

เราสามารถนำค่าเริ่มต้นของ parameter ตัวที่พบก่อน (ไล่จากซ้ายไปขวา) มาใช้กำหนดเป็นค่าเริ่มต้นให้กับ parameter ตัวต่อๆ มาได้

```javascript
function multiply (a, b = 2) {
    return a * b;
}

multiply(5); // 10

function fn(num = 1, multi = multiply(num)) {
  return [num, multi];
}

fn(); // [1, 2]
fn(6); // [6, 12]
```


เอาละ คุณคงได้เห็นรูปแบบการใช้งานของ default function parameter ใน ES6 กันไปพอสมควร คิดว่าน่าจะพอที่จะนำไปใช้งานกันต่อได้ บทความหน้าจะเป็นเรื่อง Template Literals โปรดติดตามกันตอนต่อไปนะครับ