Top 5 tính năng của JavaScript ES12 bạn nên bắt đầu sử dụng ngay hôm nay

ECMAScript 2021 (ấn bản thứ 11) hiện đang có sẵn và đi kèm với các tính năng, cải tiến cú pháp mới. Các thông số kỹ thuật đã được hoàn thiện bởi ECMA International vào ngày 23 tháng 6 năm 2021. Những cải tiến này được thực hiện để làm cho JavaScript mạnh mẽ hơn và giúp các nhà phát triển hoàn thành nhiệm vụ dễ dàng.

FUNiX sẽ cung cấp cho bạn 5 tính năng hàng đầu của ECMAScript 2021 để bạn có thể bắt đầu sử dụng chúng trong các dự án của mình và cải thiện trải nghiệm trong JavaScript. Người mới bắt đầu và các nhà phát triển có kinh nghiệm có thể nắm được nhiều thông tin qua bài viết này.

5 tính năng JavaScript hàng đầu được cung cấp từ bản cập nhật ECMAScript 2021

1. Dấu phân tách số
2. String.prototype.replaceAll
3. Promise.any () và AggregateError
4. Toán tử chỉ định logic
5. Phương thức lớp riêng và trình truy cập

1. Dấu phân cách số

Các dấu phân cách số cho phép bạn được thêm dấu gạch dưới giữa các chữ số trong các số theo nghĩa đen, điều này giúp dễ đọc hơn. Các dấu gạch dưới này sẽ tự động bị loại bỏ khi tệp được phân tích theo cú pháp. Tham khảo đoạn mã sau để hiểu cách bạn có thể sử dụng dấu phân tách các số.

// Decimal integer literal with digits grouped by thousand
let n1 = 1_000_000_00;
console.log(n1); // This will print: 100000000
// Decimal literal with digits grouped by thousand.
let n2 = 1_000_000_000.150_200
console.log(n2); // This will print: 100000000.1502
// Hexadecimal integer literal with digits grouped by byte.
let n3 = 0x95_65_98_FA_A9
console.log(n3); // This will print: 64165465156
// BigInt literal with digits grouped by thousand.
let n4 = 155_326_458_156_248_168_514n
console.log(n4); // This will print: 15532645815624816814n

2. String.prototype.replaceAll

Hàm replaceAll () trên nguyên mẫu Chuỗi đã cho phép thay thế tất cả các phiên bản của chuỗi con mà không cần sử dụng regex. Nếu các thereplace () được sử dụng trên một chuỗi, nó sẽ thay thế phiên bản đầu tiên của giá trị đó. Mặt khác, replaceAll () cung cấp các chức năng thay thế tất cả các trường hợp của giá trị đó. Tham khảo đoạn mã sau để hiểu cách sử dụng replaceAll ().

// Declare a variable and store some value
const orgStr = 'JavaScript, often abbreviated as JS, is a programming language that conform to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm';

// To replace single instance, use replace().
let newStr = orgStr.replace('JavaScript', 'TypeScript');
console.log(newStr);

// To replace all instances, use replaceAll().
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2);

3. Promise.any () và AggregateError

Promise.any hoàn toàn trái ngược với Promise.all (). Promise.any () được kích hoạt nếu bất kỳ promise nào được giải quyết. Mặt khác, Promise.all () sẽ đợi đến khi tất cả các lời hứa được giải quyết. Sau đây sẽ là sự khác biệt trong any (), all () và allSettled ().

• any () – Điều này thực hiện nếu ít nhất một lời hứa được giải quyết và từ chối nếu tất cả lời hứa bị từ chối.
• all () – Điều này được thực thi nếu tất cả các lời hứa được giải quyết và từ chối nếu ít nhất một promise bị từ chối.
• allSettled () – Điều này thực thi nếu tất cả các promise được giải quyết hoặc bị từ chối.

Tham khảo đoạn code sau để hiểu cách bạn sử dụng Promise.any ().

// Create a Promise.
const promise1 = new Promise((resolve, reject) => {
    // After 2 seconds resolve the first promise.
    setTimeout(() => resolve("The first promise has been resolved."), 2000);
});

// Create a Promise.
const promise2 = new Promise((resolve, reject) => {
    // After 1 second resolve the second promise.
    setTimeout(() => resolve("The second promise has been resolved."), 1000);
});

// Create a Promise.
const promise3 = new Promise((resolve, reject) => {
    // After 3 seconds resolve the third promise.
    setTimeout(() => resolve("The third promise has been resolved."), 3000);
});

(async function () {
    const data = await Promise.any([promise1, promise2, promise3]);
    // Print the data returned from the first resolved Promise.
    console.log(data);
    // The above will print: The second promise has been resolved.
})();

Nếu tất cả các promise  đều bị từ chối, thì một Ngoại lệ AggregateError sẽ được ném ra. Tham khảo đoạn mã dưới đây để hiểu cách bạn có thể xử lý ngoại lệ.

// Create a Promise.
const promise1 = new Promise((resolve, reject) => {
    // After 1 second reject the first promise.
    setTimeout(() => reject("The first promise has been rejected."), 1000);
});

// Create a Promise.
const promise2 = new Promise((resolve, reject) => {
    // After 500 miliseconds reject the second promise.
    setTimeout(() => reject("The second promise has been rejected."), 500);
});

// Try executing the Promises.
(async function () {
    try {
        const data = await Promise.any([promise1, promise2]);
        console.log(data);
    } catch (error) {
        // If all Promises gets rejected, then this try-catch block will handle
        // the aggregate errors.
        console.log("Error: ", error);
    }
})();

4. Các toán tử chỉ định logic

Ba bài toán tử gán logic đã được giới thiệu trong bản cập nhật ECMAScript 2021. Chúng cung cấp sự kết hợp của các toán tử logic và các biểu thức gán.

• Toán tử gán logic HOẶC || =
• Toán tử gán logic AND && =
• Toán tử gán liên kết Nullish ?? =

4.1. Toán tử gán logic OR

Toán tử gán OR logic || = chấp nhận hai toán hạng và gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là sai. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán OR logic.

// In the example, the ||= will check if the songsCount is false (0).
// If false, then the right value will be assigned to the left variable.
let myPlaylist = {songsCount: 0, songs:[]};
myPlaylist.songsCount ||= 100;
console.log(myPlaylist); // This will print: {songsCount: 100, songs: Array(0)}

Toán tử gán OR logic ngắn mạch. Toán tử || = này tương đương với câu lệnh sau sử dụng toán tử OR logic.

a || (a = b)

4.2. Toán tử gán logic AND

Toán tử gán logic && = chỉ gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là true. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán logic AND.

// In the example, the &&= will check if the filesCount is true.
// If true, then the right value will be assigned to the left variable.
let myFiles = {filesCount: 100, files:[]};
myFiles.filesCount &&= 5;
console.log(myFiles); // This will print: {filesCount: 5, files: Array(0)}

Toán tử gán logic AND cũng ngắn mạch. Toán tử && = này tương đương với câu lệnh sau sử dụng toán tử logic AND.

a && (a = b)

4.3. Toán tử gán liên kết Nullish

Toán tử gán kết hợp nullish ?? = chỉ gán toán hạng bên phải cho toán hạng bên trái nếu toán hạng bên trái là null hoặc không xác định. Tham khảo đoạn mã sau để tìm hiểu cách bạn có thể sử dụng toán tử gán kết hợp nullish.

// In the example, the ??= will check if the lastname is null or undefined.
// If null or undefined, then the right value will be assigned to the left variable.
let userDetails = {firstname: 'Katina', age: 24}
userDetails.lastname ??= 'Dawson';
console.log(userDetails); // This will print: {firstname: 'Katina', age: 24, lastname: 'Dawson'}

Toán tử gán liên kết vô hiệu cũng ngắn mạch. Toán tử này ?? = tương đương với câu lệnh sau sử dụng toán tử kết hợp nullish.

a ?? (a = b)

5. Phương pháp lớp riêng và trình truy cập

Các phương thức và thuộc tính của lớp được công khai theo mặc định, nhưng các phương thức và thuộc tính private có thể được tạo ra bằng cách sử dụng tiền tố băm #. Việc đóng gói quyền riêng tư được thực thi từ bản cập nhật ECMAScript 2021. Các phương thức và thuộc tính private này chỉ có thể được truy cập từ bên trong lớp. Tham khảo đoạn mã sau để tìm hiểu cách có thể sử dụng các phương pháp riêng tư.

// Let's create a class named User.
class User {
    constructor() {}

    // The private methods can be created by prepending '#' before
    // the method name.
    #generateAPIKey() {
        return "d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767";
    }

    getAPIKey() {
        // The private methods can be accessed by using '#' before
        // the method name.
        return this.#generateAPIKey();
    }
}

const user = new User();
const userAPIKey = user.getAPIKey();
console.log(userAPIKey); // This will print: d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767

Các accessor tư nhân là – Getters và Setters riêng tư. Getter cho phép bạn lấy giá trị của một thuộc tính lớp và Setter cho phép bạn gán giá trị cho một thuộc tính lớp. Bạn có thể xác định một getter riêng tư bằng cách sử dụng một hash # tiền tố.

get #newAccountPassword() {}

Tương tự, bạn có thể xác định bộ cài đặt riêng bằng cách sử dụng tiền tố băm #.

set #generateAccountPassword(newPassword) {}

Tham khảo đoạn code sau để tìm hiểu cách bạn có thể sử dụng Getters và Setters riêng.

// Let's create a class named Str.
class Str {
    // The private attributes can be created by prepending '#'
    // before the attribute name.
    #uniqueStr;
 
    constructor() {}

    // A private Setters can be created by prepending '#' before
    // the Setter name.
    set #generateUniqueStringByCustomLength(length = 24) {
        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let randomStr = "";

        for (let i = 0; i < length; i++) {
            const randomNum = Math.floor(Math.random() * characters.length);
            randomStr += characters[randomNum];
        }

        this.#uniqueStr = randomStr;
    }

    // Public Setter
    set setRandomString(length) {
        this.#generateUniqueStringByCustomLength = length;
    }

    // A private getter can be created by prepending '#' before
    // the Getter name.
    get #fetchUniqueString() {
        return this.#uniqueStr;
    }

    // Public Getter
    get getRandomString() {
        return this.#fetchUniqueString;
    }
}

const str = new Str();
// Calling a public Setter which will then access the private Setter
// within the class.
str.setRandomString = 20;

// Calling a public Getter which will then access the private Getter
// withing the class.
const uniqueStr = str.getRandomString;
console.log(uniqueStr); // This will print a random string everytime you execute the Getter after the Setter.

Bạn đã hoàn thành việc tìm hiểu các tính năng được cung cấp bởi bản cập nhật JavaScript ES12 (ECMAScript 2021). Bây giờ bạn có thể tiếp tục và bắt đầu triển khai các tính năng trên cho các dự án hiện tại hoặc sắp tới của bạn.

Lương Thuận – dịch từ Levelup