10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 1 Default Function Parameter)

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

1. Default Function Parameters
2. Template Literals
3. Enhanced Object Literals
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 นี่ละ

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 แบบในตัวอย่างต่อไปนี้นะครับ มาดูกัน

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 มาดูตัวอย่างกัน

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 ได้เลยแบบในตัวอย่างนี้

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

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

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

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

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

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 หนึ่งเป็นค่าเริ่มต้นได้

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

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

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

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

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 โปรดติดตามกันตอนต่อไปนะครับ