Những tính năng mới trong ECMAScript 2020 (ES11) JavaScript

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay, và nó không ngừng được cải tiến để đáp ứng nhu cầu phát triển ứng dụng web hiện đại. Mỗi năm, ECMAScript – tiêu chuẩn của JavaScript – đều được cập nhật với các tính năng mới giúp lập trình viên viết code dễ đọc hơn, hiệu quả hơn và tối ưu hơn.

ECMAScript 2020 (ES11) là phiên bản mới được phát hành với nhiều cải tiến đáng chú ý, giúp đơn giản hóa cú pháp và nâng cao hiệu suất làm việc với dữ liệu. Một số tính năng nổi bật trong ES11 bao gồm Optional Chaining (?.) giúp truy cập thuộc tính an toàn hơn, Nullish Coalescing Operator (??) giúp kiểm tra giá trị null hoặc undefined dễ dàng hơn, BigInt hỗ trợ làm việc với số nguyên lớn, và Dynamic Import giúp tối ưu hiệu suất khi tải module.

Vậy ES11 có gì mới và tại sao nó lại quan trọng trong lập trình JavaScript hiện đại? Hãy cùng tìm hiểu chi tiết những tính năng nổi bật của ECMAScript 2020 trong bài viết này.

ECMAScript 2020 (ES11) là gì?

ECMAScript 2020 (hay ES11) là phiên bản cập nhật của tiêu chuẩn ECMAScript – nền tảng của JavaScript. Được phát hành vào năm 2020, ES11 tiếp tục bổ sung nhiều tính năng quan trọng giúp đơn giản hóa cú pháp, cải thiện hiệu suất và tối ưu hóa quy trình phát triển ứng dụng web.

Trước đây, các phiên bản ECMAScript trước như ES6, ES7, ES8... đã mang lại nhiều cải tiến đáng kể như let & const, async/await, Promise, Object.entries(), flatMap(), v.v. Với ES11, JavaScript tiếp tục phát triển theo hướng hiện đại hơn với những tính năng mới như Optional Chaining (?.), Nullish Coalescing Operator (??), BigInt, Dynamic Import, v.v.

Tại sao ES11 quan trọng đối với lập trình JavaScript hiện đại?

ES11 đóng vai trò quan trọng trong việc giúp lập trình viên viết code dễ đọc, ngắn gọn và tối ưu hơn. Dưới đây là một số lý do khiến ES11 trở thành một bước tiến quan trọng trong lập trình JavaScript hiện đại:

Tăng cường tính dễ đọc và bảo trì code

• Tính năng Optional Chaining (?.) giúp truy cập thuộc tính của object một cách an toàn, tránh lỗi khi truy cập giá trị null hoặc undefined.
• Nullish Coalescing Operator (??) giúp xử lý giá trị null và undefined trực quan hơn so với toán tử ||.

Hỗ trợ làm việc với số nguyên lớn

• BigInt là một trong những cải tiến quan trọng giúp JavaScript có thể làm việc với số nguyên cực lớn mà trước đây Number không thể xử lý chính xác.

Tối ưu hóa hiệu suất và cải thiện cách quản lý module

• Dynamic Import (import()) giúp tải module JavaScript một cách linh hoạt, chỉ tải khi cần thiết, giúp tối ưu hiệu suất ứng dụng web.

Cải thiện khả năng làm việc với dữ liệu

• Promise.allSettled() giúp xử lý nhiều Promise đồng thời mà không bị lỗi khi có một Promise thất bại, giúp ứng dụng ổn định hơn.
• String.prototype.matchAll() giúp làm việc với biểu thức chính quy (RegEx) dễ dàng hơn.

Được hỗ trợ trên các trình duyệt và môi trường Node.js hiện đại

• Hầu hết các trình duyệt và phiên bản Node.js mới đều hỗ trợ ES11, giúp lập trình viên có thể sử dụng các tính năng mới mà không lo về khả năng tương thích.

Nhìn chung, ECMAScript 2020 không chỉ giúp lập trình viên viết code hiệu quả hơn mà còn tối ưu hóa cách làm việc với dữ liệu, nâng cao hiệu suất và giúp JavaScript tiếp tục phát triển mạnh mẽ trong kỷ nguyên web hiện đại.

Các tính năng mới trong ECMAScript 2020 (ES11)

Nullish Coalescing Operator (??) – Toán tử hợp nhất nullish

Toán tử ?? là một cách mới để xử lý giá trị null hoặc undefined mà không bị ảnh hưởng bởi các giá trị falsy khác như 0, false, hoặc "".

So sánh giữa ?? và ||

• Toán tử || (hoặc logic) trả về giá trị đầu tiên có thể chuyển đổi thành true (truthy).
• Toán tử ?? chỉ kiểm tra null và undefined, không ảnh hưởng đến các giá trị falsy khác như 0, false, "".

Ví dụ ứng dụng thực tế:

let value1 = null ?? "Giá trị mặc định";
console.log(value1); // "Giá trị mặc định"

let value2 = 0 ?? 100; 
console.log(value2); // 0 (giữ nguyên giá trị)

let value3 = "" ?? "Chuỗi mặc định"; 
console.log(value3); // "" (giữ nguyên giá trị)

Ứng dụng của ?? giúp giảm lỗi khi làm việc với dữ liệu động từ API hoặc form nhập liệu.

Optional Chaining (?.) – Truy cập thuộc tính an toàn

Tính năng Optional Chaining (?.) giúp truy cập thuộc tính của object một cách an toàn mà không gây lỗi khi object đó là null hoặc undefined.

Ứng dụng khi làm việc với dữ liệu động từ API response:

Trước đây, khi muốn truy cập thuộc tính sâu trong một object mà không chắc chắn nó tồn tại, chúng ta phải kiểm tra từng bước:

if (user && user.profile && user.profile.address) {
  console.log(user.profile.address.street);
}

Với ES11, chúng ta có thể sử dụng ?. để đơn giản hóa:

console.log(user?.profile?.address?.street); // Không lỗi nếu address không tồn tại

Nếu user.profile.address không tồn tại, kết quả sẽ là undefined thay vì gây lỗi.

Ví dụ minh họa cách sử dụng:

let user = { name: "Alice", profile: { age: 25 } };
console.log(user?.profile?.age); // 25
console.log(user?.contact?.email); // undefined

BigInt – Hỗ trợ số nguyên lớn

Trước ES11, JavaScript chỉ có thể xử lý số nguyên đến 2^53 - 1 (Number.MAX_SAFE_INTEGER). Với BigInt, chúng ta có thể làm việc với số lớn hơn.

Cách sử dụng BigInt với hậu tố n:

let bigNumber = 12345678901234567890n; 
console.log(bigNumber); // 12345678901234567890n
console.log(typeof bigNumber); // "bigint"

Ứng dụng trong tài chính và mật mã:

• Xử lý số lớn trong giao dịch tài chính.
• Mã hóa dữ liệu với thuật toán số nguyên lớn.

Promise.allSettled() – Hỗ trợ quản lý nhiều Promise cùng lúc

Trước đây, Promise.all() sẽ thất bại ngay khi có một Promise bị reject. Promise.allSettled() trong ES11 giúp giải quyết vấn đề này bằng cách đợi tất cả Promise hoàn thành, bất kể chúng thành công hay thất bại.

So sánh Promise.all() và Promise.allSettled():

let promises = [
  Promise.resolve("Thành công 1"),
  Promise.reject("Lỗi 1"),
  Promise.resolve("Thành công 2"),
];

Promise.all(promises).then(console.log).catch(console.error);
// Lỗi 1 - Dừng ngay lập tức

Promise.allSettled(promises).then(console.log);
// [{status: "fulfilled", value: "Thành công 1"}, {status: "rejected", reason: "Lỗi 1"}, {status: "fulfilled", value: "Thành công 2"}]

Khi gọi nhiều API và cần xử lý tất cả kết quả dù có lỗi.

Dynamic Import – Import module động

Trước ES11, các module phải được import tĩnh ngay từ đầu (import ... from "module"). Dynamic Import cho phép import module khi cần thiết, giúp tối ưu hiệu suất.

Ví dụ cách sử dụng import() để load module động:

async function loadModule() {
  let { default: myModule } = await import("./myModule.js");
  myModule.sayHello();
}
loadModule();

• Lazy Loading: Chỉ tải code khi cần thiết.
• Giảm kích thước file JavaScript ban đầu.

String.prototype.matchAll() – Cải tiến trong làm việc với RegEx

Trước đây, String.prototype.match() chỉ trả về mảng kết quả đầu tiên. Với matchAll(), ta có thể lấy tất cả kết quả khớp.

Ví dụ minh họa cách sử dụng:

let text = "ES11 ra mắt năm 2020, ES12 ra mắt năm 2021";
let regex = /ES(\d+)/g;
let matches = [...text.matchAll(regex)];

console.log(matches);
// [
//   ["ES11", "11"], 
//   ["ES12", "12"]
// ]

globalThis.myVar = "Hello World";
console.log(globalThis.myVar); // "Hello World"

console.log(import.meta.url); 
// Trả về URL của module đang chạy

let discount = 0 || 10; // 10 (mặc dù discount có giá trị hợp lệ là 0)
console.log(discount);

let discount = 0 ?? 10; // Giữ nguyên 0 vì nó không phải null/undefined
console.log(discount);

if (user && user.profile && user.profile.address) {
  console.log(user.profile.address.street);
}

console.log(user?.profile?.address?.street); // undefined nếu không tồn tại

import { heavyFunction } from "./heavyModule.js";
heavyFunction();

async function loadModule() {
  let { heavyFunction } = await import("./heavyModule.js");
  heavyFunction();
}
loadModule();

Promise.all([
  Promise.resolve("Success 1"),
  Promise.reject("Error"), 
  Promise.resolve("Success 2")
])
.then(console.log)
.catch(console.error); // "Error" - Dừng ngay lập tức

Promise.allSettled([
  Promise.resolve("Success 1"),
  Promise.reject("Error"),
  Promise.resolve("Success 2")
])
.then(console.log);
// [{status: "fulfilled", value: "Success 1"}, {status: "rejected", reason: "Error"}, {status: "fulfilled", value: "Success 2"}]

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber * 2n); 
// 246913578024691357802469135780n

let text = "ES11 ra mắt năm 2020, ES12 ra mắt năm 2021";
console.log(text.match(/ES(\d+)/g)); // ["ES11", "ES12"]

let matches = [...text.matchAll(/ES(\d+)/g)];
console.log(matches);
/*
[
  ["ES11", "11", index: 0, input: "ES11 ra mắt năm 2020, ES12 ra mắt năm 2021"],
  ["ES12", "12", index: 20, input: "ES11 ra mắt năm 2020, ES12 ra mắt năm 2021"]
]
*/

let globalVar = "Hello";
console.log(typeof window !== "undefined" ? window.globalVar : globalVar); // Không thống nhất

globalThis.globalVar = "Hello";
console.log(globalThis.globalVar); // "Hello"

let user = {};
console.log(user && user.profile && user.profile.name); // undefined (cồng kềnh)

console.log(user?.profile?.name); // undefined (không báo lỗi)

let discount = 0 || 10; // 10 (mặc dù 0 là giá trị hợp lệ)
console.log(discount);

let discount = 0 ?? 10; // 0 (vẫn giữ nguyên vì không phải null/undefined)
console.log(discount);

console.log(9007199254740991 + 1); // 9007199254740992 (sai)
console.log(9007199254740991 + 2); // 9007199254740992 (sai)

let bigNumber = 9007199254740991n + 2n;
console.log(bigNumber); // 9007199254740993n (chính xác)

Promise.all([
  Promise.resolve("Success 1"),
  Promise.reject("Error"),
  Promise.resolve("Success 2")
])
.then(console.log)
.catch(console.error); // "Error" - Dừng ngay lập tức

Promise.allSettled([
  Promise.resolve("Success 1"),
  Promise.reject("Error"),
  Promise.resolve("Success 2")
])
.then(console.log);
/*
[
  { status: "fulfilled", value: "Success 1" },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: "Success 2" }
]
*/

import { heavyFunction } from "./heavyModule.js";
heavyFunction(); 

async function loadModule() {
  let { heavyFunction } = await import("./heavyModule.js");
  heavyFunction();
}
loadModule();