Những tính năng mới của ECMAScript 2017 (ES8) trong JavaScript

let title = "Total";
console.log(title.padEnd(10, ".") + "1000"); // "Total.....1000"

Giúp hiển thị dữ liệu rõ ràng hơn trên giao diện hoặc báo cáo.
Tự động căn chỉnh dữ liệu mà không cần xử lý thủ công.

Được hỗ trợ rộng rãi trên trình duyệt và Node.js

Một điểm mạnh của ES8 là được hỗ trợ trên hầu hết các trình duyệt hiện đại và trong Node.js, giúp các ứng dụng JavaScript chạy ổn định hơn mà không cần lo ngại về khả năng tương thích.

Lợi ích của việc hỗ trợ rộng rãi:
Không cần polyfill hoặc Babel để sử dụng các tính năng mới.
Code chạy nhanh hơn vì được tối ưu hóa trên các trình duyệt mới nhất.
Ứng dụng trên cả Frontend và Backend, đặc biệt với Node.js.

Ví dụ: Async/Await trong Node.js giúp xử lý file dễ dàng hơn:

const fs = require('fs').promises;

async function readFileContent() {
    try {
        let data = await fs.readFile('example.txt', 'utf-8');
        console.log(data);
    } catch (error) {
        console.error('Lỗi:', error);
    }
}

readFileContent();

Trước đây phải dùng callback hoặc Promise, nhưng với ES8, async/await giúp code Node.js gọn gàng và dễ bảo trì hơn.

So sánh ES8 với ES7 trong JavaScript

ECMAScript 2018 (ES8) mang lại nhiều thay đổi quan trọng so với ECMAScript 2017 (ES7), giúp lập trình viên viết code gọn gàng hơn, dễ đọc hơn và tối ưu hóa hiệu suất. Trong khi ES7 chỉ có hai tính năng mới, ES8 đã mở rộng nhiều hơn, đặc biệt tập trung vào xử lý bất đồng bộ và cải tiến thao tác với object. Dưới đây là những điểm so sánh chi tiết giữa ES8 và ES7.

ES8 có nhiều thay đổi hơn ES7, đặc biệt là trong bất đồng bộ và object handling

ES7 (ECMAScript 2016) chỉ có hai tính năng mới chính:

• Array.prototype.includes() – Kiểm tra xem phần tử có tồn tại trong mảng hay không.
• Toán tử lũy thừa ** – Viết gọn hơn thay vì dùng Math.pow().

ES8 (ECMAScript 2017) mang lại nhiều cải tiến quan trọng hơn, gồm:

• Async/Await – Giúp xử lý bất đồng bộ tốt hơn.
• Object.values() & Object.entries() – Đơn giản hóa việc thao tác với object.
• String padding (padStart() & padEnd()) – Hỗ trợ định dạng chuỗi dễ dàng.
• Object.getOwnPropertyDescriptors() – Lấy đầy đủ thông tin của các thuộc tính trong object.
• Trailing commas trong function parameters – Giúp code dễ chỉnh sửa hơn.

Nhận xét: ES8 có nhiều cải tiến quan trọng hơn ES7, đặc biệt giúp xử lý bất đồng bộ và làm việc với object hiệu quả hơn.

async/await giúp xử lý bất đồng bộ tốt hơn nhiều so với Promise

Trước ES8, JavaScript chủ yếu sử dụng Promise để xử lý bất đồng bộ, nhưng code vẫn khá phức tạp và khó debug khi có nhiều .then() lồng nhau (callback hell).

ES8 giới thiệu async/await, giúp code dễ đọc như code đồng bộ:

Ví dụ với Promise (ES7 trở về trước):

function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Lỗi:', error));
}

fetchData();

Code vẫn có .then() lồng nhau, dễ rối khi có nhiều thao tác bất đồng bộ.

Ví dụ với async/await (ES8):

async function fetchData() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Lỗi:', error);
    }
}

fetchData();

Code ngắn hơn, dễ đọc hơn, ít lỗi hơn.
Dễ debug hơn vì có thể dùng try...catch để xử lý lỗi.

Nhận xét: ES8 giúp xử lý bất đồng bộ dễ dàng hơn nhiều so với ES7 nhờ async/await, giúp code gọn gàng hơn, dễ bảo trì hơn.

Object.values() và Object.entries() giúp đơn giản hóa việc thao tác object

Trước ES8, lập trình viên thường dùng Object.keys() để lấy danh sách key trong object, sau đó phải duyệt thủ công để lấy value.

ES8 thêm Object.values() và Object.entries(), giúp làm việc với object dễ dàng hơn.

Trước ES8 (ES7 sử dụng Object.keys() + map()):

const user = { id: 1, name: "Alice", age: 25 };
const values = Object.keys(user).map(key => user[key]);
console.log(values); // [1, "Alice", 25]

console.log(Object.values(user));  // [1, "Alice", 25]
console.log(Object.entries(user)); // [["id", 1], ["name", "Alice"], ["age", 25]]

let accountNumber = "123";
console.log(accountNumber.padStart(10, "0")); // "0000000123"

let title = "Total";
console.log(title.padEnd(10, ".") + "1000"); // "Total.....1000"

function test(a, b, c) { }

function test(a, b, c,) { }