สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้คงเป็นบทความแรกในซี่รีย์ชุด 10 เรื่องของ ES6 ที่คุณควรรู้ไว้
ซึ่งผมคิดว่าถ้าคุณต้องการเป็น JavaScript
developer ควรรู้ 10 เรื่องนี้เป็นพื้นฐานไว้ ซึ่งมันมีอะไรกันบ้างมาดูกันเลยครับ
- Default Function Parameters
- Template Literals
- Enhanced Object Literals
- Arrow Functions
- Modules
- Destructuring Assignment
- Promises
- Generator
- Block-Scoped Constructs Let and Const
- 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 อย่างคือ
- กำหนดค่าเริ่มต้นให้กับตัวแปรภายใน function 2 ตัวคือ hours และ rate (ถึงแม้ผมจะใช้ชื่อเดียวกัน แต่จริงๆ แล้วมันเก็บข้อมูลคนละที่กันนะครับ)
- ส่งค่าผลคูณของ 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 โปรดติดตามกันตอนต่อไปนะครับ
Top comments (0)