ES 6 หรือ ES 2015 เป็นมาตรฐาน javascript ใหม่ที่ออกในปี 2015 ซึ่งในปัจจุบัน browser ส่วนใหญ่รองรับประมาณ 90 % มีเพียงส่วนน้อยเท่านั้นที่ไม่สามารถใช้ มาตรฐานนี้ได้ หากใครพัฒนาระบบที่ยังใช้งาน browser รุ่นเก่าๆให้ระวังตรงนี้ด้วยครับ

เริ่มแรกเลยที่ ES 6 มีคือเป็น javascript แบบ auto insert semicolon นั้นก็คือเราไม่จำเป็นที่จะต้องใส่ semicolon ปิดท้ายอีกต่อไป หรือถ้าจะใส่ก็ได้ มันไม่ได้ห้ามกัน ซึ่งมันทำให้ปัญหาการลืมใส่ ; แล้วโค้ด javascript error ไม่ทำงานหมดไปในมาตรฐาน ES6 นั้นเอง

โดยในบทความนี้ผมจะทำการสร้างไฟล์ index.html ขึ้นมาจากนั้นทำการ include main.js แล้วทำการทดสอบ javascript ใน main.js นะครับ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>E6 Feature</title>
</head>
<body>
    <h1>ES6 Feature</h1>
    <script src="main.js"></script>
</body>
</html>

CONST & LET

เริ่มเรื่องกันที่ CONST & LET เดิมที่ javascript นั้นจะใช้ var ในการประกาศตัวแปรแต่เนื่องด้วยความซ้ำซ้อนในการใช้ javascript พัฒนา application เพิ่มมากขึ้นลำพัง var อย่างเดียวคงไม่พอจึงเกิด const กับ let ขึ้นมา

เรามาเริ่มกันที่ const โดยโค้ดทั้งหมดจะเขียนในไฟล์ main.js แล้วทำการเปิดไฟล์ index.html เพื่อเรียกดูผลลัพธ์นะครับ เริ่มเขียนโค้ดตามด้านล่างเลยครับ

const name = 'Thaicoding'
name = 'Thaicoding.net'

จากผลลัพธ์เมื่อเปิดไฟล์ index.html แล้วกดเปิดหน้า console ของ chrome (กด F12) ขึ้นมา จะเห็นว่ามีการแจ้ง error เกิดขึ้น ก็ไม่มีอะไรมากครับ const ก็คือค่าคงทีเหมือนที่มีใช้ในภาษาอื่นๆนั้นแหละครับ เพราะที่ผ่านมา javascript ไม่มีการใช้ const เป็นที่ชัดเจน มาตรฐาน ES6 ก็เลยทำให้ชัดเจนไปเลย เพื่อลดปัญหาค่าคงที่ ที่เรากำหนดไว้แล้วพลาดอาจไปเปลี่ยนค่ามันที่หลังทำให้โปรแกรมทำงานผิดพลาด แล้วถ้า const ใช้ใน object หรือ array ละจะเป็นยังไงไปดูกันครับ

const shopping = {
    name:'Windows10',
    quantity:2
}

console.log(shopping)

shopping.name = 'DDR4-64GB'
console.log(shopping)

เมื่อลองรันผลที่ได้ก็คือเราสามารถเปลี่ยนแปลงค่า attribute ที่อยู่ใน object ได้ครับแต่ถ้าเราลอง assign ตัวแปร shopping ใหม่ดูละจะเป็นยังไง

ผลก็คือ error ทันทีครับทำให้เห็นว่า const สามารถใช้กับตัวแปรที่เป็น object หรือ array ได้ เรายังสามารถเปลี่ยนแปลงค่าภายในได้ แต่จะกำหนดหรือสร้างใหม่ไม่ได้ครับ ซึ่งในกรณีของ array นั้นทำให้ขนาด array ไม่เปลี่ยนแปลงภายหลังครับ

ต่อมาก็ let จุดเด่นของ let คือเรื่องของ block scope มันเป็นการประกาศตัวแปรภายใน block scope ใน javascript นั้นเดิมที่จะแตกต่างจากภาษาอื่นคือ การประตัวแปรโดยใช้ var นั้นมันจะทะลุ block ที่มันควรจะอยู่เช่นตัวอย่างนี้ครับ

var x = 5
if(x === 5){
    var y = 10
    console.log('y inside if ', y)
}
console.log('y outside if ', y)

เมื่อลองรันดูจะแปลกใจมากตัวแปร y ประกาศภายใน scope {} แต่นั้นสามารถอ้างนอก scope {} ที่มันควรจะอยู่ มันเลยทำให้รู้สึกเหมือนตัวแปร global เต็มไปหมด let จึงตอบโจทย์ปัญหานี้และ recommend ให้ใช้ let แทนกันมากขึ้นอีกด้วย เมื่อลองเปลี่ยนโค้ดด้านบนจาก var y เป็น let y

var x = 5
if(x === 5){
    let y = 10
    console.log('y inside if ', y)
}
console.log('y outside if ', y)

ผลที่ได้ก็คือเป็นไปตามเหตุผลเหมือนในภาษาอื่นๆที่ y จะไม่สามารถอ้างถึงได้เพราะอยู่นอก block scope ของมันแล้ว

Arrow function

ต่อมาเป็นเรื่องของ arrow function ผมไม่รู้ว่า arrow function มันเกิดขึ้นมาในภาษาไหนเป็นภาษาแรก แต่รูปแบบมันออกไปในแนวทางคล้ายกับการเขียน lambda ซึ่ง ES6 มี arrow function ขึ้นมาเพื่อตอบโจทย์และแก้ปัญหา call back function ซึ่งหลังๆนี้การเขียนโปรแกรมแบบ call back มีเยอะมากมาย รูปแบบการเขียน Arrow function นั้นจะอยู่ในรูปของ

(param) => { function command}
แต่ถ้า function มีการทำงานบบรรทัดเดียว สามารถเขียนได้โดยไม่ต้องมี {} เป็น
(param) => function command
แต่ถ้า param มีแค่ค่าเดียวก็ไม่จำเป็นต้องมี () เปิดปิดอีก เป็น
param => { function command} หรือ param => function command เลย

เรามาดูตัวอย่างกัน ในรูปแบบเก่าเราจะเขียน function ตามโค้ดด้านล่างประมาณนี้ครับ

function sayHello(){
    console.log('Hello')
}
sayHello()

ที่นี้เรามารูปในการเขียนแบบ Arrow Function กันบ้าง

const sayHello = () =>{
    console.log('Hello');
}

const sayName = name => console.log('Hello ' + name);
sayHello();
sayName('Thaicoding');

จะเห็นมามันแปลกตาพอสมควรสำหรับคนที่ยังไม่เคยเขียน Arrow function มาก่อน สังเกตโค้ดจะเห็นว่ามีการสร้างตัวแปร const sayName มาเป็นตัวแทน function ด้วย การใช้ const ก็จะทำให้จบปัญหา re assign แต่ถ้าเราต้องการให้ทำงานตามเหตุการณ์และเงื่อนไข ก็สามารถใช้ let ได้ ทำให้เราสามารถเขียนโปรแกรมให้ตัวแปรสักตัวเก็บการทำงาน ของฟังก์ชั่นตามสถานการณ์ได้นั้นเอง ซึ่งถ้ามองย้อนกลับไปในรูปแบบการเขียนฟังก์ชั่นแบบเดิมคงไม่ตอบโจทย์และโค้ดคงจะดูยากกว่าในรูปแบบ Arrow Function เยอะเลยครับ

FOREACH

มาสักที่สำหรับ foreach ในภาษาสมัยใหม่อันอื่นมี foreach ให้ใช้อยู่แล้วไม่มีปัญหาแต่ใน javascript เพิ่งจะมีให้ใช้ใน ES6 ซึ่งเป็นการบ่งบอกว่าอย่างน้อยภาษานี้ยังไม่ได้ตาย แต่กลับได้รับการพัฒนาขึ้นไปอีกขั้น มาดูกันครับว่า foreach ใช้งานกันยังไง

const foods = ['Chiken', 'Pizza', 'Rice', 'Burger'];
foods.forEach(function(food, index){
    console.log(food);
    console.log(index);
})

การใช้งานก็แค่ .forEach แล้วก็ตามด้วย function โดย param ตัวแรกจะเป็น element แต่ละตัว ส่วน param อันที่สองจะเป็น index ในกรณีที่เราไม่ต้องการใช้งาน index เราสามารถเขียน ใหม่โดยไม่ใส่ index ก็ได้เป็น

const foods = ['Chiken', 'Pizza', 'Rice', 'Burger'];
foods.forEach(function(food){
    console.log(food);
})

แต่เดียวช้าก่อน มันจะดูโค้ดยาวๆไปหน่อยนะอย่าลืมซิว่า ES6 forEach มาพร้อมกับ Arrow function เพราะฉะนั้นเราสามารถเขียน forEach ในรูปแบบ Arrow function ได้เลยครับ สามารถเขียนใหม่ได้เป็น

const foods = ['Chiken', 'Pizza', 'Rice', 'Burger'];
foods.forEach((food, index) =>{
    console.log(food);
    console.log(index);
})

จะเห็นว่าโค้ดดูง่ายขึ้นและสั้นลง arrow function จึงมาตอบโจทย์การทำงานของ function ที่ฝั่งอยู่ในที่ต่างๆแบบนี้ครับ ก็เอาเป็นว่าผมของจบบทความเกี่ยวกับ feature ES6 part 1 ไว้แค่นี้ครับไว้มาต่อกันใน part ที่ 2 คราวหน้าครับ

Leave a Reply

Your email address will not be published. Required fields are marked *