Những tính năng thú vị của ES2021 không phải ai cũng biết?

ES2021 là gì?

"ECMA International’s TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript." - TC39.es

ES2021 là gì?

Các toán tử gán có điều kiện

/*
 * "Or Or Equals"
 * Nếu x có giá trị "falsy" (false, 0...) , thực hiện toán tử gán phía bên phải
 */
x ||= y;
x || (x = y); 

/*
 * "And And Equals"
 * Nếu x có giá trị "truthy" (true, 1,...), thực hiện toán tử gán phía bên phải
 */
x &&= y;
x && (x = y);

/*
 * "Q Q Equals"
 * Nếu x không có giá trị (undefined, null,...), thực hiện toán tử gán phía bên phải
 */
x ??= y;
x ?? (x = y);

const updateID = user => {

  // Ta có thể thực hiện thủ công như này
  if (!user.id) user.id = 1

  // Hoặc như này
  user.id = user.id || 1

  // Hoặc dùng toàn tử gán có điều kiện
  user.id ||= 1
}

function setOpts(opts) {
  opts.cat ??= 'meow'
  opts.dog ??= 'bow';
}

const obj = {}
setOpts(obj)

console.log(obj) // "{ cat: 'meow', dog: 'bow' }"

Sử dụng _ để phân chia số

const billion = 1000_000_000;
console.log(billion); // 1000000000

const trillion = 1000_000_000_000n;
console.log(trillion.toString()); // "1000000000000"

Promise.any và AggregateError

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});

(async function () {
  const result = await Promise.any([p1, p2, p3]);
  console.log(result); // Prints "A", "B" or "C"
})();

const p = new Promise((resolve, reject) => reject());

try {
  (async function () {
    const result = await Promise.any([p]);
    console.log(result);
  })();
} catch (error) {
  console.log(error.errors);
}

Thử nghĩa mà xem, với Promise.any, ta có thể có tình huống là gọi nhiều APIs một lúc nhưng đều nhằm lấy cùng một tập dữ liệu, API nào có phản hồi sớm hơn thì ta chọn luôn cái đó... Các bạn xem còn có tình huống thú vị nào nữa không nha? 

Phương thức replaceAll của String

Đây hẳn là 1 phương thức vô cùng mạnh mẽ và dễ dùng. Nhưng nếu chương trình của bạn không nhận diện ra nó, thì nhớ kiểm tra lại project bạn đã config đúng phiên bản ES2021 chưa nhé 

// String.prototype.replaceAll(searchValue, replaceValue)

'Hello World'.replace('l', '_');
// → 'He_lo World'

'Hello World'.replace(/l/g, '_');
// → 'He__o Wor_d'

'Hello World'.replaceAll('l', '_');
// → 'He__o Wor_d'

WeakRef và Finalizers

WeakRef

// Global scope
const theA = {};

(() => {
  // Private scope
  const theB = { foo: 'foo' };
  theA.obj = theB;
})();

Rõ ràng ở đây, đối tượng A nằm ở phạm vi toàn cục, dẫn tới việc đối tượng B trong suốt chương trình sẽ không thể bị "thu gom" do đối tượng A vẫn còn ở đó!  Hay nói cách khác thì A có một "tham chiếu mạnh" tới B.

Vâng, chính vì thế mà WeakRef ra đời để giúp ta tạo ra được một "tham chiếu yếu" tới một đối tượng. Nói cách khác, WeakRef sẽ tạo ra một lớp vỏ bọc giúp truy cập tới đối tượng, mà vẫn đảm bảo việc "thu gom" được diễn ra thuận lợi. Điều này là vô cùng tốt khi mà chương trình có chứa rất nhiều các đối tượng lớn gây giảm thiểu hiệu năng nếu như chúng không được "thu gom" đúng cách! 

// Global scope
const theA = {};

(() => {
  // Private scope
  const theB = new WeakRef({ foo: 'foo' }); // Use "new" keyword to create a new WeakRef
  theA.obj = theB.defer(); // Use defer to access the object
})();

console.log(theA.obj) // May be "undefined"

Cần chú ý là việc "thu gom" ở các trình duyệt là có thể khác nhau, vì vậy bạn phải thật cẩn thận khi sử dụng WeakRef. 

Finalizers

console.log('script starting...');

// Create new Finalizers with a callback, may has param "heldValue" or not
const r = new FinalizationRegistry((heldValue) => {
  console.log(heldValue);
});

(() => {
  // Private scope
  const obj = {};
  r.register(obj, "Just got garbage-collected!"); // Register an object to the Finalizers
})();