JavaScript ES6+

ES6 (ECMAScript 2015) và các phiên bản sau đó đã mang đến nhiều tính năng mới mạnh mẽ cho JavaScript, giúp code ngắn gọn và dễ đọc hơn.

⚡ ES6+ là gì?

ES6+ bao gồm các tính năng JavaScript hiện đại từ ES6 (2015) trở đi, giúp viết code hiện đại và hiệu quả hơn.

🎬 Video hướng dẫn

🖼️ Hình ảnh minh họa

📚 Các tính năng quan trọng

1. let và const

1
2
3
4
5
6
// ES5
var name = "John";

// ES6+
let name = "John";  // Có thể thay đổi
const age = 25;     // Không thể thay đổi

2. Arrow Functions

1
2
3
4
5
6
7
// ES5
function greet(name) {
    return "Hello " + name;
}

// ES6+
const greet = (name) => "Hello " + name;

3. Template Literals

1
2
3
4
5
// ES5
var message = "Hello " + name + ", you are " + age + " years old";

// ES6+
const message = `Hello ${name}, you are ${age} years old`;

4. Destructuring

1
2
3
4
5
// Array destructuring
const [first, second] = [1, 2];

// Object destructuring
const {name, age} = {name: "John", age: 25};

5. Spread Operator

1
2
3
4
5
6
7
// Array
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

// Object
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};

6. Classes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `Hello, I'm ${this.name}`;
    }
}

7. Promises và Async/Await

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// Promises
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Async/Await
async function getData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

8. Modules

1
2
3
4
5
6
// export
export const name = "John";
export function greet() { return "Hello"; }

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