Scribd
Upload
15 views

15 07 Es2021

Uploaded by

ntdatt2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

15 07 Es2021

Uploaded by

ntdatt2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Javascript cho người mới bắt đầu 2021 🎉 Easy Frontend © 2021

ECMAScript 2021
Key Value
Name ECMAScript 2021
Short name ES2021
Was finalized in June 2021
Feature list
# Name Desc
1 Logical Assignment Operators ??= , ||= , &&=

2 Numeric separator 1_500_000


3 String.prototype.replaceAll() replace all matches with new value
4 Promise.any resolve the value of the first fulfilled promise
5 WeakRefs and Finalizers read more
1. Logical Assignment Operators
# Name Desc
1 Logical OR assignment ||= x ||= y means only assigns x = y if x is falsy.

2 Logical AND assignment &&= x &&= y means only assigns x = y if x is truthy.


3 Logical Nullish assignment ??= x??= y means only assigns x = y if x is nullish

//"Or Or Equals"
x ||= y;
x || (x = y);

// "And And Equals"


x &&= y;
x && (x = y);

// "QQ Equals"
x ??= y;
x ?? (x = y);

1/4
Javascript cho người mới bắt đầu 2021 🎉 Easy Frontend © 2021

Logical OR assignment examples

const a = { duration: 50, title: '' };

a.duration ||= 10;


console.log(a.duration);
// expected output: 50

a.title ||= 'title is empty.';


console.log(a.title);
// expected output: "title is empty"

Tham khảo: https://developer.mozilla.org/en-


US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment
Logical AND assignment examples

let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// expected output: 2

b &&= 2;
console.log(b);
// expected output: 0

Tham khảo: https://developer.mozilla.org/en-


US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment
Logical Nullish assignment examples

const a = { duration: 50 };

a.duration ??= 10;


console.log(a.duration);
// expected output: 50

a.speed ??= 25;


console.log(a.speed);
// expected output: 25

Tham khảo: https://developer.mozilla.org/en-


US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
2/4
Javascript cho người mới bắt đầu 2021 🎉 Easy Frontend © 2021

2. Numeric separator
// before
const count = 1000000;

// ES2021 - more readable


const count = 1_000_000;

// don't overuse it =)))


1_00; // 100
10_0; // 100
1_5_0; // 150;

3. String.prototype.replaceAll()
// Before: need to use regex with global flag
const queryString = 'q=query+string+parameters';
const withSpaces = queryString.replace(/\+/g, ' ');
// 'q=query string parameters'

// ES2021
const queryString = 'q=query+string+parameters';
// const withSpaces = queryString.split('+').join(' ');
queryString.replaceAll('+', ' ');
// 'q=query string parameters'

Comparison between String.prototype.replace() and String.prototype.replaceAll()


searchValue is replace() replaceAll()
a string replace first match replace all matches
a non-global regex replace first match throw error
a global regex same same
Tham khảo: https://github.com/tc39/proposal-string-replaceall

3/4
Javascript cho người mới bắt đầu 2021 🎉 Easy Frontend © 2021

4. Promise.any
Promise.any([
fetch('https://v8.dev/').then(() => 'home'),
fetch('https://v8.dev/blog').then(() => 'blog'),
fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
// Any of the promises was fulfilled.
console.log(first);
// → 'home'
}).catch((error) => {
// All of the promises were rejected.
console.log(error);
});

Promise.race = wait for the first item either fulfilled or rejected.


Promise.any = wait for the first fulfilled item
Tham khảo
https://h3manth.com/ES2021/
https://blog.logrocket.com/new-es2021-features-you-may-have-missed/
https://dev.to/alarid/new-es2021-javascript-features-now-available-48m9

Khoá học Javascript cho người mới bắt đầu 2021 🎉


Tác giả: Hậu Nguyễn - Founder Easy Frontend
Khoá học chỉ được published trên Udemy, không thông qua trung gian.
Khoá học không bán dạng videos upload trên Google Drive hay bất cứ hình thức nào tương tự.
Khoá học có nhóm discord để hỗ trợ trong quá trình học tập.
☎ Liên hệ tác giả để được hỗ trợ:
✅ Facebook: https://www.facebook.com/nvhauesmn/
✅ Fanpage: https://www.facebook.com/learn.easyfrontend
✅ Youtube Channel: https://www.youtube.com/easyfrontend

4/4

You might also like