พื้นฐาน ES6+ ฟีเจอร์ใหม่ใน JavaScript

---

1. let และ const

ก่อน ES6 เราใช้ var เป็นหลัก ซึ่งมีปัญหาเรื่อง scope

• let ใช้สำหรับตัวแปรที่ค่าจะเปลี่ยนได้

• const ใช้สำหรับค่าคงที่ (เปลี่ยนค่าตัวแปรไม่ได้)

javascript

let name = "มิว";
const age = 25;

ข้อดี: let กับ const มี block scope (จำกัดขอบเขตใน { })

---

2. Arrow Function

เขียน function ให้สั้นลง อ่านง่ายขึ้น

javascript

// แบบเดิม
function sayHello(name) {
  return "สวัสดี " + name;
}

// แบบใหม่
const sayHello = (name) => "สวัสดี " + name;

ถ้ามีหลายบรรทัดก็ใส่ {} ได้:

javascript

const sum = (a, b) => {
  return a + b;
};

---

3. Template Literals (string แบบใหม่)

เขียน string แล้วแทรกตัวแปรด้วย ${ }

javascript

let name = "มิว";
console.log(`สวัสดี ${name}`);

สามารถขึ้นบรรทัดใหม่ใน string ได้โดยไม่ต้องใส่ \n

---

4. Default Parameters

ตั้งค่าพารามิเตอร์เริ่มต้นให้ฟังก์ชันได้

javascript

function greet(name = "Guest") {
  console.log(`สวัสดี ${name}`);
}

greet(); // สวัสดี Guest
greet("มิว"); // สวัสดี มิว

---

5. Destructuring

แยกค่าจาก Array หรือ Object ไปเก็บในตัวแปรได้ทันที

Array:

javascript

let [a, b] = [10, 20];
console.log(a); // 10

Object:

javascript

let person = { name: "มิว", age: 25 };
let { name, age } = person;
console.log(name); // มิว

---

6. Spread Operator (...)

ใช้กระจายค่าของ Array หรือ Object

Array:

javascript

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

Object:

javascript

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

---

7. Rest Parameter (...)

เก็บค่าหลายๆ ค่าที่ส่งเข้ามาในฟังก์ชันเป็น Array

javascript

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

---

8. Object Property Shorthand

เขียน object สั้นลงถ้าชื่อตัวแปรตรงกับชื่อ property

javascript

let name = "มิว";
let age = 25;

let person = { name, age };
console.log(person);

---

9. Object Destructuring + Default Value

ตั้งค่าเริ่มต้นระหว่าง destructuring ได้เลย

javascript

let { name = "Guest", age = 0 } = {};
console.log(name); // Guest

---

10. Optional Chaining (?.)

ช่วยเช็คค่าก่อนเข้าถึง property ป้องกัน error

javascript

let person = null;
console.log(person?.name); // undefined (ไม่ error)

---

11. Nullish Coalescing (??)

ใช้ตั้งค่าหากค่าก่อนหน้าเป็น null หรือ undefined

javascript

let username = null;
console.log(username ?? "Guest"); // Guest

ต่างจาก || ตรงที่ || จะถือว่า 0, "", false เป็น falsy ด้วย

---

12. Modules (import/export)

แยกไฟล์โค้ดได้เป็นระเบียบ

ไฟล์ export.js

javascript

export const name = "มิว";
export function greet() {
  console.log("สวัสดี");
}

ไฟล์ main.js

javascript

import { name, greet } from './export.js';

console.log(name);
greet();

---

13. Class (เราเรียนไปแล้ว)

เขียน OOP แบบใหม่ด้วย class, constructor, extends, super
ทำให้การเขียน OOP สะอาดและอ่านง่ายขึ้นมาก

---

14. Promise, Async/Await (เราเรียนไปแล้ว)

ช่วยให้เขียน Asynchronous Code ได้ง่ายขึ้น ไม่ต้องเขียน callback เยอะๆ

---

15. Symbol (ค่าพิเศษชนิดใหม่)

เป็น primitive type ใหม่ที่ใช้สร้าง unique key

javascript

let id = Symbol("id");
let obj = { [id]: 123 };

---

16. BigInt (รองรับตัวเลขใหญ่มากๆ)

ปกติ number ใน JS มีข้อจำกัด
BigInt ช่วยให้เก็บตัวเลขขนาดใหญ่ได้

javascript

let bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);

---

สรุปสั้นที่สุด

ES6+ = JavaScript สมัยใหม่ที่เขียนสั้นลง, ปลอดภัยขึ้น, ง่ายขึ้น
เขียนโปรเจกต์ใหม่ในยุคนี้:
เกือบทุกคนใช้ ES6+ เป็นมาตรฐานครับ