DEV Community: iammen

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 4 Arrow Functions)

iammen — Sun, 17 Jul 2022 16:28:12 +0000

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 4 Arrow Functions)

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้เป็นตอนที่ 4 ในซี่รีย์ชุด 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ ครั้งนี้ผมจะมาแบ่งปันกับทุกๆ คนในเรื่อง Arrow Functions กัน

Arrow function เป็นรูปแบบ syntax ที่ใช้งานสำหรับ function โดยเฉพาะ ตัว syntax ที่ใช้จะมีลักษณะคล้ายลูกศรคือ => ประโยชน์หลักๆ ของมันก็คือ ทำให้รูปแบบการเขียน function ใน JavaScrip ดูสั้นกระชับมากขึ้น รวมทั้งความสามารถในการจัดการกับ this keyword ของมันก็ทำให้เราทำความเข้าใจได้ง่ายขึ้นเช่นกัน มาลองดูตัวอย่างการใช้งานของมันกันเลย

เขียน function ให้กระชับด้วย Arrow function

ตัวอย่างที่กำลังจะแสดงเราจะประกาศตัวแปร array ชื่อ aHero ซึ่งมันจะเก็บข้อมูล string แบบตัวพิมพ์เล็กทั้งหมดเอาไว้ 1 ชุด จากนั้นเราจะลองใช้งาน arrow function ร่วมกับ map method (map เป็น built-in method ของ Array object ใน JavaScript) เพื่อเปลี่ยนข้อความใน array เป็นตัวพิมพ์ใหญ่ทั้งหมดด้วย toUpperCase method อีกที อธิบายมากเดี๋ยวจะงง มาดูตัวอย่างกันดีกว่า

// ประกาศตัวแปร array
var aHero = ['superman', 'spiderman', 'batman'];

// ใช้ map method ใน ES5 เดิม
var es5Output = aHero.map(function(h) { 
  return h.toUpperCase()
});

// ใช้ map method ใน ES6 ด้วย arrow function
var es6Output = aHero.map( h => h.toUpperCase() );

console.log(es5Output);  // ['SUPERMAN', 'SPIDERMAN', 'BATMAN']
console.log(es6Output);  // ['SUPERMAN', 'SPIDERMAN', 'BATMAN']

การทำงานของตัวอย่างนี้ map method จะรับ parameter เข้าไป 1 ตัวซึ่งคือฟังก์ชั่นแบบไม่มีชื่อหรือที่เรียกกันว่า anonymous function และ function นี้ก็จะรับ parameter อีก 1 ตัวที่เราตั้งชื่อว่า h ซึ่งตัวแปร h นี้จะเก็บข้อมูล string ซึ่งก็จะคือข้อมูลในแต่ละตำแหน่งที่เก็บอยู่ในตัวแปร aHero นั้นเอง สุดท้ายในส่วน body ของ function นี้ก็จะทำการเปลี่ยนข้อความ string ให้เป็นตัวพิมพ์ใหญ่ด้วย toUpperCase method และทำการคืนค่ามันออกมา

จะสังเกตว่าเมื่อเราใช้ arrow function เราจะสามารถละการเขียน function และ return syntax ไปได้เลย ทำให้ code ที่ได้ดูสั้นกระชับมากขึ้น

ต่อไปมาลองดูตัวอย่างการใช้งาน arrow function แบบใช้ parameter หลายๆ ตัวกันบ้าง

// แบบ ES5
var es5Multiply = function(x, y) {
 return x * y;
}
alert(es5Multiply(2, 5)); // 10

// แบบ ES6
var es6Multiply = (x, y) => { return x * y };
alert(es6Multiply(4, 10)); // 40

`this` keyword ใน `JavaScript`

จากที่ทราบกันว่าในทุกๆ function จะมีการประกาศ this ของมันเองขึ้นมาใช้งาน ซึ่งถ้าใครเคยผ่านการเขียนโปรแกรมด้วยภาษา C# หรือ Java มาก่อนก็คงพอจะเข้าใจว่า this keyword นี้จะเปรียบเสมือนเป็นตัวแทนของ object ที่กำลังทำงานอยู่ ทำให้เราสามารถใช้ this เพื่อเข้าถึงตัวแปรหรือว่า function ของ object นั้นได้

แต่แนวคิดนี้กลับใช้ไม่ได้กับเจ้า this ใน JavaScript เพราะ this ใน JavaScript ที่ถูกสร้างขึ้นมานั้นจะมีสถานะการทำงานขึ้นอยู่กับ Execution context ก่อนหน้าที่ function นั้นถูกเรียกใช้งาน อธิบายแบบนี้คงจะต้องงงกันเป็นแน่ มาดูตัวอย่างกันดีกว่า

function displyContext() {
 this.name = 'จุดนี้คือ global context';
 console.log(this);
}

// ผลลัพธ์ที่ได้คือจะพิมพ์ this ในตำแหน่ง window object
// เพราะ function ถูกเรียกใช้งานในระดับ global context
displyContext();

var obj = {
 name: 'จุดนี้คือ function context',
 displyContext: function() {
  console.log(this);
 }
};

// ผลลัพธ์ที่ได้คือจะพิมพ์ this ในตำแหน่งของตัวแปร obj
// เพราะ function ถูกเรียกใช้งานภายในตัวแปร obj
obj.displyContext();

var global = obj.displayContext;
global();

จากตัวอย่างด้านบน หลังจาก function ชื่อ displyContext ถูกเรียกใช้งานเราจะได้ผลลัพธ์แรกที่ถูกพิมพ์ออกมาเป็น this ในระดับ window object ซึ่งก็เพราะว่า execution context ก่อนหน้าที่ function นี้จะถูกเรียกใช้งานมันคือ global context ซึ่งบน browser ตัว global context ที่ว่าก็คือ window object นั้นเอง ทำให้ this ที่ถูกสร้างขึ้นจะอ้างถึง window object ในทันที ทีนี้ลองมาเดาดูสิครับว่าตัวแปร name ที่ประกาศภายใน function นี้จะอยู่ภายใต้ window object ด้วยหรือไม่ ไปทดลองกันดูนะครับ

ลำดับถัดมาเป็นการเรียก function ชื่อ displyContext เหมือนเดิม แต่คร่าวนี้ displyContext จะทำงานเหมือนเป็น method ของ object ที่ชื่อว่า obj อีกที ซึ่งหลังจากที่ function นี้ถูกใช้งาน เราจะได้ผลลัพธ์ที่พิมพ์ this ออกมาในระดับ obj object แทน ไม่ใช่ window object แล้วนะครับตอนนี้ เหตุที่เป็นแบบนี้ก็เพราะว่า execution context ก่อนหน้าที่ displyContext จะถูกเรียกใช้งานก็คือตัว obj object นั่นเอง

และสุดท้ายคือการสร้างตัวแปรขึ้นมาอีกตัวชื่อ global แล้วกำหนดตำแหน่งอ้างอิงของ displyContext ของตัวแปร obj ให้กับมัน จากนั้นก็ทำการเรียกใช้งานฟังก์ชั่น global แต่คราวนี้ execution context จะเปลี่ยนจาก obj object เป็น window object เช่นเดิม แน่นอนครับสาเหตุก็เพราะ execution context ก่อนหน้าที่จะเรียกฟังก์ชั่น global ใช้งานคือ window object นั่นเอง

การใช้งาน `this` keyword ในยุคก่อน Arrrow function

จากตัวอย่างก่อนหน้าคุณคงเห็นแล้วว่า การใช้งาน this keyword ได้อย่างถูกต้องนั้น เราจำเป็นต้องเข้าใจในเรื่อง execution context กันเสียก่อน ไม่อย่างนั้นอาจจะทำให้เกิดความสับสนได้ มาลองดูอีกตัวอย่างหนึ่งที่จะแสดงถึงปัญหาของการใช้งาน this keyword กัน

function MyHero() {
 // ณ จุดนี้เป็น MyHero constructor จะเป็นจุดที่สร้าง this ขึ้นมาใช้งาน 
 // เพื่อทำหน้าที่แทน MyHero object เอง
 this.fight = 0;

 setInterval(function fighting() {
  // this นี้จะอ้างอิงกับ window object
  this.fight++;
 }, 5000);
}

var hero = new MyHero();

ใน non-strict mode นั้น เมื่อฟังก์ชั่น fighting ถูกเรียกใช้งานมันก็จะสร้าง this ของมันเองขึ้นมาใช้งาน แต่ this ที่มันสร้างมานี้จะอ้างอิงกับ window object แทนไม่ใช่ this ของตัวแปร MyHero อย่างที่คุณคิดกัน จากปัญหานนี้ใน ES5 จึงก็มีเทคนิคการจัดการกับ this เพื่อใช้ในการแก้ปัญหานี้ มาดูตัวอย่าง

function MyHero() {
 var that = this; // กำหนด this ให้กับตัวแปร that
 that.fight = 0;

 setInterval(function fighting() {
  // เมื่อ fighting() ทำงานมันก็จะสามารถใช้งานตัวแปร that 
  // ซึ่งจริงๆ ก็คือ this ของ MyHero ได้อย่างถูกต้อง
  that.fight++;
  }, 5000);
}

Arrow function ผู้พิชิต `this` keyword

หลังจาก Arrow function ได้ถูกนำมาให้งานใน ES6 ปัญหาน่าปวดหัวต่างๆ เหล่านี้กลับหมดไปทันที เนื่องจากมันมีความฉลาดพอที่จะรู้ว่า execution context ที่เราต้องการใช้งานจริงนั้นคือจุดไหน มาดูตัวอย่างเลย

function MyHero(){
 this.fight = 0;

 setInterval(() => {
  // this ที่ถูกเรียกใช้งานนี้จะอ้างอิงกับ MyHero object ในทันที
  this.fight++;
 }, 5000);
}

var h = new MyHero();

เอาละครับคงพอเห็นแนวทางการใช้งานและประโยชน์ต่างๆ ของ Arrow function กันบ้างแล้วนะ บทความนี้ก็คงขอจบไว้เพียงเท่านี้ก่อน ขอให้ติดตามและสนุกกับการเรียนรู้กันต่อไปนะครับ

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

iammen — Tue, 25 May 2021 03:04:10 +0000

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('test@gmail.com', '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('test@gmail.com', 'rockman', 'xxx-xxxxxx');

เป็นยังไงครับ ใน ES6 เราสามารถนำตัวแปรที่ใช้รับค่าที่ส่งให้มาเป็น property ของ object ได้เลยทันที เมื่อเปรียบเทียบกันทั้ง 2 แบบคงเห็นแล้วว่าการกำหนด property ให้กับ object ในแบบ ES6 นั้นทำให้เราเขียน code ได้สั้นลงกว่าแบบ ES5 พอสมควรเลย เพิ่มเวลาพักผ่อนเราขึ้นได้อีกนิส :)

Computed property keys

ก่อนอธิบายส่วนี้ผมขอทบทวนวิธีการเข้าถึง property ของ object กันก่อน อย่างที่คุณพอที่จะรู้กันอยู่แล้วว่า ถ้าต้องการเข้าถึงข้อมูลที่เก็บอยู่ใน property ของ object ใดๆ นั้น สามารถทำได้ 2 วิธีคือ

ใช้เครื่องหมายจุด . (dot notation) เช่น ถ้าเราต้องการเข้าถึงข้อมูลที่เก็บใน property ที่ชื่อว่า name ของ object ที่ชื่อว่า myPet รูปแบบการใช้งานคือ myPet.name
ใช้เครื่องหมายวงเล็บปีกกาสี่เหลี่ยม [ ] (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 ไว้เบาๆ เพียงเท่านี้ก่อน ขอให้ติดตามและสนุกกับการเรียนรู้กันต่อไปนะครับ

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

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

iammen — Mon, 17 May 2021 06:00:37 +0000

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

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา JavaScript ทุกท่าน บทความนี้เป็นตอนที่ 2 ในซี่รีย์ชุด 10 เรื่องของ ES6 ที่คุณควรรู้ไว้ ครั้งนี้เรามาทำความรู้จักกับ Template Literals กัน มาดูกันเลยดีกว่าครับ

Template literals คืออะไร?

ผมขออธิบายความหมายของ Template literals ในแบบที่ผมเข้าใจก็แล้วกันนะครับ ส่วนตัวผมคิดว่ามันก็คือวิธีในการนำเอา expression มาใช้รวมกับ string literals นั่นเอง ทำให้เราจะได้ผลลัพธ์ออกมาเป็น string ชุดใหม่เอาไปใช้งานกันต่อไป

แล้วเจ้า string literals มันคืออะไรกันละ?

string literals คือการกำหนดให้ source code ของเรารับรู้ว่ารูปแบบอะไรคือข้อความหรือที่เรียกทับศัพท์ว่า string นั่งเอง

โดย JavaScript จะแยกแยะว่า ชุดหรือลำดับของตัวอักษรใดละคือ string มันจะดูจากสิ่งที่ถูกปิดหัวท้ายด้วยเครื่องหมาย '' (single quote) หรือ "" (double quotes) ซึ่งถ้ามันพบรูปแบบนี้เมื่อไรมันฟันธงเลยว่าข้อมูลเหล่านั้นละคือ string มาลองดูตัวอย่างกัน

var hero = 'Superman';

จากตัวอย่าง 'Superman' คือ string literal ที่มีค่าข้อมูลจริงๆ คือ Superman ส่วน '' จะไม่ถือว่าเป็นข้อมูล

แล้ว expression ละคืออะไร?

expression ในที่นี้ก็สามารถเป็นได้ทั้ง ตัวแปร, การดำเนินการทางคณิตศาสร์ เช่น + หรือผลลัพธ์ที่ได้จาก function ก็ได้เป็นต้น

Template literals ใน ES5

ใน ES5 ปกติเราจะใช้วิธีเครื่องหมาย + ในการเชื่อม string มากกว่า 1 ชุด เพื่อให้ได้เป็นผลลัพธ์ของ string ชุดใหม่ ตัวอย่างเช่น

var firstName = 'Supot';
var lastName = 'Sukvaree';

// ใช้เครื่องหมาย + ในการเชื่อมข้อความ
var tl = 'My name is ' + firstName + ' ' + lastName;

// ดูผลลัพธ์บน console
console.log(name);

เราสามารถเชื่อมผลลัพธ์ที่ได้จาก function กับข้อความได้เช่นกัน มาดูตัวอย่างกัน

function getFullname() {
  return 'Supot  Sukvaree';
}

// นำค่าที่ return กลับมาจาก function มาเชื่อมกับข้อความ
var tl = 'My name is ' + getFullname();
console.log(tl);

หรือเราสามารถเชื่อมผลลัพธ์ของการดำเนินการกับข้อความได้เหมือนกัน

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

Template literals ใน ES6

ES6 มีการปรับรูปแบบไวยกรณ์ของการใช้งานนิดหน่อย นั่นคือมันจะใช้เครื่องหมาย ` ` (back-tick) ครอบส่วนของ template literal แทนการใช้งาน '' หรือ "" และใน template literal ก็สามารถที่จะมีสิ่งที่เรียกว่า place holders ไว้ภายในเครื่องหมาย ` ` ได้

หน้าตาของ place holders จะเป็นแบบนี้ ${expression} มาดูตัวอย่างการใช้งานกัน

var firstName = `Supot`;
var lastName = `Sukvaree`;
var tl = `My name is ${firstName} ${lastName}`;
console.log(tl);

การเชื่อมผลลัพธ์ที่ได้จาก function กับข้อความก็ปรับเปลี่ยนไปเล็กน้อย

function getFullname() {
  return 'Supot  Sukvaree';
}
let tl = `My name is ${getFullname()}`;
console.log(tl);

การเชื่อมผลลัพธ์ของการดำเนินการกับข้อความก็ดูสั้นลง

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

Multi-line string

ในการใช้งาน template literals สิ่งหนึ่งที่เราจะมีการใช้งานและพบเจอกันอยู่บ่อยๆ ก็คือการเชื่อมข้อความหลายๆ บรรทัดเข้าด้วยกัน โดยใน ES5 เราจะใช้รูปแบบการเชื่อมข้อความหลายๆ บรรทัดเข้าด้วยกันด้วยวิธีดังนี้

var tl = 'Multi-line string in ES5'
 + 'with "\+" operator '
 + 'string line 3';
console.log(tl);

หรือใช้อีกวิธีหนึ่งได้เช่นกัน

var tl = 'Multi-line string in ES5\n\
using \\n\\';
console.log(tl); // ผลลัพธ์ของการใช้ \n\ จะทำให้มีช่องว่างเกิดขึ้นในข้อความ

ส่วนใน ES6 เราสามารถใช้ ` ` (backticks) แทนได้ แบบนี้

let tl = `Multi-line string in ES6
using \`\``;
console.log(tl);

คงพอทำให้เห็นรูปแบบการใช้งานของ template literals ใน ES6 กันไปพอสมควรนะครับ ชื่นชอบสไตร์การใช้งาน Template literals ของ ES6 หรือ ES5 กันแบบไหนก็ลองพูดคุยกันได้นะครับ ขอจบบทความนี้เพียงเท่านี้ก่อน ติดตามเรื่อง Enhanced Object Literals กันในตอนต่อไปครับ

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

iammen — Mon, 17 May 2021 01:16:55 +0000

สวัสดีครับท่านผู้สนใจในการเขียนโปรแกรมด้วยภาษา 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 โปรดติดตามกันตอนต่อไปนะครับ

DEV Community: iammen

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 4 Arrow Functions)

10 เรื่องของ ES6 ที่คุณควรรู้ไว้ (ตอนที่ 4 Arrow Functions)

เขียน function ให้กระชับด้วย Arrow function

this keyword ใน JavaScript

การใช้งาน this keyword ในยุคก่อน Arrrow function

Arrow function ผู้พิชิต this keyword

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

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

Object ปะทะ JSON

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

Computed property keys

Method definition shorthand

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

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

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

Template literals คืออะไร?

Template literals ใน ES5

Template literals ใน ES6

Multi-line string

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

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

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

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

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

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

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

`this` keyword ใน `JavaScript`

การใช้งาน `this` keyword ในยุคก่อน Arrrow function

Arrow function ผู้พิชิต `this` keyword