พื้นฐานการเขียน JavaScript ES2015 (ES6)

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

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

ในภาษา JavaScript ES6 จะมีการปรับเปลี่ยน Syntax การเขียนเพื่อให้เขียนได้ง่ายขึ้น ซึ่งเราจะมาเรียนรู้กันในบทความนี้ครับ

ไม่จําเป็นต้องมี Semicolon อีกต่อไป

ใน ES2015 ไม่จําเป็นต้องใส่ semicolon ตรงท้ายบรรทัดอีกต่อไป แต่ที่จริงแล้ว JavaScript ยังต้องใช้ semicolon อยู่ แต่ ES2015 นั้นจะเติม semicolon ให้เราอัตโนมัติ Code จะแลดูสวยขึ้นแบบนี้

การประกาศตัวแปรโดยใช้ let และ const

การประกาศตัวแปรแบบ let และ const จะต่างจากการประกาศตัวแปรแบบ var คือ การประกาศตัวแปรแบบ var นั้นเป็น function-scoped หรือพูดง่ายๆคือเราใช้ var ประกาศตัวแปรตรงจุดไหนก็ตาม แต่เมื่อ JavaScript เริ่มทำงาน การประกาศตัวแปรด้วย var นั้น ขอบเขตของตัวแปรจะอยู่ภายใต้ Function นั้นๆ

จะเห็นว่า x ถูกประกาศใน if แต่สามารถเรียกจากภายนอก if ได้

แต่สำหรับ let และ const นั้นเป็น block-scoped หมายถึงประกาศตัวแปรอยู่ในบลอคไหนก็จะอยู่แค่ในบลอคนั้น

x ข้างใน if และ นอก if จะเป็นคลละตัวกัน

ความต่างของ let และ const คือ let นั้นหลังประกาศตัวแปรแล้ว สามารถเปลี่ยนค่าได้ แต่ const ใช้สำหรับประกาศค่าคงที่ ทำให้หลังประกาศแล้วไม่สามารถเปลี่ยนแปลงค่าได้

การใช้ const มีข้อควรระวังอยู่ดังนี้

จาก code ด้านบน obj จะเก็บ address ของ { a: 1 } เอาไว้ เราจะไม่สามารถเปลี่ยน address ได้ เช่น obj = {} แต่เราสามารถเปลี่ยนค่าภายใน Object ได้ ซึ่งจะไม่ทําให้ address เปลี่ยนไป

ES2015 Module

โดยปกติแล้ว JavaScript ไม่สามารถจัดการ Module ได้ด้วยตัวเอง จะต้องใช้ library CommonJS หรือ AMD แต่ใน ES2015 มาพร้อมกับการสนับสนุนการทำงานกับโมดูลได้ในตัว ซึ่งใช้ ES2015 เพื่อ import/export ของจากไฟล์หนึ่งไปอีกไฟล์หนึ่งได้แล้ว ดังนี้

หรือถ้า  module นั้นเรา Export แค่อย่างเดียวสามารถเขียนแบบนี้ได้

Destructuring

Destructuring เป็นการดึงข้อมูลบางส่วนออกมาจาก Object ตัวอย่างเช่น

Spread Operator

Spread Operator จะเป็นเครื่องหมายจุดสามจุด "..." ถ้าวางไว้หน้า Object หรือ Array ตัวไหนจะมีผลทำให้เครื่องหมายที่ครอบมันอยู่หลุดออก ตัวอย่าง

Arrow Function

เราสามารถประกาศ Function แบบ Arrow Function ได้ตามตัวอย่าง เทียบกับ การประกาศ Function แปบเก่า

Arrow function ไม่ได้ต่างเพียงแค่ไวยากรณ์ที่เปลี่ยนไป แต่ arrow function นั้นยังเข้าถึง this จาก scope ที่ครอบมันอยู่ (Lexical binding) ดังนี้

กรณีของ Arrow Function ถ้าตัว body ของฟังก์ชันไม่ครอบด้วย {} และมี statement เดียว จะถือว่าค่านั้นคือค่าที่ return ออกจากฟังก์ชัน

เราสามารถไม่ต้องใส่ () ได้ถ้าพารามิเตอร์นั้นมีเพียงตัวเดียว

Default Values ของ พารามิเตอร์ที่ส่งเข้ามาในฟังก์ชัน

ใน ES5 เราตรวจสอบค่าของพารามิเตอร์ที่ส่งเข้ามาโดยเขียน code เพิ่มในฟังก์ชัน แต่สำหรับ ES2015 เราสามารถกำหนดค่าเริ่มต้นของพารามิเตอร์ได้เลยด้วยการประกาศไว้ในส่วนประกาศฟังก์ชัน ดังนี้

Named Parameters

ถ้าเราส่ง Object เป็นพารามิเตอร์ และเราต้องการที่จะตรวจสอบค่าต่างๆภายในด้วย โดยถ้าค่าภายในส่งมาไม่ครบเราก็สามารถ set default ได้เหมือนกันดังนี้

Rest Parameters

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

ลดความซ้ำซ้อนด้วยการเขียนให้สั้นลง

สามารถลดรูปการประกาศฟังก์ชันในอ็อบเจ็กต์ ดังนี้

ถ้า key ของอ็อบเจ็กต์มีชื่อตรงกับตัวแปลที่จะใส่เข้าไปเป็น value แล้ว สามารถเขียนได้แบบนี้ครับ

Template String

ปกติเราจะใช้ + ในการเชื่อมต่อ string แต่ใน ES2015 เราสามารถเขียนได้แบบนี้ครับ

Class

สามารถสร้าง Class แบบใหม่โดยใช้คีย์เวิร์ด class ดังตัวอย่างนี้

ที่มาของข้อมูล
www.babelcoder.com

Comments