ECMAScript 6 คืออะไร ? + สอนวิธีใช้

ทุกวันนี้ หากใครลองเข้าไปดูโค้ด JavaScript ของ project ใหม่ๆ บางตัวบน GitHub แล้วก็อาจจะต้องแปลกใจ เพราะ syntax ของมันนั้นไม่เหมือนกับโค้ด JavaScript ทั่วๆ ไปที่เราเขียนเลย วันนี้เราจะมาหาคำตอบกันครับว่าเจ้าโค้ด JavaScript แบบที่ว่านี้มันคืออะไร ?

ความเป็นมาของ JavaScript

หากเพื่อนๆ เพิ่งเริ่มเขียนเว็บก็อาจจะไม่รู้ว่าจริงๆ แล้ว ประวัติของ JavaScript มันยาวมากกก… ดังนั้น ผมจะขอเล่าคร่าวๆ ละกันว่ามันเกิดมาเพื่อเป็นภาษา script ฝั่ง client ของ Netscape ซึ่งเป็น web browser ชื่อดังในสมัยนั้นครับ แล้วหลังจากนั้นไม่นาน Netscape ก็ได้นำเจ้า JavaScript นี้ไปฝากไว้กับ Ecma International ซึ่งเป็นองค์กรที่ก่อตั้งขึ้นเพื่อทำหน้าที่กำหนด standard ให้กับสิ่งต่างๆ โดยเฉพาะ เพื่อจะให้เข้ามาช่วยกำหนด standard ให้กับ JavaScript ครับ

รู้จักกับ ECMAScript

เนื่องจาก Ecma International รับหน้าที่กำหนด standard ให้กับสิ่งต่างๆ ในวงการไอทีหลายอย่าง เค้าจึงต้องมีการตั้งชื่อเฉพาะให้กับ standard ของภาษา script ฝั่ง client ที่ว่านี้ครับ ซึ่งชื่อนั้นก็คือ ECMA-262 และจะเรียกภาษา script ที่สร้างมาตาม standard นี้ว่า ECMAScript

บางคนอาจจะสงสัยว่า แล้ว standard ที่กำหนดไว้ใน ECMA-262 มันมีหน้าตายังไง ขอตอบว่าในเวอร์ชั่นแรกๆ นั้นจะเป็นพวกการกำหนด syntax ครับ ส่วนในเวอร์ชั่นต่อๆ มาก็จะออกแนวเสริมความสามารถเข้าไปซะมากกว่า ซึ่ง standard ที่ว่านี้ก็ยังมีการพัฒนาอยู่เรื่อยๆ นะครับ อย่าง JavaScript ที่เราเขียนกันอยู่ทุกวันนี้ ก็ถือเป็นการ implement มาจาก ECMAScript ในเวอร์ชั่นที่ 5 ที่ออกมาตั้งแต่ปี 2009 ครับ

การมาของ ECMAScript 6 (ES6 Harmony)

อย่างที่บอกไปแล้วนะครับว่า standard ที่ว่านี้ยังมีการพัฒนาอยู่เรื่อยๆ ล่าสุดก็มาถึงเวอร์ชั่นที่ 6 แล้ว และที่สำคัญก็คือเจ้า ECMAScript 6 หรือเรียกสั้นๆ ว่า ES6 ที่ว่านี้มันมีการเปลี่ยนแปลงครั้งใหญ่เลยล่ะครับ ทั้งเปลี่ยน syntax และเพิ่ม feature ใหม่ๆ ทั้งนี้ก็เพื่อที่จะรองรับการเขียนแอปพลิเคชันที่มีความซับซ้อนมากๆ ครับ เรียกว่าตอนนี้ ถ้าเราไปเจอโค้ด JavaScript ที่มี syntax ไม่ค่อยคุ้นตา ก็พอจะเดาได้เลยครับว่าเค้าเขียนด้วย ES6 นั่นเอง

แล้ว ECMAScript 6 มีอะไรใหม่บ้าง ?

ขอบอกก่อนเลยนะครับว่าเนื้อหาของ ES6 นั้นเยอะมากๆ เรียกว่าอธิบายกันไม่หมดในบทความเดียวแน่นอน ผมเลยจะขอยกมาเฉพาะฟีเจอร์ที่ใกล้ตัวเราหน่อยครับ เรามาดูกันเลยว่าฟีเจอร์ที่เราจะต้องเจอกับมันแน่ๆ นั้น มีอะไรบ้าง

Syntax แบบใหม่

• Let + Const let จะเอาไว้สร้างตัวแปรเหมือนๆ กับ var เลยครับ เพียงแต่ตัวแปรที่สร้างด้วย let นั้นจะมี scope เพียงแค่ภายใน block นั้นๆ (block คือภายในเครื่องหมาย { }) ซึ่งจะต่างจาก var ที่จะมี scope อยู่ภายใน function หรือไม่ก็ระดับ global เท่านั้นครับ ส่วน const นั้นก็จะเหมือนกับ let เลยครับ เพียงแต่จะใช้กับค่าคงที่ คือเมื่อกำหนดค่าลงไปแล้วจะไม่สามารถเปลี่ยนแปลงค่านั้นได้อีกแล้ว
• Destructuring ใน ES6 เราสามารถสร้างหรือกำหนดค่าตัวแปรได้หลายๆ ตัวพร้อมๆ กันเลยนะครับ เช่น let [x, y] = ['a', 'b']; แบบนี้จะได้ว่า x = 'a' และ y = 'b' ครับ นอกจากเราจะใช้ Destructuring กับ arrays ได้แล้ว เราก็ยังสามารถใช้กับ objects ได้ด้วยครับ
• Default Parameters อันนี้ตรงตัวเลยครับ คือต่อไปนี้เราสามารถกำหนด default parameter ต่างๆ ให้กับ function ได้แล้ว แบบนี้ครับ function addWebsite(name = 'SiamHTML') { } ทำให้เราไม่ต้องมาคอยเช็คแล้วว่า parameter นี้มีค่ามั้ย ถ้าไม่มีค่อย assign ค่าให้ อะไรทำนองนี้ครับ
• For..Of Loop ต่อมาเป็น loop แบบใหม่ครับ สมมติเราจะไล่ดูค่าต่างๆ ใน arrays เราก็สามารถเขียนโค้ดแบบนี้ได้เลย for (let v of [1, 2, 3]) { console.log(v); }

เพิ่ม Classes และ Modules

• Classes อันนี้ถือเป็นสิ่งที่ผมชอบมากที่สุดใน ES6 เลยครับ เราสามารถเขียน js แบบเป็น class ได้เหมือนๆ กับ PHP หรือ Java เลย ส่วน syntax นั้นก็คล้ายกันมากเลยครับ มี constructor, สามารถ extends class อื่นๆ ได้ มี static method เรียกว่าถูกใจสาย OOP อย่างแน่นอน
• Modules อีกเรื่องที่น่าสนใจก็คือ module ครับ คือต่อไปนี้เราจะสามารถเขียนโค้ดแบบแบ่งเป็น module ได้แล้ว เราอาจจะเขียนโค้ดแยกเป็นไฟล์ละ module ไปเลยก็ได้ แล้วเวลาจะใช้ module ไหน ก็ค่อยไป import ไฟล์ module นั้นมา อันนี้ขอบอกเลยว่าเหมือนกับ Node.js สุดๆ

เพิ่มฟีเจอร์ใหม่

• Set อันนี้เป็นการเก็บข้อมูลแบบใหม่ที่เรียกว่า set ครับ ซึ่งมันก็คือ set เดียวกับที่เราเรียนตอนมัธยมนั่นแหละครับ จุดเด่นของ set ก็คือถึงแม้ว่าใน set จะมี member ที่ซ้ำกันบางตัว แต่พอแสดงค่าของ set ออกมาก็จะมีเฉพาะ member ที่ไม่ซ้ำกันครับ
• Map มันก็คือ set นั่นแหละครับ เพียงแต่ map นั้น จะเป็น set ที่มี member เป็น key/value เท่านั้นเอง
• Promises ส่วน promise จะเอาไว้รันโค้ดแบบ asynchronous ครับ เราสามารถกำหนดได้ว่าจะให้ทำอะไร ถ้าทำสำเร็จให้ทำอะไร ถ้าล้มเหลวให้ทำอะไร คล้ายๆ กับตอนเขียน ajax ด้วย jQuery นั่นล่ะครับ

และนี่คือสิ่งที่เราจะต้องเจอแน่ๆ ครับ ในการเขียน ES6 สำหรับรายละเอียดอื่นๆ ผมแนะนำให้ติดตามได้จาก ES6-Learning ครับ

วิธีเขียน ECMAScript 6

คาดว่าตอนนี้ เพื่อนๆ คงจะคันไม้คันมือ อยากลองเขียน ES6 แล้วใช่มั้ยครับ แต่เนื่องจาก ES6 นั้นยังใหม่มาก web browser ทั่วไปเลยยังไม่ค่อยจะรองรับเท่าไรครับ หากเราจะเริ่มเขียน ES6 ตั้งแต่ตอนนี้เลย เราคงจะต้องใช้ tool บางอย่างเข้ามาช่วย

1. Transpiler

วิธีแรกจะเป็นการนำไฟล์ js ที่เขียนด้วย ES6 มาแปลงให้เป็น ES5 ที่ browser ทั่วไปรองรับครับ โดย tool ที่ผมแนะนำจะมีอยู่ 2 ตัวด้วยกัน ได้แก่

Traceur

Traceur นั้นสร้างโดยทีมงานของ Google ครับ รองรับทั้งการแปลงแบบ on the fly ผ่าน web browser เลย และการแปลงแบบ offline ผ่าน Node.js ซึ่งผมแนะนำให้ใช้วิธีแปลงแบบ offline โดยการทำผ่าน task runner อย่าง gulp ด้วย plugin ที่ชื่อ gulp-traceur เลยครับ เมื่อแปลงเสร็จแล้ว เราก็จะนำไปใช้แบบนี้

<html>
  <head>
    <script src="traceur-runtime.js"></script>
    <script src="compiled.js"></script>
  </head>
  <body>
  
  </body>
</html>

มีข้อสังเกตนิดนึงนะครับว่า เราจำเป็นจะต้องติด traceur-runtime.js เอาไว้ก่อนไฟล์ js ของเราด้วยเสมอ เพราะว่า Traceur จะต้องใช้ไฟล์นี้ในการทำให้ web browser อ่านโค้ดของเราได้ครับ

Babel

ส่วน Babel นั้น ก็สามารถแปลงแบบ offline ได้เหมือนกับ Traceur เลยครับ เพียงแต่ Babel นั้น เวลานำ script ไปใช้ เราจะไม่ต้องใส่ runtime มาด้วยเท่านั้นเอง ที่เป็นเช่นนี้ก็เพราะว่า Traceur นั้นจะใช้วิธีรวบรวมโค้ดที่ทำให้โค้ดหลังแปลงใช้งานได้เอาไว้ในไฟล์ traceur-runtime.js ครับ ซึ่งไฟล์นี้มีขนาดใหญ่พอสมควรเลย ซึ่งจะต่างจาก Babel ที่ใช้วิธีดูว่าโค้ด ES6 ที่เราเขียนมานั้น ใช้ฟีเจอร์ไหนบ้าง แล้วค่อยเอาฟีเจอร์เหล่านั้น มา built-in ไว้ในไฟล์ของเรา จึงทำให้เราสามารถเรียกใช้ไฟล์นี้เดี่ยวๆ ได้เลยครับ และที่ผมชอบ Babel มากเลยก็คือมันพ่วงความสามารถในการแปลง JSX ให้เป็น JavaScript ธรรมดามาให้ด้วยนะครับ เรียกว่าถูกใจคนเขียน React อย่างแน่นอน ส่วนขั้นตอนการแปลงด้วย Babel นี้ ผมก็แนะนำให้ทำผ่าน gulp เหมือนเดิม ด้วย plugin ที่มีชื่อว่า gulp-babel หรือถ้าจะใช้กับ Browserify ก็ให้ใช้ babelify ไปก็ได้ครับ

2. Polyfills

หากใครไม่อยากแปลงไฟล์ อีกวิธีหนึ่งก็คือการใช้ polyfill อย่าง ES6 Shim ครับ วิธีใช้ก็เหมือนกับการใช้ HTML5 Shim เลย คือจะต้องติดเอาไว้ก่อนที่จะเรียกไฟล์ js อื่นๆ แต่วิธีนี้จะมีข้อเสียตรงที่มันอาจจะยังไม่สามารถใช้บางฟีเจอร์ได้ครับ

ความรู้สึก หลังเขียน ECMAScript 6

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

นอกจากมันเขียนง่ายขึ้นแล้ว อีกเหตุผลหนึ่งที่ผมแนะนำให้ลองเขียน ES6 ดูก็เพราะว่า ทุกวันนี้ project ต่างๆ เริ่มหันมาเขียน ES6 กันมากขึ้นแล้วนะครับ ลองนึกดูว่าถ้าเราจะเข้าไปร่วมเขียนโค้ดใน project หนึ่ง แต่พออ่านโค้ดดูปรากฏว่าเค้าเขียนกันด้วย ES6 หมดเลย หากเรายังไม่ค่อยคุ้นเคยกับมัน เราก็อาจจะเสียโอกาสตรงนี้ไปได้ครับ ลองดูนะครับ รับรองว่าเขียนไปสักพักนึงก็จะเริ่มรู้สึกว่ามันสนุกและง่ายกว่า ES5 แน่นอนครับ